Описание
Легкий (~34kb минифицированный js файл и ~9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах:
IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
In EnglishAIR DATEPICKERлегкий кроссбраузерный jQuery календарь
In EnglishAIR DATEPICKERлегкий кроссбраузерный jQuery календарь
Установка
bower i --save air-datepickerЛибо можно скачать файлы напрямую с GitHub
Использование
Подключите стили и скрипты из папки/dist:
<html>
- <head>
- <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
- <script src="dist/js/datepicker.min.js"></script>
- </head>
+ <head>
+ <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
+ <script src="dist/js/datepicker.min.js"></script>
+ </head>
</html>Календарь автоматически проинициализируется на элементах с классом.datepicker-here, при этом опции можно передать черезdataатрибуты.
<input type='text' class="datepicker-here" data-position="right top" />Ручная инициализация
// Инициализация
$('#my-element').datepicker([options])
@@ -12,235 +12,270 @@ $('#my-element').datepicker([options])
$('#my-element').data('datepicker')
Примеры
Инициализация с опциями по умолчанию
Пример
<input type='text' class='datepicker-here' />
Выбор нескольких дат
Передайте параметр{multipleDates: true}для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число{multipleDates: 3}.
Пример
<input type="text"
- class="datepicker-here"
- data-multiple-dates="3"
- data-multiple-dates-separator=", "
- data-position='right top'/>
+ class="datepicker-here"
+ data-multiple-dates="3"
+ data-multiple-dates-separator=", "
+ data-position='right top'/>
Постоянно видимый календарь
Проинициализируйте плагин на элементе, который не является текстовым полем, например на<div> … </div>, либо передайте параметр{inline: true}.
Пример
<div class="datepicker-here"></div>
Выбор месяца
Пример
<input type="text"
- class="datepicker-here"
- data-min-view="months"
- data-view="months"
- data-date-format="MM yyyy" />
+ class="datepicker-here"
+ data-min-view="months"
+ data-view="months"
+ data-date-format="MM yyyy" />
Минимальная и максимальные даты
Чтобы ограничить выбор даты, используйтеminDateиmaxDate, которым нужно передать объект даты.
Пример
$('#minMaxExample').datepicker({
- // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня
- minDate: new Date()
+ // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня
+ minDate: new Date()
})
-Диапозон дат
Используйте парамтер{range: true}для выбора диапазона. В качестве разделителя дат будет использованmultipleDatesSeparator
Пример
<input type="text" data-range="true" data-multiple-dates-separator=" - " class="datepicker-here"/>
+Диапозон дат
Используйте парамтер{range: true}для выбора диапазона. В качестве разделителя дат будет использованmultipleDatesSeparator
Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить{toggleSelected: false}.
Пример
<input type="text" data-range="true" data-multiple-dates-separator=" - " class="datepicker-here"/>
Неактивные дни недели
Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методомonRenderCell.
Пример
// Сделаем неактивными воскресенье и субботу
var disabledDays = [0, 6];
$('#disabled-days').datepicker({
- onRenderCell: function (date, cellType) {
- if (cellType == 'day') {
- var day = date.getDay(),
- isDisabled = disabledDays.indexOf(day) != -1;
+ onRenderCell: function (date, cellType) {
+ if (cellType == 'day') {
+ var day = date.getDay(),
+ isDisabled = disabledDays.indexOf(day) != -1;
- return {
- disabled: isDisabled
- }
- }
- }
+ return {
+ disabled: isDisabled
+ }
+ }
+ }
})
Кастомное содержимое ячеек
Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методомonRenderCell.
Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:
Пример
var eventDates = [1, 10, 12, 22],
- $picker = $('#custom-cells'),
- $content = $('#custom-cells-events'),
- sentences = [ … ];
+ $picker = $('#custom-cells'),
+ $content = $('#custom-cells-events'),
+ sentences = [ … ];
$picker.datepicker({
- onRenderCell: function (date, cellType) {
- var currentDate = date.getDate();
+ onRenderCell: function (date, cellType) {
+ var currentDate = date.getDate();
- // Добавляем вспомогательный элемент, если число содержится в `eventDates`
- if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
- return {
- html: currentDate + '<span class="dp-note"></span>'
- }
- }
- },
- onSelect: function onSelect(fd, date) {
- var title = '', content = ''
+ // Добавляем вспомогательный элемент, если число содержится в `eventDates`
+ if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+ return {
+ html: currentDate + '<span class="dp-note"></span>'
+ }
+ }
+ },
+ onSelect: function onSelect(fd, date) {
+ var title = '', content = ''
- // Если выбрана дата с событием, то отображаем его
- if (date && eventDates.indexOf(date.getDate()) != -1) {
- title = fd;
- content = sentences[Math.floor(Math.random() * eventDates.length)];
- }
+ // Если выбрана дата с событием, то отображаем его
+ if (date && eventDates.indexOf(date.getDate()) != -1) {
+ title = fd;
+ content = sentences[Math.floor(Math.random() * eventDates.length)];
+ }
- $('strong', $content).html(title)
- $('p', $content).html(content)
- }
+ $('strong', $content).html(title)
+ $('p', $content).html(content)
+ }
})
// Сразу выберем какую-ниудь дату из `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+Появление и скрытие календаря
Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опцииonShowиonHide
Пример
$('#example-show-hide-callbacks').datepicker({
+ onShow: function(dp, animationCompleted){
+ if (!animationCompleted) {
+ log('start showing')
+ } else {
+ log('finished showing')
+ }
+ },
+ onHide: function(dp, animationCompleted){
+ if (!animationCompleted) {
+ log('start hiding')
+ } else {
+ log('finished hiding')
+ }
+ }
+})
+
Выбор времени
Для выбора времени используйте опцию{timepicker: true}- она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметромstartDate.
Пример
<div class="datepicker-here" data-timepicker="true"></div>Подробнее о параметрах выбора времени можно почитать в Опциях.
Формат времени
Формат времени задается в объекте локализации, либо в парамтреtimeFormat. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата вtimeFormatнужно добавить символaaилиAA. После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.
Пример
<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
Действия со временем
Для задания максимально/минимально возможных значений часов или минут используйте параметрыmaxHours,minHours,maxMinutes,minMinutes. Также время можно указывать в парамтерахminDateиmaxDate
Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.
Пример
<input type='text' id='timepicker-actions-exmpl' />
<script>
- // Зададим стартовую дату
- var start = new Date(),
- prevDay,
- startHours = 9;
+ // Зададим стартовую дату
+ var start = new Date(),
+ prevDay,
+ startHours = 9;
- // 09:00
- start.setHours(9);
- start.setMinutes(0);
+ // 09:00
+ start.setHours(9);
+ start.setMinutes(0);
- // Если сегодня суббота или воскресенье - 10:00
- if ([6,0].indexOf(start.getDay()) != -1) {
- start.setHours(10);
- startHours = 10
- }
+ // Если сегодня суббота или воскресенье - 10:00
+ if ([6,0].indexOf(start.getDay()) != -1) {
+ start.setHours(10);
+ startHours = 10
+ }
- $('#timepicker-actions-exmpl').datepicker({
- timepicker: true,
- startDate: start,
- minHours: startHours,
- maxHours: 18,
- onSelect: function(fd, d, picker) {
- // Ничего не делаем если выделение было снято
- if (!d) return;
+ $('#timepicker-actions-exmpl').datepicker({
+ timepicker: true,
+ startDate: start,
+ minHours: startHours,
+ maxHours: 18,
+ onSelect: function(fd, d, picker) {
+ // Ничего не делаем если выделение было снято
+ if (!d) return;
- var day = d.getDay();
+ var day = d.getDay();
- // Обновляем состояние календаря только если была изменена дата
- if (prevDay != undefined && prevDay == day) return;
- prevDay = day;
+ // Обновляем состояние календаря только если была изменена дата
+ if (prevDay != undefined && prevDay == day) return;
+ prevDay = day;
- // Если выбранный день суббота или воскресенье, то устанавливаем
- // часы для выходных, в противном случае восстанавливаем начальные значения
- if (day == 6 || day == 0) {
- picker.update({
- minHours: 10,
- maxHours: 16
- })
- } else {
- picker.update({
- minHours: 9,
- maxHours: 18
- })
- }
- }
- })
+ // Если выбранный день суббота или воскресенье, то устанавливаем
+ // часы для выходных, в противном случае восстанавливаем начальные значения
+ if (day == 6 || day == 0) {
+ picker.update({
+ minHours: 10,
+ maxHours: 16
+ })
+ } else {
+ picker.update({
+ minHours: 9,
+ maxHours: 18
+ })
+ }
+ }
+ })
</script>
Локализация
Вы можете добавить свою локализацию в объект$.fn.datepicker.language["my-lang"]и при вызове календаря передать название языка в параметрlanguage
$.fn.datepicker.language['my-lang'] = {...}
$('.my-datepicker').datepicker({
- language: 'my-lang'
+ language: 'my-lang'
})
Также объект локализации можно передавать непосредственно вlanguage
$('.my-datepicker').datepicker({
- language: {
- days: [...]
- ...
- }
+ language: {
+ days: [...]
+ ...
+ }
})
Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).
Пример объекта локализации
$.fn.datepicker.language['ru'] = {
- days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
- daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
- daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
- months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
- monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
- today: 'Сегодня',
- clear: 'Очистить',
- dateFormat: 'dd.mm.yyyy',
- timeFormat: 'hh:ii',
- firstDay: 1
+ days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
+ daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+ daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+ months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
+ monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+ today: 'Сегодня',
+ clear: 'Очистить',
+ dateFormat: 'dd.mm.yyyy',
+ timeFormat: 'hh:ii',
+ firstDay: 1
};
Опции
classes
Типstring
Значение по умолчанию""
Дополнительные классы для календаря.
inline
Типboolean
Значение по умолчаниюfalse
Если true, то календарь будет виден постоянно.
language
Типstring|object
Значение по умолчанию"ru"
Язык календаря. Если передается строка, то поиск языка будет осуществляться в объектеDatepicker.languageЕсли передан объект, то данные будут браться из него.
Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.
startDate
ТипDate
Значение по умолчаниюnew Date()
Дата, которая будет отображаться при инициализации календаря.
firstDay
Типnumber
Значение по умолчанию""
Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
@@ -248,37 +283,39 @@ $('.my-datepicker').datepicker({
воторым - положение на этой оси. Например{position: "right top"}- утсановит позицию клаендаря справа вверху от текстового поля.
offset
Типnumber
Значение по умолчанию12
Отступ от основной оси позиционирования.
view
Типstring
Значение по умолчанию"days"
Начальный вид календаря. Возможноые значения:
days- отображение дней месяцаmonths- отображение месяцев одного годаyears- отображение годов одной декады
minView
Типstring
Значение по умолчанию"days"
Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
Возможные значения такие же как и у параметраview.
showOtherMonths
Типboolean
Значение по умолчаниюtrue
Если true, то будут отображаться дни других месяцев.
selectOtherMonths
Типboolean
Значение по умолчаниюtrue
Если true, то можно будет выбрать дни из других месяцев.
moveToOtherMonthsOnSelect
Типboolean
Значение по умолчаниюtrue
Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
showOtherYears
Типboolean
Значение по умолчаниюtrue
Если true, то при отображении декады, будут показаны годы из других декад.
selectOtherYears
Типboolean
Значение по умолчаниюtrue
Если true, то можно будет выбрать года из других декад
moveToOtherYearsOnSelect
Типboolean
Значение по умолчаниюtrue
Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
minDate
ТипDate
Значение по умолчанию""
Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
maxDate
ТипDate
Значение по умолчанию""
Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
disableNavWhenOutOfRange
Типboolean
Значение по умолчаниюtrue
Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
multipleDates
Типboolean|number
Значение по умолчаниюfalse
Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
multipleDatesSeparator
Типstring
Значение по умолчанию","
Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.
range
Типboolean
Значение по умолчаниюfalse
Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использованmultipleDatesSeparator
todayButton
Типboolean|Date
Значение по умолчаниюfalse
Если true, то будет отображена кнопка "Сегодня". Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.
// Выбор сегодняшнего дня
$('.datepicker').datepicker({
- todayButton: new Date()
+ todayButton: new Date()
})
clearButton
Типboolean
Значение по умолчаниюfalse
Если true, то будет отображена кнопка "Очистить".
showEvent
Типstring
Значение по умолчанию"focus"
Тип события, по наступлению которого будет показан календарь.
autoClose
Типboolean
Значение по умолчаниюfalse
Если true, то при активации даты, календарь закроется.
prevHtml
Типstring
Значение по умолчанию<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>
Контент кнопки 'предыдущий месяц|год|декада'.
nextHtml
Типstring
Значение по умолчанию<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>
Контент кнопки 'следующий месяц|год|декада'.
navTitles
Типobject
Значение по умолчанию
navTitles = {
- days: 'MM, <i>yyyy</i>',
- months: 'yyyy',
- years: 'yyyy1 - yyyy2'
+ days: 'MM, <i>yyyy</i>',
+ months: 'yyyy',
+ years: 'yyyy1 - yyyy2'
};Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозначения что и вdateFormat. Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
$('#my-datepicker').datepicker({
- navTitles: {
- days: '<h3>Выберете дату заезда</h3> MM, yyyy'
- }
+ navTitles: {
+ days: '<h3>Выберете дату заезда</h3> MM, yyyy'
+ }
})monthsField
Типstring
Значение по умолчанию"monthsShort"
Какое поле из объекта локализации использовать в качестве названий месяцев, когдаview = "months".
timepicker
Типboolean
Значение по умолчаниюfalse
Еслиtrue, то будет добавлена возомжность выбора времени.
dateTimeSeparator
Типstring
Значение по умолчанию" "
Разделитель между датой и временем.
timeFormat
Типstring
Значение по умолчаниюnull
Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
-Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметрtimeFormat, например{timeFormat: "hh:ii AA"}Возможные варианты:
- h- часы
- hh- часы, с лидирующим нулем
- i- минуты
- ii- минуты, с лидирующим нулем
- aa- период дня - 'am' или 'pm'
- AA- период дня заглавными буквами
minHours
Типnumber
Значение по умолчанию0
Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.
maxHours
Типnumber
Значение по умолчанию23
Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.
minMinutes
Типnumber
Значение по умолчанию0
Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.
maxMinutes
Типnumber
Значение по умолчанию59
Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.
hoursStep
Типnumber
Значение по умолчанию1
Шаг выбора часов.
minutesStep
Типnumber
Значение по умолчанию1
Шаг выбора минут.
События
onSelect(formattedDate, date, inst)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при выборе даты.
- formattedDatestring- отформатированная дата.
- dateDate|array- объект
Dateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов. - instobject- экземпляр плагина.
onChangeMonth(month, year)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении месяца.
- monthnumber- номер месяца (от 0 до 12), к которому осуществлен переход.
- yearnumber- номер года, к которому осуществлен переход.
onChangeYear(year)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении года.
- yearnumber- номер года, к которому осуществлен переход
onChangeDecade(decade)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении декады.
- decadearray- массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.
onChangeView(view)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении вида календаря
- viewstring- вид, к которому осуществлен переход (days, months, years).
onRenderCell(date, cellType)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при отрисовке ячейки календаря.
- dateDate- объект даты текущей ячейки
- cellTypestring- тип текущей ячейки (day, month, year).
Функция должна возвращать объект, которой может состоять из трех полей:
{
- html: '', // Кастомный контент ячейки
- classes: '', // Дополнительные классы для ячейки
- disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
+Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметрtimeFormat, например{timeFormat: "hh:ii AA"}Возможные варианты:- h- часы
- hh- часы, с лидирующим нулем
- i- минуты
- ii- минуты, с лидирующим нулем
- aa- период дня - 'am' или 'pm'
- AA- период дня заглавными буквами
minHours
Типnumber
Значение по умолчанию0
Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.
maxHours
Типnumber
Значение по умолчанию23
Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.
minMinutes
Типnumber
Значение по умолчанию0
Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.
maxMinutes
Типnumber
Значение по умолчанию59
Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.
hoursStep
Типnumber
Значение по умолчанию1
Шаг выбора часов.
minutesStep
Типnumber
Значение по умолчанию1
Шаг выбора минут.
События
onSelect(formattedDate, date, inst)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при выборе даты.
- formattedDatestring- отформатированная дата.
- dateDate|array- объект
Dateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов. - instobject- экземпляр плагина.
onShow(inst, animationCompleted)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при появлении календаря.
- instObject- экземпляр календаря.
- animationCompletedboolean- индикатор состояния анимации.
+если
false, то анимация только началась, еслиtrue- уже закончилась.
onHide(inst, animationCompleted)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при скрытии календаря.
- instObject- экземпляр календаря.
- animationCompletedboolean- индикатор состояния анимации.
+если
false, то анимация только началась, еслиtrue- уже закончилась.
onChangeMonth(month, year)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении месяца.
- monthnumber- номер месяца (от 0 до 12), к которому осуществлен переход.
- yearnumber- номер года, к которому осуществлен переход.
onChangeYear(year)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении года.
- yearnumber- номер года, к которому осуществлен переход
onChangeDecade(decade)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении декады.
- decadearray- массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.
onChangeView(view)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при изменении вида календаря
- viewstring- вид, к которому осуществлен переход (days, months, years).
onRenderCell(date, cellType)
Типfunction
Значение по умолчаниюnull
Функция обратного вызова при отрисовке ячейки календаря.
- dateDate- объект даты текущей ячейки
- cellTypestring- тип текущей ячейки (day, month, year).
Функция должна возвращать объект, которой может состоять из трех полей:
{
+ html: '', // Кастомный контент ячейки
+ classes: '', // Дополнительные классы для ячейки
+ disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
}Пример
$('#my-datepicker').datepicker({
- // Передаем функцию, которая добавляет 11 числу каждого месяца класс 'my-class'
- // и делает их невозможными к выбору.
- onRenderCell: function(date, cellType) {
- if (cellType == 'day' && date.getDate() == 11) {
- return {
- classes: 'my-class',
- disabled: true
- }
- }
- }
+ // Передаем функцию, которая добавляет 11 числу каждого месяца класс 'my-class'
+ // и делает их невозможными к выбору.
+ onRenderCell: function(date, cellType) {
+ if (cellType == 'day' && date.getDate() == 11) {
+ return {
+ classes: 'my-class',
+ disabled: true
+ }
+ }
+ }
})
API
Досутп к экземпляру плагина осуществляется черезdataатрибут.
var myDatepicker = $('#my-elem').datepicker().data('datepicker');
myDatepicker.show();
-show()
Показывает календарь.
hide()
Скрывает календарь.
next()
Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
prev()
Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.
selectDate(date)
- dateDate|Array- дата в формате JavaScript, или массив дат
Выбирает переданную дату или несколько дат, если передан массив с датами. Если{multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.
removeDate(date)
- dateDate- дата в формате JavaScript
Date()
Снимает выделение с переданной даты.
clear()
Убирает выделение со всех активных дат.
update(field[, value])
- fieldstring|object- название поля значение которого нужно обновить.
- fieldstring|*- новое значение параметра
Обновление опций календаря, после вызова метода он автоматически перерисуется. +
show()
Показывает календарь.
hide()
Скрывает календарь.
destroy()
Удаляет календарь.
next()
Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
prev()
Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.
selectDate(date)
- dateDate|Array- дата в формате JavaScript, или массив дат
Выбирает переданную дату или несколько дат, если передан массив с датами. Если{multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.
removeDate(date)
- dateDate- дата в формате JavaScript
Date()
Снимает выделение с переданной даты.
clear()
Убирает выделение со всех активных дат.
update(field[, value])
- fieldstring|object- название поля значение которого нужно обновить.
- fieldstring|*- новое значение параметра
Обновление опций календаря, после вызова метода он автоматически перерисуется. Можно обновлять сразу несколько параметров, для этого нужно передать объект с требуемыми полями.
var datepicker = $('#my-elem').datepicker().data('datepicker');
@@ -287,12 +324,13 @@ datepicker.update('minDate', new Date())
// Обновление нескольких параметров
datepicker.update({
- position: "top right",
- maxDate: new Date(),
- todayButton: true
+ position: "top right",
+ maxDate: new Date(),
+ todayButton: true
})
view
Устанавливает новое представление для календаря.
datepicker.view = 'months';
-date
Устанавливает новую отображаемую дату, нужно передать JavaScriptDate()
datepicker.date = new Date();
На русском языкеAIR DATEPICKERlightweight cross-browser jQuery datepicker
На русском языкеAIR DATEPICKERlightweight cross-browser jQuery datepicker
Description
Light (~34kb minified js file and ~9kb gziped) customizable cross-browser calendar, built withes5andcss flexbox.Works in all modern browsers:
diff --git a/docs/jade/layout.jade b/docs/jade/layout.jade
index ee0d664..67c9229 100644
--- a/docs/jade/layout.jade
+++ b/docs/jade/layout.jade
@@ -20,6 +20,7 @@ html
script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
script(src='../dist/js/datepicker.js')
script(src='../dist/js/i18n/datepicker.en.js')
+ script(src='js/logger.js')
body
div.wrapper
main.main(role='main')
diff --git a/docs/jade/pages/index-ru.jade b/docs/jade/pages/index-ru.jade
index 49b3bee..ee2ce2a 100644
--- a/docs/jade/pages/index-ru.jade
+++ b/docs/jade/pages/index-ru.jade
@@ -1,980 +1,1081 @@
extends ../layout
block content
- a.lang-link(href='index.html')
- img(src='img/en.png')
- span In English
-
- h1.promo-header
- | AIR DATEPICKER
- span легкий кроссбраузерный jQuery календарь
-
- p.-text-center-
- .datepicker-here.datepicker-promo
- script.
- var $promo = $('.datepicker-promo');
-
- article
- h2#intro Описание
- p
- | Легкий (~34kb минифицированный js файл и ~9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованием
- +example-inline('es5')
- | и
- +example-inline('css flexbox', 'js')
- | . Работает во всех современных браузерах:
- | IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
-
- article
- h2#install Установка
- +example-code('html') bower i --save air-datepicker
- p Либо можно скачать файлы напрямую с GitHub
-
- article
- h2#usage Использование
- p
- | Подключите стили и скрипты из папки
- +example-inline('/dist')
- | :
-
- +example-code('html')
- :code
-
-
…
', 'html')
- | , либо передайте параметр
- +example-inline('{inline: true}', 'js')
- | .
- +example
- +example-content
- div.datepicker-here
- +example-code('html')
- :code
-
-
- h3#example-months Выбор месяца
- +example
- +example-content
- input.datepicker-here(type='text' data-min-view='months' data-view='months' data-date-format='MM yyyy')
- +example-code('html')
- :code
-
-
- h3#example-min-max Минимальная и максимальные даты
- p
- | Чтобы ограничить выбор даты, используйте
- +example-inline('minDate', 'js')
- | и
- +example-inline('maxDate', 'js')
- | , которым нужно передать объект даты.
- +example
- +example-content
- input#minMaxExample(type='text')
- script.
- $('#minMaxExample').datepicker({
- // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня.
- minDate: new Date()
- })
- +example-code('js').
- $('#minMaxExample').datepicker({
- // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня
- minDate: new Date()
- })
-
- h3#example-range Диапозон дат
- p Используйте парамтер
- +example-inline('{range: true}')
- | для выбора диапазона. В качестве разделителя дат будет использован
- +example-inline('multipleDatesSeparator')
-
-
- +example
- +example-content
- input(type='text' data-range='true' data-multiple-dates-separator=' - ').datepicker-here
-
- +example-code('html')
- :code
-
-
- h3#example-disabled-days Неактивные дни недели
- p Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методом
- +example-inline('onRenderCell')
- | .
- +example
- +example-content
- input(type='text' id='disabled-days')
-
- script.
- var disabledDays = [0, 6]; // Сделаем неактивными субботу и воскресенье
-
- $('#disabled-days').datepicker({
- onRenderCell: function (date, cellType) {
- if (cellType == 'day') {
- var day = date.getDay(),
- isDisabled = disabledDays.indexOf(day) != -1;
-
- return {
- disabled: isDisabled
- }
- }
- }
- })
- +example-code('js').
- // Сделаем неактивными воскресенье и субботу
- var disabledDays = [0, 6];
-
- $('#disabled-days').datepicker({
- onRenderCell: function (date, cellType) {
- if (cellType == 'day') {
- var day = date.getDay(),
- isDisabled = disabledDays.indexOf(day) != -1;
-
- return {
- disabled: isDisabled
- }
- }
- }
- })
-
- h3#example-custom-content Кастомное содержимое ячеек
- p Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методом
- +example-inline('onRenderCell')
- | .
- | Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:
-
- +example
- +example-content
- .list-inline
- div
- div#custom-cells
- div#custom-cells-events
- strong
- p
-
- script.
- var eventDates = [1, 10, 12, 22],
- $picker = $('#custom-cells'),
- $content = $('#custom-cells-events'),
- sentences = [
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Si enim ad populum me vocas, eum. Ita prorsus, inquam; Nonne igitur tibi videntur, inquit, mala? Hunc vos beatum; Idemne, quod iucunde? ',
- 'Ratio quidem vestra sic cogit. Illi enim inter se dissentiunt. Tu vero, inquam, ducas licet, si sequetur; Non semper, inquam; ',
- 'Duo Reges: constructio interrete. A mene tu? Ea possunt paria non esse. Est, ut dicis, inquam. Scaevolam M. Quid iudicant sensus? ',
- 'Poterat autem inpune; Qui est in parvis malis. Prave, nequiter, turpiter cenabat; Ita credo. '
- ]
-
- $picker.datepicker({
- onRenderCell: function (date, cellType) {
- var currentDate = date.getDate();
-
- if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
- return {
- html: currentDate + ''
- }
- }
- },
- onSelect: function onSelect(fd, date) {
- var title = '', content = ''
- if (date && eventDates.indexOf(date.getDate()) != -1) {
- title = fd;
- content = sentences[Math.floor(Math.random() * eventDates.length)];
- }
- $('strong', $content).html(title)
- $('p', $content).html(content)
- }
- })
-
- var currentDate = new Date();
- $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
-
- +example-code('js')
- :code
- var eventDates = [1, 10, 12, 22],
- $picker = $('#custom-cells'),
- $content = $('#custom-cells-events'),
- sentences = [ … ];
-
- $picker.datepicker({
- onRenderCell: function (date, cellType) {
- var currentDate = date.getDate();
-
- // Добавляем вспомогательный элемент, если число содержится в `eventDates`
- if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
- return {
- html: currentDate + ''
- }
- }
- },
- onSelect: function onSelect(fd, date) {
- var title = '', content = ''
-
- // Если выбрана дата с событием, то отображаем его
- if (date && eventDates.indexOf(date.getDate()) != -1) {
- title = fd;
- content = sentences[Math.floor(Math.random() * eventDates.length)];
- }
-
- $('strong', $content).html(title)
- $('p', $content).html(content)
- }
- })
-
- // Сразу выберем какую-ниудь дату из `eventDates`
- var currentDate = currentDate = new Date();
- $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
-
- article
- h2#timepicker Выбор времени
- p Для выбора времени используйте опцию
- +example-inline('{timepicker: true}', 'js')
- | - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
- p По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром
- +example-inline('startDate', 'js')
- |.
-
- +example
- +example-content
- div.datepicker-here(data-timepicker='true')
- +example-code
- :code
-
- p
- i Подробнее о параметрах выбора времени можно почитать в Опциях.
-
-
- h3#timepicker-format Формат времени
- p Формат времени задается в объекте локализации, либо в парамтре
- +example-inline('timeFormat', 'js')
- |. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
- +example-inline('timeFormat', 'js')
- | нужно добавить символ
- +example-inline('aa', 'js')
- | или
- +example-inline('AA', 'js')
- | . После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.
-
- +example
- +example-content
- input.datepicker-here(type='text' data-timepicker='true', data-time-format='hh:ii aa')
- +example-code
- :code
-
-
- h3#timeformat-actions Действия со временем
- p Для задания максимально/минимально возможных значений часов или минут используйте параметры
- +example-inline('maxHours','js')
- |,
- +example-inline('minHours','js')
- |,
- +example-inline('maxMinutes','js')
- |,
- +example-inline('minMinutes','js')
- |. Также время можно указывать в парамтерах
- +example-inline('minDate','js')
- | и
- +example-inline('maxDate','js')
- p Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.
-
- +example
- +example-content
- input(type='text')#timepicker-actions-exmpl
- script.
- // Зададим стартовую дату
- var start = new Date(),
- prevDay,
- startHours = 9;
-
- // 09:00
- start.setHours(9);
- start.setMinutes(0);
-
- // Если сегодня суббота или воскресенье - 10:00
- if ([6,0].indexOf(start.getDay()) != -1) {
- start.setHours(10);
- startHours = 10
- }
-
- $('#timepicker-actions-exmpl').datepicker({
- timepicker: true,
- startDate: start,
- minHours: startHours,
- maxHours: 18,
- onSelect: function(fd, d, picker) {
- // Ничего не делаем если выделение было снято
- if (!d) return;
-
- var day = d.getDay();
-
- // Trigger only if date is changed
- if (prevDay != undefined && prevDay == day) return;
- prevDay = day;
-
- // Если выбранный день суббота или воскресенье, то устанавливаем
- // часы для выходных, в противном случае восстанавливаем начальные значения
- if (day == 6 || day == 0) {
- picker.update({
- minHours: 10,
- maxHours: 16
- })
- } else {
- picker.update({
- minHours: 9,
- maxHours: 18
- })
- }
- }
- })
- +example-code
- :code
-
-
-
-
- article
- h2#localization Локализация
- p
- | Вы можете добавить свою локализацию в объект
- +example-inline('$.fn.datepicker.language["my-lang"]', 'js')
- | и при вызове календаря передать название языка в параметр
- +example-inline('language', 'js')
-
- +example-code('js').
- $.fn.datepicker.language['my-lang'] = {...}
-
- $('.my-datepicker').datepicker({
- language: 'my-lang'
- })
-
- p
- | Также объект локализации можно передавать непосредственно в
- +example-inline('language', 'js')
-
- +example-code('js').
- $('.my-datepicker').datepicker({
- language: {
- days: [...]
- ...
- }
- })
-
- p Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).
-
- h3 Пример объекта локализации
- +example-code('js').
- $.fn.datepicker.language['ru'] = {
- days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
- daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
- daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
- months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
- monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
- today: 'Сегодня',
- clear: 'Очистить',
- dateFormat: 'dd.mm.yyyy',
- timeFormat: 'hh:ii',
- firstDay: 1
- };
-
- article
- h2#options Опции
-
- .param
- +param-header('classes', 'string', '""')
- p Дополнительные классы для календаря.
-
- .param
- +param-header('inline', 'boolean', 'false')
- p Если true, то календарь будет виден постоянно.
-
- .param
- +param-header('language', 'string|object', '"ru"')
- p
- | Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте
- +example-inline('Datepicker.language', 'js')
- | Если передан объект, то данные будут браться из него.
- p Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.
-
- .param
- +param-header('startDate', 'Date', 'new Date()')
- p Дата, которая будет отображаться при инициализации календаря.
-
- .param
- +param-header('firstDay', 'number', '""')
- p.
- Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
- По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
-
- .param
- +param-header('weekends', 'array', '[6, 0]')
- p
- | Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс
- +example-inline('.-weekend-','css')
- | . По умолчанию это суббота и воскресенье.
-
- .param
- +param-header('dateFormat', 'string', '""')
- p Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
- ul
- li
- +param('@')
- | - время в миллесекундах
- li
- +param('d')
- | - дата
- li
- +param('dd')
- | - дата с лидирующем нулем
- li
- +param('D')
- | - сокращенное наименование дня
- li
- +param('DD')
- | - полное наименование дня
- li
- +param('m')
- | - номер мясяца
- li
- +param('mm')
- | - номер месяца с лидирующем нулем
- li
- +param('M')
- | - сокращенное наименовение месяца
- li
- +param('MM')
- | - полное наименовение месяца
- li
- +param('yy')
- | - сокращенный номер года
- li
- +param('yyyy')
- | - полный номер года
- li
- +param('yyyy1')
- | - первый год декады, в которую входит текущий год
- li
- +param('yyyy2')
- | - последний год декады, в которую входит текущий год
-
- .param
- +param-header('altField', 'string|jQuery', '""')
- p Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом
- +example-inline('altFieldDateFormat')
- | .
-
- .param
- +param-header('altFieldDateFormat', 'string', '"@"')
- p Формат даты для альтернативного поля.
-
- .param
- +param-header('toggleSelected', 'boolean', 'true')
- p Если true, то клик на выделенной дате снимет выделение.
-
- .param
- +param-header('keyboardNav', 'boolean', 'true')
- p Если true, то по календарю можно будет осуществлять навигацию с помощью клавиатуры.
- p Сочетания клавиш:
- ul
- li
- +param('Ctrl + → | ↑')
- | - переход на месяц вперед
- li
- +param('Ctrl + ← | ↓')
- | - переход на месяц назад
- li
- +param('Shift + → | ↑')
- | - переход на год вперед
- li
- +param('Shift + ← | ↓')
- | - переход на год назад
- li
- +param('Alt + → | ↑')
- | - переход на 10 лет вперед
- li
- +param('Alt + ← | ↓')
- | - переход на 10 лет назад
- li
- +param('Ctrl + Shift + ↑')
- | - переход на следующий вид
- li
- +param('Esc')
- | - закрывает календарь
-
- .param
- +param-header('position', 'string', '"bottom left"')
- p
- | Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
- | воторым - положение на этой оси. Например
- +example-inline('{position: "right top"}', 'js')
- | - утсановит позицию клаендаря справа вверху от текстового поля.
-
- .param
- +param-header('offset','number', 12)
- p Отступ от основной оси позиционирования.
-
- .param
- +param-header('view', 'string', '"days"')
- p Начальный вид календаря. Возможноые значения:
- ul
- li
- +example-inline('days','js')
- | - отображение дней месяца
- li
- +example-inline('months','js')
- | - отображение месяцев одного года
- li
- +example-inline('years','js')
- | - отображение годов одной декады
-
- .param
- +param-header('minView', 'string', '"days"')
- p
- | Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
- | Возможные значения такие же как и у параметра
- +example-inline('view')
- | .
-
- .param
- +param-header('showOtherMonths', 'boolean', 'true')
- p Если true, то будут отображаться дни других месяцев.
-
- .param
- +param-header('selectOtherMonths', 'boolean', 'true')
- p Если true, то можно будет выбрать дни из других месяцев.
-
- .param
- +param-header('moveToOtherMonthsOnSelect', 'boolean', 'true')
- p Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
-
- .param
- +param-header('showOtherYears', 'boolean', 'true')
- p Если true, то при отображении декады, будут показаны годы из других декад.
-
- .param
- +param-header('selectOtherYears', 'boolean', 'true')
- p Если true, то можно будет выбрать года из других декад
-
- .param
- +param-header('moveToOtherYearsOnSelect', 'boolean', 'true')
- p Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
-
- .param
- +param-header('minDate', 'Date', '""')
- p Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
-
- .param
- +param-header('maxDate', 'Date', '""')
- p Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
-
- .param
- +param-header('disableNavWhenOutOfRange', 'boolean', 'true')
- p Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
-
- .param
- +param-header('multipleDates', 'boolean|number', 'false')
- p Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
-
- .param
- +param-header('multipleDatesSeparator', 'string', '","')
- p Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.
- .param
- +param-header('range', 'boolean', 'false')
- p Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован
- +example-inline('multipleDatesSeparator')
- .param
- +param-header('todayButton', 'boolean|Date', 'false')
- p Если true, то будет отображена кнопка "Сегодня". Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.
- +example-code('js').
- // Выбор сегодняшнего дня
- $('.datepicker').datepicker({
- todayButton: new Date()
- })
-
- .param
- +param-header('clearButton', 'boolean', 'false')
- p Если true, то будет отображена кнопка "Очистить".
-
- .param
- +param-header('showEvent','string','"focus"')
- p Тип события, по наступлению которого будет показан календарь.
-
- .param
- +param-header('autoClose', 'boolean', 'false')
- p Если true, то при активации даты, календарь закроется.
-
- .param
- +param-header('prevHtml', 'string', '')
- p Контент кнопки 'предыдущий месяц|год|декада'.
-
- .param
- +param-header('nextHtml', 'string', '')
- p Контент кнопки 'следующий месяц|год|декада'.
-
- .param
- +param-header('navTitles', 'object')
- +example-code('js')
- :code
- navTitles = {
- days: 'MM, yyyy',
- months: 'yyyy',
- years: 'yyyy1 - yyyy2'
- };
- p
- | Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозначения что и в
- +example-inline('dateFormat', 'js')
- | . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
- +example-code('js')
- :code
- $('#my-datepicker').datepicker({
- navTitles: {
- days: 'Выберете дату заезда
MM, yyyy' - } - }) - .param - +param-header('monthsField','string','"monthsShort"') - p Какое поле из объекта локализации использовать в качестве названий месяцев, когда - +example-inline('view = "months"', 'js') - | . - - .param - +param-header('timepicker', 'boolean', 'false', 'opts-timepicker') - p Если - +example-inline('true') - | , то будет добавлена возомжность выбора времени. - - .param - +param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator') - p Разделитель между датой и временем. - - .param - +param-header('timeFormat', 'string', 'null', 'opts-timeFormat') - p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет. - | Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр - +example-inline('timeFormat','js') - |, например - +example-inline('{timeFormat: "hh:ii AA"}','js') - | Возможные варианты: - ul - li - +param('h') - | - часы - li - +param('hh') - | - часы, с лидирующим нулем - li - +param('i') - | - минуты - li - +param('ii') - | - минуты, с лидирующим нулем - li - +param('aa') - | - период дня - 'am' или 'pm' - li - +param('AA') - | - период дня заглавными буквами - - .param - +param-header('minHours', 'number', '0', 'opts-minHours') - p Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение. - - .param - +param-header('maxHours', 'number', '23', 'opts-maxHours') - p Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение. - - .param - +param-header('minMinutes', 'number', '0', 'opts-minMinutes') - p Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение. - - .param - +param-header('maxMinutes', 'number', '59', 'opts-maxMinutes') - p Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение. - - .param - +param-header('hoursStep', 'number', '1', 'opts-hoursStep') - p Шаг выбора часов. - - .param - +param-header('minutesStep', 'number', '1', 'opts-minutesStep') - p Шаг выбора минут. - - - article - h2#events События - .param - +param-header('onSelect(formattedDate, date, inst)', 'function', 'null') - p Функция обратного вызова при выборе даты. - ul - li - +param('formattedDate', 'string') - | - отформатированная дата. - li - +param('date', 'Date|array') - | - объект - +example-inline('Date', 'js') - | выбранной даты, если - +example-inline('{multipleDates: true}', 'js') - | , то будет передан массив таких объектов. - li - +param('inst','object') - | - экземпляр плагина. - - .param - +param-header('onChangeMonth(month, year)','function','null') - p Функция обратного вызова при изменении месяца. - ul - li - +param('month','number') - | - номер месяца (от 0 до 12), к которому осуществлен переход. - li - +param('year','number') - | - номер года, к которому осуществлен переход. - - .param - +param-header('onChangeYear(year)','function', 'null') - p Функция обратного вызова при изменении года. - ul - li - +param('year','number') - | - номер года, к которому осуществлен переход - - .param - +param-header('onChangeDecade(decade)','function', 'null') - p Функция обратного вызова при изменении декады. - ul - li - +param('decade','array') - | - массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается. - - .param - +param-header('onChangeView(view)', 'function', 'null') - p Функция обратного вызова при изменении вида календаря - ul - li - +param('view', 'string') - | - вид, к которому осуществлен переход (days, months, years). - - .param - +param-header('onRenderCell(date, cellType)', 'function', 'null') - p Функция обратного вызова при отрисовке ячейки календаря. - ul - li - +param('date', 'Date') - | - объект даты текущей ячейки - li - +param('cellType', 'string') - | - тип текущей ячейки (day, month, year). - p Функция должна возвращать объект, которой может состоять из трех полей: - +example-code('js'). - { - html: '', // Кастомный контент ячейки - classes: '', // Дополнительные классы для ячейки - disabled: '' // true/false, если true, то ячейку нельзя будет выбрать - } - h4 Пример - +example-code('js'). - $('#my-datepicker').datepicker({ - // Передаем функцию, которая добавляет 11 числу каждого месяца класс 'my-class' - // и делает их невозможными к выбору. - onRenderCell: function(date, cellType) { - if (cellType == 'day' && date.getDate() == 11) { - return { - classes: 'my-class', - disabled: true - } - } - } - }) - - article - h2#api API - p - | Досутп к экземпляру плагина осуществляется через - +example-inline('data') - | атрибут. - +example-code('js'). - var myDatepicker = $('#my-elem').datepicker().data('datepicker'); - - myDatepicker.show(); - - .param - +param-header('show()') - p Показывает календарь. - - .param - +param-header('hide()') - p Скрывает календарь. - - .param - +param-header('next()') - p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years. - - .param - +param-header('prev()') - p Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years. - - .param - +param-header('selectDate(date)') - ul - li - +param('date','Date|Array') - | - дата в формате JavaScript, или массив дат - p - | Выбирает переданную дату или несколько дат, если передан массив с датами. Если - +example-inline('{multipleDates: false}','js') - | и уже есть активная дата, то она будет деактивирована. Если - +example-inline('{multipleDates: true}','js') - | то будет добавлена еще одна активная дата. - - .param - +param-header('removeDate(date)') - ul - li - +param('date','Date') - | - дата в формате JavaScript - +example-inline('Date()', 'js') - p - | Снимает выделение с переданной даты. - - .param - +param-header('clear()') - p Убирает выделение со всех активных дат. - - .param - +param-header('update(field[, value])') - ul - li - +param('field','string|object') - | - название поля значение которого нужно обновить. - li - +param('field','string|*') - | - новое значение параметра - p. - Обновление опций календаря, после вызова метода он автоматически перерисуется. - Можно обновлять сразу несколько параметров, для этого нужно передать объект с требуемыми полями. - - +example-code('js'). - var datepicker = $('#my-elem').datepicker().data('datepicker'); - - // Обновление одного параметра - datepicker.update('minDate', new Date()) - - // Обновление нескольких параметров - datepicker.update({ - position: "top right", - maxDate: new Date(), - todayButton: true - }) - - .param - +param-header('view') - p Устанавливает новое представление для календаря. - +example-code('js'). - datepicker.view = 'months'; - - .param - +param-header('date') - p - | Устанавливает новую отображаемую дату, нужно передать JavaScript - +example-inline('Date()') - - +example-code('js'). - datepicker.date = new Date(); \ No newline at end of file + a.lang-link(href='index.html') + img(src='img/en.png') + span In English + + h1.promo-header + | AIR DATEPICKER + span легкий кроссбраузерный jQuery календарь + + p.-text-center- + .datepicker-here.datepicker-promo + script. + var $promo = $('.datepicker-promo'); + + article + h2#intro Описание + p + | Легкий (~34kb минифицированный js файл и ~9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованием + +example-inline('es5') + | и + +example-inline('css flexbox', 'js') + | . Работает во всех современных браузерах: + | IE 10+, Chrome, Firefox, Safari 8+, Opera 17+. + + article + h2#install Установка + +example-code('html') bower i --save air-datepicker + p Либо можно скачать файлы напрямую с GitHub + + article + h2#usage Использование + p + | Подключите стили и скрипты из папки + +example-inline('/dist') + | : + + +example-code('html') + :code + + + + + + + p + | Календарь автоматически проинициализируется на элементах с классом + +example-inline('.datepicker-here', 'css') + | , при этом опции можно передать через + +example-inline('data', 'html') + | атрибуты. + +example-code('html') + :code + + h3 Ручная инициализация + +example-code('js'). + // Инициализация + $('#my-element').datepicker([options]) + + // Доступ к экземпляру объекта + $('#my-element').data('datepicker') + + article + h2#examples Примеры + h3#example-default Инициализация с опциями по умолчанию + +example + +example-content + input(type='text').datepicker-here + +example-code('html') + :code + + + h3#example-multiple Выбор нескольких дат + p + | Передайте параметр + +example-inline('{multipleDates: true}','js') + | для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число + +example-inline('{multipleDates: 3}','js') + | . + +example + +example-content + input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='top left').datepicker-here + +example-code('html') + :code + + + h3#example-inline Постоянно видимый календарь + p + | Проинициализируйте плагин на элементе, который не является текстовым полем, например на + +example-inline(' …
', 'html')
+ | , либо передайте параметр
+ +example-inline('{inline: true}', 'js')
+ | .
+ +example
+ +example-content
+ div.datepicker-here
+ +example-code('html')
+ :code
+
+
+ h3#example-months Выбор месяца
+ +example
+ +example-content
+ input.datepicker-here(type='text' data-min-view='months' data-view='months' data-date-format='MM yyyy')
+ +example-code('html')
+ :code
+
+
+ h3#example-min-max Минимальная и максимальные даты
+ p
+ | Чтобы ограничить выбор даты, используйте
+ +example-inline('minDate', 'js')
+ | и
+ +example-inline('maxDate', 'js')
+ | , которым нужно передать объект даты.
+ +example
+ +example-content
+ input#minMaxExample(type='text')
+ script.
+ $('#minMaxExample').datepicker({
+ // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня.
+ minDate: new Date()
+ })
+ +example-code('js').
+ $('#minMaxExample').datepicker({
+ // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня
+ minDate: new Date()
+ })
+
+ h3#example-range Диапозон дат
+ p Используйте парамтер
+ +example-inline('{range: true}')
+ | для выбора диапазона. В качестве разделителя дат будет использован
+ +example-inline('multipleDatesSeparator')
+
+ p Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить
+ +example-inline('{toggleSelected: false}')
+ |.
+
+
+ +example
+ +example-content
+ input(type='text' data-range='true' data-multiple-dates-separator=' - ').datepicker-here
+
+ +example-code('html')
+ :code
+
+
+ h3#example-disabled-days Неактивные дни недели
+ p Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методом
+ +example-inline('onRenderCell')
+ | .
+ +example
+ +example-content
+ input(type='text' id='disabled-days')
+
+ script.
+ var disabledDays = [0, 6]; // Сделаем неактивными субботу и воскресенье
+
+ $('#disabled-days').datepicker({
+ onRenderCell: function (date, cellType) {
+ if (cellType == 'day') {
+ var day = date.getDay(),
+ isDisabled = disabledDays.indexOf(day) != -1;
+
+ return {
+ disabled: isDisabled
+ }
+ }
+ }
+ })
+ +example-code('js').
+ // Сделаем неактивными воскресенье и субботу
+ var disabledDays = [0, 6];
+
+ $('#disabled-days').datepicker({
+ onRenderCell: function (date, cellType) {
+ if (cellType == 'day') {
+ var day = date.getDay(),
+ isDisabled = disabledDays.indexOf(day) != -1;
+
+ return {
+ disabled: isDisabled
+ }
+ }
+ }
+ })
+
+ h3#example-custom-content Кастомное содержимое ячеек
+ p Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методом
+ +example-inline('onRenderCell')
+ | .
+ | Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:
+
+ +example
+ +example-content
+ .list-inline
+ div
+ div#custom-cells
+ div#custom-cells-events
+ strong
+ p
+
+ script.
+ var eventDates = [1, 10, 12, 22],
+ $picker = $('#custom-cells'),
+ $content = $('#custom-cells-events'),
+ sentences = [
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Si enim ad populum me vocas, eum. Ita prorsus, inquam; Nonne igitur tibi videntur, inquit, mala? Hunc vos beatum; Idemne, quod iucunde? ',
+ 'Ratio quidem vestra sic cogit. Illi enim inter se dissentiunt. Tu vero, inquam, ducas licet, si sequetur; Non semper, inquam; ',
+ 'Duo Reges: constructio interrete. A mene tu? Ea possunt paria non esse. Est, ut dicis, inquam. Scaevolam M. Quid iudicant sensus? ',
+ 'Poterat autem inpune; Qui est in parvis malis. Prave, nequiter, turpiter cenabat; Ita credo. '
+ ]
+
+ $picker.datepicker({
+ onRenderCell: function (date, cellType) {
+ var currentDate = date.getDate();
+
+ if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+ return {
+ html: currentDate + ''
+ }
+ }
+ },
+ onSelect: function onSelect(fd, date) {
+ var title = '', content = ''
+ if (date && eventDates.indexOf(date.getDate()) != -1) {
+ title = fd;
+ content = sentences[Math.floor(Math.random() * eventDates.length)];
+ }
+ $('strong', $content).html(title)
+ $('p', $content).html(content)
+ }
+ })
+
+ var currentDate = new Date();
+ $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+
+ +example-code('js')
+ :code
+ var eventDates = [1, 10, 12, 22],
+ $picker = $('#custom-cells'),
+ $content = $('#custom-cells-events'),
+ sentences = [ … ];
+
+ $picker.datepicker({
+ onRenderCell: function (date, cellType) {
+ var currentDate = date.getDate();
+
+ // Добавляем вспомогательный элемент, если число содержится в `eventDates`
+ if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+ return {
+ html: currentDate + ''
+ }
+ }
+ },
+ onSelect: function onSelect(fd, date) {
+ var title = '', content = ''
+
+ // Если выбрана дата с событием, то отображаем его
+ if (date && eventDates.indexOf(date.getDate()) != -1) {
+ title = fd;
+ content = sentences[Math.floor(Math.random() * eventDates.length)];
+ }
+
+ $('strong', $content).html(title)
+ $('p', $content).html(content)
+ }
+ })
+
+ // Сразу выберем какую-ниудь дату из `eventDates`
+ var currentDate = currentDate = new Date();
+ $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+
+ h3#example-show-hide Появление и скрытие календаря
+ p Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции
+ +example-inline('onShow')
+ | и
+ +example-inline('onHide')
+
+ +example
+ +example-content
+ .row
+ .col
+ input#example-show-hide-callbacks(type='text')
+ .col
+ div.logger#example-show-hide-log
+ script.
+ ;(function () {
+ var log = logger('#example-show-hide-log', 'Очистить')
+ $('#example-show-hide-callbacks').datepicker({
+ onShow: function (dp, animationCompleted) {
+ if (!animationCompleted) {
+ log('start showing')
+ } else {
+ log('finished showing')
+ }
+ },
+ onHide: function (dp, animationCompleted) {
+ if (!animationCompleted) {
+ log('start hiding')
+ } else {
+ log('finished hiding')
+ }
+ }
+ })
+ })();
+ +example-code
+ :code
+ $('#example-show-hide-callbacks').datepicker({
+ onShow: function(dp, animationCompleted){
+ if (!animationCompleted) {
+ log('start showing')
+ } else {
+ log('finished showing')
+ }
+ },
+ onHide: function(dp, animationCompleted){
+ if (!animationCompleted) {
+ log('start hiding')
+ } else {
+ log('finished hiding')
+ }
+ }
+ })
+
+
+ article
+ h2#timepicker Выбор времени
+ p Для выбора времени используйте опцию
+ +example-inline('{timepicker: true}', 'js')
+ | - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
+ p По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром
+ +example-inline('startDate', 'js')
+ | .
+
+ +example
+ +example-content
+ div.datepicker-here(data-timepicker='true')
+ +example-code
+ :code
+
+ p
+ i Подробнее о параметрах выбора времени можно почитать в Опциях.
+
+
+ h3#timepicker-format Формат времени
+ p Формат времени задается в объекте локализации, либо в парамтре
+ +example-inline('timeFormat', 'js')
+ | . По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
+ +example-inline('timeFormat', 'js')
+ | нужно добавить символ
+ +example-inline('aa', 'js')
+ | или
+ +example-inline('AA', 'js')
+ | . После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.
+
+ +example
+ +example-content
+ input.datepicker-here(type='text' data-timepicker='true', data-time-format='hh:ii aa')
+ +example-code
+ :code
+
+
+ h3#timeformat-actions Действия со временем
+ p Для задания максимально/минимально возможных значений часов или минут используйте параметры
+ +example-inline('maxHours','js')
+ | ,
+ +example-inline('minHours','js')
+ | ,
+ +example-inline('maxMinutes','js')
+ | ,
+ +example-inline('minMinutes','js')
+ | . Также время можно указывать в парамтерах
+ +example-inline('minDate','js')
+ | и
+ +example-inline('maxDate','js')
+ p Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.
+
+ +example
+ +example-content
+ input(type='text')#timepicker-actions-exmpl
+ script.
+ // Зададим стартовую дату
+ var start = new Date(),
+ prevDay,
+ startHours = 9;
+
+ // 09:00
+ start.setHours(9);
+ start.setMinutes(0);
+
+ // Если сегодня суббота или воскресенье - 10:00
+ if ([6, 0].indexOf(start.getDay()) != -1) {
+ start.setHours(10);
+ startHours = 10
+ }
+
+ $('#timepicker-actions-exmpl').datepicker({
+ timepicker: true,
+ startDate: start,
+ minHours: startHours,
+ maxHours: 18,
+ onSelect: function (fd, d, picker) {
+ // Ничего не делаем если выделение было снято
+ if (!d) return;
+
+ var day = d.getDay();
+
+ // Trigger only if date is changed
+ if (prevDay != undefined && prevDay == day) return;
+ prevDay = day;
+
+ // Если выбранный день суббота или воскресенье, то устанавливаем
+ // часы для выходных, в противном случае восстанавливаем начальные значения
+ if (day == 6 || day == 0) {
+ picker.update({
+ minHours: 10,
+ maxHours: 16
+ })
+ } else {
+ picker.update({
+ minHours: 9,
+ maxHours: 18
+ })
+ }
+ }
+ })
+ +example-code
+ :code
+
+
+
+
+ article
+ h2#localization Локализация
+ p
+ | Вы можете добавить свою локализацию в объект
+ +example-inline('$.fn.datepicker.language["my-lang"]', 'js')
+ | и при вызове календаря передать название языка в параметр
+ +example-inline('language', 'js')
+
+ +example-code('js').
+ $.fn.datepicker.language['my-lang'] = {...}
+
+ $('.my-datepicker').datepicker({
+ language: 'my-lang'
+ })
+
+ p
+ | Также объект локализации можно передавать непосредственно в
+ +example-inline('language', 'js')
+
+ +example-code('js').
+ $('.my-datepicker').datepicker({
+ language: {
+ days: [...]
+ ...
+ }
+ })
+
+ p Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).
+
+ h3 Пример объекта локализации
+ +example-code('js').
+ $.fn.datepicker.language['ru'] = {
+ days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
+ daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+ daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+ months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
+ monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+ today: 'Сегодня',
+ clear: 'Очистить',
+ dateFormat: 'dd.mm.yyyy',
+ timeFormat: 'hh:ii',
+ firstDay: 1
+ };
+
+ article
+ h2#options Опции
+
+ .param
+ +param-header('classes', 'string', '""')
+ p Дополнительные классы для календаря.
+
+ .param
+ +param-header('inline', 'boolean', 'false')
+ p Если true, то календарь будет виден постоянно.
+
+ .param
+ +param-header('language', 'string|object', '"ru"')
+ p
+ | Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте
+ +example-inline('Datepicker.language', 'js')
+ | Если передан объект, то данные будут браться из него.
+ p Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.
+
+ .param
+ +param-header('startDate', 'Date', 'new Date()')
+ p Дата, которая будет отображаться при инициализации календаря.
+
+ .param
+ +param-header('firstDay', 'number', '""')
+ p.
+ Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
+ По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
+
+ .param
+ +param-header('weekends', 'array', '[6, 0]')
+ p
+ | Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс
+ +example-inline('.-weekend-','css')
+ | . По умолчанию это суббота и воскресенье.
+
+ .param
+ +param-header('dateFormat', 'string', '""')
+ p Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
+ ul
+ li
+ +param('@')
+ | - время в миллесекундах
+ li
+ +param('d')
+ | - дата
+ li
+ +param('dd')
+ | - дата с лидирующем нулем
+ li
+ +param('D')
+ | - сокращенное наименование дня
+ li
+ +param('DD')
+ | - полное наименование дня
+ li
+ +param('m')
+ | - номер мясяца
+ li
+ +param('mm')
+ | - номер месяца с лидирующем нулем
+ li
+ +param('M')
+ | - сокращенное наименовение месяца
+ li
+ +param('MM')
+ | - полное наименовение месяца
+ li
+ +param('yy')
+ | - сокращенный номер года
+ li
+ +param('yyyy')
+ | - полный номер года
+ li
+ +param('yyyy1')
+ | - первый год декады, в которую входит текущий год
+ li
+ +param('yyyy2')
+ | - последний год декады, в которую входит текущий год
+
+ .param
+ +param-header('altField', 'string|jQuery', '""')
+ p Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом
+ +example-inline('altFieldDateFormat')
+ | .
+
+ .param
+ +param-header('altFieldDateFormat', 'string', '"@"')
+ p Формат даты для альтернативного поля.
+
+ .param
+ +param-header('toggleSelected', 'boolean', 'true')
+ p Если true, то клик на выделенной дате снимет выделение.
+
+ .param
+ +param-header('keyboardNav', 'boolean', 'true')
+ p Если true, то по календарю можно будет осуществлять навигацию с помощью клавиатуры.
+ p Сочетания клавиш:
+ ul
+ li
+ +param('Ctrl + → | ↑')
+ | - переход на месяц вперед
+ li
+ +param('Ctrl + ← | ↓')
+ | - переход на месяц назад
+ li
+ +param('Shift + → | ↑')
+ | - переход на год вперед
+ li
+ +param('Shift + ← | ↓')
+ | - переход на год назад
+ li
+ +param('Alt + → | ↑')
+ | - переход на 10 лет вперед
+ li
+ +param('Alt + ← | ↓')
+ | - переход на 10 лет назад
+ li
+ +param('Ctrl + Shift + ↑')
+ | - переход на следующий вид
+ li
+ +param('Esc')
+ | - закрывает календарь
+
+ .param
+ +param-header('position', 'string', '"bottom left"')
+ p
+ | Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
+ | воторым - положение на этой оси. Например
+ +example-inline('{position: "right top"}', 'js')
+ | - утсановит позицию клаендаря справа вверху от текстового поля.
+
+ .param
+ +param-header('offset','number', 12)
+ p Отступ от основной оси позиционирования.
+
+ .param
+ +param-header('view', 'string', '"days"')
+ p Начальный вид календаря. Возможноые значения:
+ ul
+ li
+ +example-inline('days','js')
+ | - отображение дней месяца
+ li
+ +example-inline('months','js')
+ | - отображение месяцев одного года
+ li
+ +example-inline('years','js')
+ | - отображение годов одной декады
+
+ .param
+ +param-header('minView', 'string', '"days"')
+ p
+ | Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
+ | Возможные значения такие же как и у параметра
+ +example-inline('view')
+ | .
+
+ .param
+ +param-header('showOtherMonths', 'boolean', 'true')
+ p Если true, то будут отображаться дни других месяцев.
+
+ .param
+ +param-header('selectOtherMonths', 'boolean', 'true')
+ p Если true, то можно будет выбрать дни из других месяцев.
+
+ .param
+ +param-header('moveToOtherMonthsOnSelect', 'boolean', 'true')
+ p Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
+
+ .param
+ +param-header('showOtherYears', 'boolean', 'true')
+ p Если true, то при отображении декады, будут показаны годы из других декад.
+
+ .param
+ +param-header('selectOtherYears', 'boolean', 'true')
+ p Если true, то можно будет выбрать года из других декад
+
+ .param
+ +param-header('moveToOtherYearsOnSelect', 'boolean', 'true')
+ p Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
+
+ .param
+ +param-header('minDate', 'Date', '""')
+ p Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
+
+ .param
+ +param-header('maxDate', 'Date', '""')
+ p Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
+
+ .param
+ +param-header('disableNavWhenOutOfRange', 'boolean', 'true')
+ p Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
+
+ .param
+ +param-header('multipleDates', 'boolean|number', 'false')
+ p Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
+
+ .param
+ +param-header('multipleDatesSeparator', 'string', '","')
+ p Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.
+ .param
+ +param-header('range', 'boolean', 'false')
+ p Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован
+ +example-inline('multipleDatesSeparator')
+ .param
+ +param-header('todayButton', 'boolean|Date', 'false')
+ p Если true, то будет отображена кнопка "Сегодня". Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.
+ +example-code('js').
+ // Выбор сегодняшнего дня
+ $('.datepicker').datepicker({
+ todayButton: new Date()
+ })
+
+ .param
+ +param-header('clearButton', 'boolean', 'false')
+ p Если true, то будет отображена кнопка "Очистить".
+
+ .param
+ +param-header('showEvent','string','"focus"')
+ p Тип события, по наступлению которого будет показан календарь.
+
+ .param
+ +param-header('autoClose', 'boolean', 'false')
+ p Если true, то при активации даты, календарь закроется.
+
+ .param
+ +param-header('prevHtml', 'string', '')
+ p Контент кнопки 'предыдущий месяц|год|декада'.
+
+ .param
+ +param-header('nextHtml', 'string', '')
+ p Контент кнопки 'следующий месяц|год|декада'.
+
+ .param
+ +param-header('navTitles', 'object')
+ +example-code('js')
+ :code
+ navTitles = {
+ days: 'MM, yyyy',
+ months: 'yyyy',
+ years: 'yyyy1 - yyyy2'
+ };
+ p
+ | Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозначения что и в
+ +example-inline('dateFormat', 'js')
+ | . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
+ +example-code('js')
+ :code
+ $('#my-datepicker').datepicker({
+ navTitles: {
+ days: 'Выберете дату заезда
MM, yyyy' + } + }) + .param + +param-header('monthsField','string','"monthsShort"') + p Какое поле из объекта локализации использовать в качестве названий месяцев, когда + +example-inline('view = "months"', 'js') + | . + + .param + +param-header('timepicker', 'boolean', 'false', 'opts-timepicker') + p Если + +example-inline('true') + | , то будет добавлена возомжность выбора времени. + + .param + +param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator') + p Разделитель между датой и временем. + + .param + +param-header('timeFormat', 'string', 'null', 'opts-timeFormat') + p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет. + | Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр + +example-inline('timeFormat','js') + | , например + +example-inline('{timeFormat: "hh:ii AA"}','js') + | Возможные варианты: + ul + li + +param('h') + | - часы + li + +param('hh') + | - часы, с лидирующим нулем + li + +param('i') + | - минуты + li + +param('ii') + | - минуты, с лидирующим нулем + li + +param('aa') + | - период дня - 'am' или 'pm' + li + +param('AA') + | - период дня заглавными буквами + + .param + +param-header('minHours', 'number', '0', 'opts-minHours') + p Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение. + + .param + +param-header('maxHours', 'number', '23', 'opts-maxHours') + p Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение. + + .param + +param-header('minMinutes', 'number', '0', 'opts-minMinutes') + p Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение. + + .param + +param-header('maxMinutes', 'number', '59', 'opts-maxMinutes') + p Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение. + + .param + +param-header('hoursStep', 'number', '1', 'opts-hoursStep') + p Шаг выбора часов. + + .param + +param-header('minutesStep', 'number', '1', 'opts-minutesStep') + p Шаг выбора минут. + + + article + h2#events События + .param + +param-header('onSelect(formattedDate, date, inst)', 'function', 'null') + p Функция обратного вызова при выборе даты. + ul + li + +param('formattedDate', 'string') + | - отформатированная дата. + li + +param('date', 'Date|array') + | - объект + +example-inline('Date', 'js') + | выбранной даты, если + +example-inline('{multipleDates: true}', 'js') + | , то будет передан массив таких объектов. + li + +param('inst','object') + | - экземпляр плагина. + + .param + +param-header('onShow(inst, animationCompleted)', 'function', 'null') + p Функция обратного вызова при появлении календаря. + ul + li + +param('inst', 'Object') + | - экземпляр календаря. + li + +param('animationCompleted','boolean') + | - индикатор состояния анимации. + | если + +example-inline('false') + | , то анимация только началась, если + +example-inline('true') + | - уже закончилась. + + .param + +param-header('onHide(inst, animationCompleted)', 'function', 'null') + p Функция обратного вызова при скрытии календаря. + ul + li + +param('inst', 'Object') + | - экземпляр календаря. + li + +param('animationCompleted','boolean') + | - индикатор состояния анимации. + | если + +example-inline('false') + | , то анимация только началась, если + +example-inline('true') + | - уже закончилась. + + .param + +param-header('onChangeMonth(month, year)','function','null') + p Функция обратного вызова при изменении месяца. + ul + li + +param('month','number') + | - номер месяца (от 0 до 12), к которому осуществлен переход. + li + +param('year','number') + | - номер года, к которому осуществлен переход. + + .param + +param-header('onChangeYear(year)','function', 'null') + p Функция обратного вызова при изменении года. + ul + li + +param('year','number') + | - номер года, к которому осуществлен переход + + .param + +param-header('onChangeDecade(decade)','function', 'null') + p Функция обратного вызова при изменении декады. + ul + li + +param('decade','array') + | - массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается. + + .param + +param-header('onChangeView(view)', 'function', 'null') + p Функция обратного вызова при изменении вида календаря + ul + li + +param('view', 'string') + | - вид, к которому осуществлен переход (days, months, years). + + .param + +param-header('onRenderCell(date, cellType)', 'function', 'null') + p Функция обратного вызова при отрисовке ячейки календаря. + ul + li + +param('date', 'Date') + | - объект даты текущей ячейки + li + +param('cellType', 'string') + | - тип текущей ячейки (day, month, year). + p Функция должна возвращать объект, которой может состоять из трех полей: + +example-code('js'). + { + html: '', // Кастомный контент ячейки + classes: '', // Дополнительные классы для ячейки + disabled: '' // true/false, если true, то ячейку нельзя будет выбрать + } + h4 Пример + +example-code('js'). + $('#my-datepicker').datepicker({ + // Передаем функцию, которая добавляет 11 числу каждого месяца класс 'my-class' + // и делает их невозможными к выбору. + onRenderCell: function(date, cellType) { + if (cellType == 'day' && date.getDate() == 11) { + return { + classes: 'my-class', + disabled: true + } + } + } + }) + + article + h2#api API + p + | Досутп к экземпляру плагина осуществляется через + +example-inline('data') + | атрибут. + +example-code('js'). + var myDatepicker = $('#my-elem').datepicker().data('datepicker'); + + myDatepicker.show(); + + .param + +param-header('show()') + p Показывает календарь. + + .param + +param-header('hide()') + p Скрывает календарь. + + .param + +param-header('destroy()') + p Удаляет календарь. + + .param + +param-header('next()') + p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years. + + .param + +param-header('prev()') + p Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years. + + .param + +param-header('selectDate(date)') + ul + li + +param('date','Date|Array') + | - дата в формате JavaScript, или массив дат + p + | Выбирает переданную дату или несколько дат, если передан массив с датами. Если + +example-inline('{multipleDates: false}','js') + | и уже есть активная дата, то она будет деактивирована. Если + +example-inline('{multipleDates: true}','js') + | то будет добавлена еще одна активная дата. + + .param + +param-header('removeDate(date)') + ul + li + +param('date','Date') + | - дата в формате JavaScript + +example-inline('Date()', 'js') + p + | Снимает выделение с переданной даты. + + .param + +param-header('clear()') + p Убирает выделение со всех активных дат. + + .param + +param-header('update(field[, value])') + ul + li + +param('field','string|object') + | - название поля значение которого нужно обновить. + li + +param('field','string|*') + | - новое значение параметра + p. + Обновление опций календаря, после вызова метода он автоматически перерисуется. + Можно обновлять сразу несколько параметров, для этого нужно передать объект с требуемыми полями. + + +example-code('js'). + var datepicker = $('#my-elem').datepicker().data('datepicker'); + + // Обновление одного параметра + datepicker.update('minDate', new Date()) + + // Обновление нескольких параметров + datepicker.update({ + position: "top right", + maxDate: new Date(), + todayButton: true + }) + + .param + +param-header('view') + p Устанавливает новое представление для календаря. + +example-code('js'). + datepicker.view = 'months'; + + .param + +param-header('date') + p + | Устанавливает новую отображаемую дату, нужно передать JavaScript + +example-inline('Date()') + + +example-code('js'). + datepicker.date = new Date(); + + .param + +param-header('$el') + p DOM элемент календаря + + .param + +param-header('selectedDates') + p Массив выбранных дат \ No newline at end of file diff --git a/docs/js/logger.js b/docs/js/logger.js new file mode 100644 index 0000000..15427a1 --- /dev/null +++ b/docs/js/logger.js @@ -0,0 +1,29 @@ +var logger; +(function (window) { + logger = function (el, clearText) { + var $el = $(el); + + addContent($el); + addClearButton(clearText, $el); + + $('.logger--clear', $el).on('click', clear.bind('', $el)); + + return function(text) { + var count = $('p', $el).length, + $content = $('.logger--content', $el); + $content.append('' + count++ + '. ' + text + '
').scrollTop(100000) + } + }; + + function addClearButton (text, el) { + el.append('' + text + '') + } + + function addContent (el) { + el.html('') + } + + function clear (el) { + $('.logger--content', el).html(''); + } +})(window); diff --git a/docs/sass/_docs.scss b/docs/sass/_docs.scss index 1a6f79d..93cd518 100644 --- a/docs/sass/_docs.scss +++ b/docs/sass/_docs.scss @@ -42,6 +42,13 @@ h4 { margin: 24px 0 0; } +.row { + display: flex; + > * { + flex: 1; + } +} + article { h2, h3 { position: relative; @@ -506,4 +513,57 @@ a { span { color: #ddd; } +} + +// Logger +// ------------------------------------------------- + +.logger { + background: rgba(0, 0, 0, .7); + border-radius: 4px; + font-size: 12px; + font-family: Monospace, monospace; + height: 150px; + overflow: auto; + position: relative; +} + +.logger--content { + padding: 4px 8px; + height: 100%; + overflow: auto; + + p { + margin: 0; + color: greenyellow; + } + + span { + color: #ddd; + } +} + +.logger--clear { + color: #333; + border-radius: 4px 4px 0 0; + cursor: pointer; + position: absolute; + height: 32px; + padding: 0 8px; + font-family: 'Tahoma', sans-serif; + font-size: 13px; + display: inline-flex; + justify-content: center; + align-items: center; + background: rgba(255, 255, 255, .5); + right: 24px; + bottom: 0; + + &:hover { + background: rgba(255, 255, 255, .8); + } + + &:active { + background: rgba(255, 255, 255, .3); + } } \ No newline at end of file