AIR DATEPICKERлегкий кроссбраузерный jQuery календарь
Описание
Легкий (~36kb минифицированный js файл и
~9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с
использованиемes5иcss flexbox. Работает во всех современных браузерах:
IE 10+, Chrome, Firefox, Safari
8+, Opera 17+.
// Инициализация
$('#my-element').datepicker([options])
// Доступ к экземпляру объекта
$('#my-element').data('datepicker')
Примеры
Инициализация с опциями по
умолчанию
Пример
<input type='text' class='datepicker-here' />
Выбор нескольких дат
Передайте параметр{multipleDates: true}для выбора
нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое
число{multipleDates: 3}.
Для того, чтобы сделать невозмножным
выбрать конкретные дни недели, можно воспользоваться методомonRenderCell.
Пример
// Сделаем неактивными воскресенье и субботу
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
}
}
}
})
Кастомное содержимое ячеек
Air Datepicker позволяет
менять содержимое ячеек как угодно. Для этого можно также воспользоваться методомonRenderCell.
Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при
выборе этих дат:
Пример
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 + '<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)];
}
$('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
Подробнее о параметрах выбора времени можно почитать в Опциях.
Формат времени
Формат времени задается в объекте
локализации, либо в парамтреtimeFormat.
По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата вtimeFormatнужно добавить
символaaилиAA. После чего в виджете
появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.
Для задания максимально/минимально
возможных значений часов или минут используйте параметры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;
// 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();
// Обновляем состояние календаря только если была изменена дата
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
})
}
}
})
</script>
Локализация
Вы можете добавить свою локализацию в объект$.fn.datepicker.language["my-lang"]и
при вызове календаря передать название языка в параметрlanguage
Язык календаря. Если передается строка, то поиск языка будет осуществляться в
объектеDatepicker.languageЕсли
передан объект, то данные будут браться из него.
Если в объекте локализации не
будет хватать каких то полей, то они будут взяты из языка по умолчанию.
startDate
ТипDate
Значение по умолчаниюnew Date()
Дата, которая будет отображаться при инициализации календаря.
firstDay
Типnumber
Значение по умолчанию""
Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 -
воскресенье и 6 - суббота.
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь
больший приоритет.
weekends
Типarray
Значение по умолчанию[6, 0]
Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен
класс.-weekend-. По
умолчанию это суббота и воскресенье.
dateFormat
Типstring
Значение по умолчанию""
Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из
локализации, если передать значение сюда, то оно будет иметь больший приоритет.
@- время в миллесекундах
d- дата
dd- дата с лидирующем нулем
D- сокращенное наименование дня
DD- полное наименование дня
m- номер мясяца
mm- номер месяца с лидирующем
нулем
M- сокращенное наименовение
месяца
MM- полное наименовение месяца
yy- сокращенный номер года
yyyy- полный номер года
yyyy1- первый год декады, в
которую входит текущий год
yyyy2- последний год декады, в
которую входит текущий год
altField
Типstring|jQuery
Значение по умолчанию""
Альтернативное поле воода в значение которого будут попадать выбранные даты с
форматомaltFieldDateFormat.
altFieldDateFormat
Типstring
Значение по умолчанию"@"
Формат даты для альтернативного поля.
toggleSelected
Типboolean
Значение по умолчаниюtrue
Если true, то клик на выделенной дате снимет выделение.
keyboardNav
Типboolean
Значение по умолчаниюtrue
Если true, то по календарю можно будет осуществлять навигацию с помощью клавиатуры.
Сочетания клавиш:
Ctrl + → | ↑- переход
на месяц вперед
Ctrl + ← | ↓- переход
на месяц назад
Shift + → | ↑- переход
на год вперед
Shift + ← | ↓- переход
на год назад
Alt + → | ↑- переход на
10 лет вперед
Alt + ← | ↓- переход на
10 лет назад
Ctrl + Shift + ↑- переход на
следующий вид
Esc- закрывает календарь
position
Типstring
Значение по умолчанию"bottom left"
Позиционирование календаря отностиельно текстового поля. Первым значением задается
основная ось позиционирования,
воторым - положение на этой оси. Например{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()
})
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>
Значение заголовка календаря в зависимости от текущего вида, можно использовать те же
обозначения что и вdateFormat. Недостающие поля будут взяты из значения по
умолчанию. Также можно использовать html теги.
Какое поле из объекта локализации использовать в качестве названий месяцев, когда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- экземпляр
плагина.
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
}
}
}
})
API
Досутп к экземпляру плагина осуществляется черезdataатрибут.
var myDatepicker = $('#my-elem').datepicker().data('datepicker');
myDatepicker.show();
show()
Показывает календарь.
hide()
Скрывает календарь.
destroy()
Удаляет календарь.
next()
Переходит на следующий месяц если вид days, на следующий год если months, и следующую
декаду если years.
prev()
Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую
декаду если years.
selectDate(date)
dateDate|Array- дата в
формате JavaScript, или массив дат
Выбирает переданную дату или несколько дат, если передан массив с датами. Если{multipleDates: false}и уже
есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна
активная дата.
removeDate(date)
dateDate- дата в формате
JavaScriptDate()
Снимает выделение с переданной даты.
clear()
Убирает выделение со всех активных дат.
update(field[, value])
fieldstring|object-
название поля значение которого нужно обновить.
fieldstring|*- новое
значение параметра
Обновление опций календаря, после вызова метода он автоматически перерисуется.
Можно обновлять сразу несколько параметров, для этого нужно передать объект с требуемыми
полями.
var datepicker = $('#my-elem').datepicker().data('datepicker');
// Обновление одного параметра
datepicker.update('minDate', new Date())
// Обновление нескольких параметров
datepicker.update({
position: "top right",
maxDate: new Date(),
todayButton: true
})
view
Устанавливает новое представление для календаря.
datepicker.view = 'months';
date
Устанавливает новую отображаемую дату, нужно передать JavaScriptDate()