Описание
Легкий (~20kb минифицированный js файл и ~5.5kb gziped) кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах:
-IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
AIR DATEPICKERлегкий кроссбраузерный jQuery календарь
In EnglishAIR DATEPICKERлегкий кроссбраузерный jQuery календарь
Установка
bower i --save air-datepickerЛибо можно скачать файлы напрямую с GitHub
Использование
Подключите стили и скрипты из папки/dist:
<html>
+IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.Установка
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>
@@ -85,11 +85,11 @@ $('.my-datepicker').datepicker({
dateFormat: 'dd.mm.yyyy',
firstDay: 1
};
-Опции
inline
Тип:boolean
Значение по умполчанию:false
Если true, то календарь будет виден постоянно.
language
Тип:string|object
Значение по умполчанию:"ru"
Язык календаря. Если передается строка, то поиск языка будет осуществляться в объектеDatepicker.languageЕсли передан объект, то данные будут браться из него.
Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.
startDate
Тип:Date
Значение по умполчанию:new Date()
Какую дату нужно показывать при инициализации календаря.
firstDay
Тип:number
Значение по умполчанию:""
Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
+ Тип Defaults Если true, то календарь будет виден постоянно. Тип Defaults Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию. Тип Defaults Какую дату нужно показывать при инициализации календаря. Тип Defaults Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
- Тип: Значение по умполчанию: Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс Тип: Значение по умполчанию: Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет. Тип: Значение по умполчанию: Если true, то клик на выделенной дате снимет выделение. Тип: Значение по умполчанию: Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
-воторым - положение на этой оси. Например Тип: Значение по умполчанию: Отступ от основной оси позиционирования. Тип: Значение по умполчанию: Начальный вид календаря. Возможноые значения: Тип: Значение по умполчанию: Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
-Возможные значения такие же как и у параметра Тип: Значение по умполчанию: Если true, то будут отображаться дни других месяцев. Тип: Значение по умполчанию: Если true, то можно будет выбрать дни из других месяцев. Тип: Значение по умполчанию: Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу. Тип: Значение по умполчанию: Если true, то при отображении декады, будут показаны годы из других декад. Тип: Значение по умполчанию: Если true, то можно будет выбрать года из других декад Тип: Значение по умполчанию: Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде. Тип: Значение по умполчанию: Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать. Тип: Значение по умполчанию: Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать. Тип: Значение по умполчанию: Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад' Тип: Значение по умполчанию: Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом. Тип: Значение по умполчанию: Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку. Тип: Значение по умполчанию: Если true, то будет отображена кнопка "Сегодня". Тип: Значение по умполчанию: Если true, то будет отображена кнопка "Очистить". Тип: Значение по умполчанию: Тип события, по наступлению которого будет показан календарь. Тип: Значение по умполчанию: Если true, то при активации даты, календарь закроется. Тип: Значение по умполчанию: Контент кнопки 'предыдущий месяц|год|декада'. Тип: Значение по умполчанию: Контент кнопки 'следующий месяц|год|декада'. Тип: Значение по умполчанию: Тип Defaults Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс Тип Defaults Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет. Тип Defaults Если true, то клик на выделенной дате снимет выделение. Тип Defaults Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
+воторым - положение на этой оси. Например Тип Defaults Отступ от основной оси позиционирования. Тип Defaults Начальный вид календаря. Возможноые значения: Тип Defaults Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
+Возможные значения такие же как и у параметра Тип Defaults Если true, то будут отображаться дни других месяцев. Тип Defaults Если true, то можно будет выбрать дни из других месяцев. Тип Defaults Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу. Тип Defaults Если true, то при отображении декады, будут показаны годы из других декад. Тип Defaults Если true, то можно будет выбрать года из других декад Тип Defaults Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде. Тип Defaults Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать. Тип Defaults Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать. Тип Defaults Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад' Тип Defaults Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом. Тип Defaults Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку. Тип Defaults Если true, то будет отображена кнопка "Сегодня". Тип Defaults Если true, то будет отображена кнопка "Очистить". Тип Defaults Тип события, по наступлению которого будет показан календарь. Тип Defaults Если true, то при активации даты, календарь закроется. Тип Defaults Контент кнопки 'предыдущий месяц|год|декада'. Тип Defaults Контент кнопки 'следующий месяц|год|декада'. Тип Defaults Тип: Значение по умполчанию: Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год. Тип: Значение по умполчанию: Функция обратного вызова при выборе даты. Тип: Значение по умполчанию: Функция обратного вызова при изменении месяца. Тип: Значение по умполчанию: Функция обратного вызова при изменении года. Тип: Значение по умполчанию: Функция обратного вызова при изменении декады. Тип: Значение по умполчанию: Функция обратного вызова при изменении вида календаря Тип: Значение по умполчанию: Функция обратного вызова при отрисовке ячейки календаря. Функция должна возвращать объект, которой может состоять из трех полей: Тип Defaults Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год. Тип Defaults Функция обратного вызова при выборе даты. Тип Defaults Функция обратного вызова при изменении месяца. Тип Defaults Функция обратного вызова при изменении года. Тип Defaults Функция обратного вызова при изменении декады. Тип Defaults Функция обратного вызова при изменении вида календаря Тип Defaults Функция обратного вызова при отрисовке ячейки календаря. Функция должна возвращать объект, которой может состоять из трех полей: Досутп к экземпляру плагина осуществляется через Показывает календарь. Скрывает календарь. Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years. Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years. Выбирает переданную дату. Если Снимает выделение с переданной даты. Обновление опций календаря, после вызова метода он автоматически перерисуется.
+ Показывает календарь. Скрывает календарь. Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years. Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years. Выбирает переданную дату. Если Снимает выделение с переданной даты. Убирает выделение со всех активных дат. Обновление опций календаря, после вызова метода он автоматически перерисуется.
Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями.
Легкий (~20kb минифицированный js файл и ~5.5kb gziped) кроссбраузерный календарь, написан с использованием Либо можно скачать файлы напрямую с GitHub Подключите стили и скрипты из папки Light (~20kb minified js file and ~5.5kb gziped) cross-browser calendar, built with Or you can download files directly from GitHub Include styles and scripts from Календарь автоматически проинициализируется на элементах с классом Datepicker will automatically initialize on elements with class Передайте параметр Pass the parameter Проинициализируйте плагин на элементе, который не является текстовым полем, например на Initialize the plugin on non text input element, such as Чтобы ограничить выбор даты, используйте По умолчанию в плагине нет встроенного механизма выбора диапозона дат для нескольких текстовых полей.
-Тем не менее это можно сделть вручную. Вы можете добавить свою локализацию в объект You can add your localization to object Также объект локализации можно передавать непосредственно в You can also pass localization object directly in Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию. Тип: Значение по умполчанию: Если true, то календарь будет виден постоянно. Тип: Значение по умполчанию: Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию. Тип: Значение по умполчанию: Какую дату нужно показывать при инициализации календаря. Тип: Значение по умполчанию: Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
-По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет. Тип: Значение по умполчанию: Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс Тип: Значение по умполчанию: Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет. Тип: Значение по умполчанию: Если true, то клик на выделенной дате снимет выделение. Тип: Значение по умполчанию: Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
-воторым - положение на этой оси. Например Тип: Значение по умполчанию: Отступ от основной оси позиционирования. Тип: Значение по умполчанию: Начальный вид календаря. Возможноые значения: Тип: Значение по умполчанию: Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
-Возможные значения такие же как и у параметра Тип: Значение по умполчанию: Если true, то будут отображаться дни других месяцев. Тип: Значение по умполчанию: Если true, то можно будет выбрать дни из других месяцев. Тип: Значение по умполчанию: Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу. Тип: Значение по умполчанию: Если true, то при отображении декады, будут показаны годы из других декад. Тип: Значение по умполчанию: Если true, то можно будет выбрать года из других декад Тип: Значение по умполчанию: Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде. Тип: Значение по умполчанию: Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать. Тип: Значение по умполчанию: Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать. Тип: Значение по умполчанию: Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад' Тип: Значение по умполчанию: Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом. Тип: Значение по умполчанию: Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку. Тип: Значение по умполчанию: Если true, то будет отображена кнопка "Сегодня". Тип: Значение по умполчанию: Если true, то будет отображена кнопка "Очистить". Тип: Значение по умполчанию: Тип события, по наступлению которого будет показан календарь. Тип: Значение по умполчанию: Если true, то при активации даты, календарь закроется. Тип: Значение по умполчанию: Контент кнопки 'предыдущий месяц|год|декада'. Тип: Значение по умполчанию: Контент кнопки 'следующий месяц|год|декада'. Тип: Значение по умполчанию: If some fields are missing, they will be taken from default localization object ('Russian'). Available localizations located in Type Defaults If true, then datepicker will be always visible. Type Defaults Datepicker's language. If string is passed, then language will be searched in If some fields are missing, they will be taken from default localization object ('Russian'). Type Defaults Which date must be shown at first initialization. Type Defaults Day index from which week will be started. Possible values are from 0 to 6, where 0 - sunday и 6 - saturday.
+By default value is taken from current localization, but if it passed here, then it will have higher priority. Type Defaults Array of day's indexes, which must be considered as holidays. Class Type Defaults Format of date, it's combination of d, m, yyyy, D, M, и т.д. By default value is taken from current localization, but if it passed here, then it will have higher priority. Type Defaults If true, then clicking on selected cell will remove selection. Type Defaults Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis.
+For example Type Defaults Offset from the main positioning axes. Type Defaults Start datepicker view. Possible values are: Type Defaults Minimal datepicker's view, on that view selecting cells will not trigger rendering next view, instead it will activate it.
+Possible values are the same as in Type Defaults If true, then days from other months will be visible. Type Defaults If true, then one can select days form other months. Type Defaults If true, then selecting days from other month, will cause transition to that month. Type Defaults If true, then years from other decades will be visible. Type Defaults If true, then on can select years from other decades Type Defaults If true, then selecting year from other decade, will cause transition to that decade. Type Defaults The minimum date for selection. All dates, running before it can't be activated. Type Defaults The maximum date for selection. All dates which comes after it cannot be selected. Type Defaults If true, then at the date, which would be less than minimum possible or more then maximum possible, navigation buttons ('forward', 'back') will be deactivated. Type Defaults If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it. Type Defaults Dates separator, which will be used when concatenating dates to string. Type Defaults If true, then button "Today" will be visible. Type Defaults If true, then button "Clear" will be visible. Type Defaults Event type, on which datepicker must be shown. Type Defaults If true, when after date selection, datepicker will be closed. Type Defaults Contents of 'next' button. Type Defaults Contents of 'prev' button. Type Defaults Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и в Content of datepicker's title depending on current view, can use same notation as in parameter Тип: Значение по умполчанию: Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год. Тип: Значение по умполчанию: Функция обратного вызова при выборе даты. Тип: Значение по умполчанию: Функция обратного вызова при изменении месяца. Тип: Значение по умполчанию: Функция обратного вызова при изменении года. Тип: Значение по умполчанию: Функция обратного вызова при изменении декады. Тип: Значение по умполчанию: Функция обратного вызова при изменении вида календаря Тип: Значение по умполчанию: Функция обратного вызова при отрисовке ячейки календаря. Функция должна возвращать объект, которой может состоять из трех полей: Type Defaults Which field from localization object must be used as months names, when view is 'months'. Type Defaults Callback when selecting date Type Defaults Callback when months are changed. Type Defaults Callback when year is changed Type Defaults Callback when decade is changed Type Defaults Callback when datepicker's view is changed Type Defaults Callback when datepicker's cell is rendered. The callback must return object which may consists of three fields: Досутп к экземпляру плагина осуществляется через Показывает календарь. Скрывает календарь. Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years. Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years. Выбирает переданную дату. Если Снимает выделение с переданной даты. Обновление опций календаря, после вызова метода он автоматически перерисуется.
-Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями. Plugin instance is accessible through Shows datepicker. Hides datepicker. Renders next month, year or decade, depending on current view. Renders previous month, year or decade, depending on current view. Activates passed date. If Removes selection from passed date. Clears all selected dates. This method updates datepicker's options. After calling this method, datepicker will be redrawn.
+You can update several parameters at one time, just pass on object with necessary fields. Устанавливает новое представление для календаря. Устанавливает новую отображаемую дату, нужно передать JavaScriptОпции
inline
booleanfalselanguage
string|object"ru"Datepicker.languageЕсли передан объект, то данные будут браться из него.startDate
Datenew Date()firstDay
number""weekends
array[6, 0].-weekend-. По умолчанию это суббота и воскресенье.dateFormat
string""toggleSelected
booleantrueposition
string"bottom left"{position: "right top"}- утсановит позицию клаендаря справа вверху от текстового поля.offset
number12view
string"days"days- отображение дней месяцаmonths- отображение месяцев одного годаyears- отображение годов одной декадыminView
string"days"view.showOtherMonths
booleantrueselectOtherMonths
booleantruemoveToOtherMonthsOnSelect
booleantrueshowOtherYears
booleantrueselectOtherYears
booleantruemoveToOtherYearsOnSelect
booleantrueminDate
Date""maxDate
Date""disableNavWhenOutOfRange
booleantruemultipleDates
boolean|numberfalsemultipleDatesSeparator
string","todayButton
booleanfalseclearButton
booleanfalseshowEvent
string"focus"autoClose
booleanfalseprevHtml
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
objectnavTitles = {
+weekends
array[6, 0].-weekend-. По умолчанию это суббота и воскресенье.dateFormat
string""toggleSelected
booleantrueposition
string"bottom left"{position: "right top"}- утсановит позицию клаендаря справа вверху от текстового поля.offset
number12view
string"days"days- отображение дней месяцаmonths- отображение месяцев одного годаyears- отображение годов одной декадыminView
string"days"view.showOtherMonths
booleantrueselectOtherMonths
booleantruemoveToOtherMonthsOnSelect
booleantrueshowOtherYears
booleantrueselectOtherYears
booleantruemoveToOtherYearsOnSelect
booleantrueminDate
Date""maxDate
Date""disableNavWhenOutOfRange
booleantruemultipleDates
boolean|numberfalsemultipleDatesSeparator
string","todayButton
booleanfalseclearButton
booleanfalseshowEvent
string"focus"autoClose
booleanfalseprevHtml
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
objectnavTitles = {
days: 'MM, <i>yyyy</i>',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
@@ -97,15 +97,15 @@ $('.my-datepicker').datepicker({
navTitles: {
days: '<h3>Выберете дату заезда</h3> MM, yyyy'
}
-})monthsField
string"monthsShort"События
onSelect(formattedDate, date, inst)
functionnullDateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов.onChangeMonth(month, year)
functionnullonChangeYear(year)
functionnullonChangeDecade(decade)
functionnullonChangeView(view)
functionnullonRenderCell(date, cellType)
functionnull{
+})monthsField
string"monthsShort"События
onSelect(formattedDate, date, inst)
functionnullDateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов.onChangeMonth(month, year)
functionnullonChangeYear(year)
functionnullonChangeDecade(decade)
functionnullonChangeView(view)
functionnullonRenderCell(date, cellType)
functionnull{
html: '', // Кастомный контент ячейки
classes: '', // Дополнительные классы для ячейки
disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
}Пример
$('#my-datepicker').datepicker({
- // Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class'
+ // Передаем функцию, которая добавляет 11 числу каждого месяца класс 'my-class'
// и делает их невозможными к выбору.
onRenderCell: function(date, cellType) {
- if (cellType == 'day' && date.getDate() == 4) {
+ if (cellType == 'day' && date.getDate() == 11) {
return {
classes: 'my-class',
disabled: true
@@ -116,7 +116,7 @@ $('.my-datepicker').datepicker({
API
dataатрибут.var myDatepicker = $('#my-elem').datepicker().data('datepicker');
myDatepicker.show();
-show()
hide()
next()
prev()
selectDate(date)
Date(){multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.removeDate(date)
Date()update(field[, value])
show()
hide()
next()
prev()
selectDate(date)
Date(){multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.removeDate(date)
Date()clear()
update(field[, value])
var datepicker = $('#my-elem').datepicker().data('datepicker');
diff --git a/docs/index.html b/docs/index.html
index b627f24..6899e22 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,35 +1,41 @@
-AIR DATEPICKERлегкий кроссбраузерный jQuery календарь
Описание
es5иcss flexbox. Работает во всех современных браузерах:
-IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.Установка
bower i --save air-datepickerИспользование
/dist:<html>
+
На русском языкеAIR DATEPICKERlightweight cross-browser jQuery datepicker
Description
es5andcss flexbox.Works in all modern browsers:
+IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.Installation
bower i --save air-datepickerUsage
/distdirectory:<html>
<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" />Ручная инициализация
// Инициализация
+</html>.datepicker-here, options may be sent viadataattributes.<input type='text' class="datepicker-here" data-position="right top" />Manual initialization
// Initialization
$('#my-element').datepicker([options])
-// Доступ к экземпляру объекта
-$('#my-element').data('datepicker')Примеры
Инициализация с опциями по умолчанию
Пример<input type='text' class='datepicker-here' />Выбор нескольких дат
{multipleDates: true}для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число{multipleDates: 3}.Пример<input type="text"
+// Access to an instance of an object
+$('#my-element').data('datepicker')Examples
Initialization with default options
Example<input type='text' class='datepicker-here', data-language='en' />Selecting multiple dates
{multipleDates: true}for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number{multipleDates: 3}.Example<input type="text"
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"
+ data-position='right top'/>Permanently visible calendar
<div> … </div>,or pass the parameter{inline: true}.Example<div class="datepicker-here" data-language='en'></div>Month selection
Example<input type="text"
class="datepicker-here"
+ data-language='en'
data-min-view="months"
data-view="months"
- data-date-format="MM yyyy" />Минимальная и максимальные даты
minDateиmaxDate, которым нужно передать объект даты.Пример$('#minMaxExample').datepicker({
- minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
-})Диапозон дат
Пример–var $start = $('#start'),
$end = $('#end');
$start.datepicker({
+ language: 'en',
onSelect: function (fd, date) {
$end.data('datepicker')
.update('minDate', date)
}
})
$end.datepicker({
+ language: 'en',
onSelect: function (fd, date) {
$start.data('datepicker')
.update('maxDate', date)
}
- })Локализация
Datepicker.language["my-lang"]и при вызове календаря передать название языка в параметрlanguageDatepicker.language['my-lang'] = {...}
+ })Localization
Datepicker.language["my-lang"]and pass it name to parameterlanguage// Add custom localization
+Datepicker.language['my-lang'] = {...}
+
+// Initialize datepicker with it
$('.my-datepicker').datepicker({
language: 'my-lang'
-})language$('.my-datepicker').datepicker({
+})language$('.my-datepicker').datepicker({
language: {
days: [...]
...
}
-})Пример объекта локализации
Datepicker.language['ru'] = {
- days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
- daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
- daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
- months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
- monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
- today: 'Сегодня',
- clear: 'Очистить',
- dateFormat: 'dd.mm.yyyy',
- firstDay: 1
-};Опции
inline
booleanfalselanguage
string|object"ru"Datepicker.languageЕсли передан объект, то данные будут браться из него.startDate
Datenew Date()firstDay
number""weekends
array[6, 0].-weekend-. По умолчанию это суббота и воскресенье.dateFormat
string""toggleSelected
booleantrueposition
string"bottom left"{position: "right top"}- утсановит позицию клаендаря справа вверху от текстового поля.offset
number12view
string"days"days- отображение дней месяцаmonths- отображение месяцев одного годаyears- отображение годов одной декадыminView
string"days"view.showOtherMonths
booleantrueselectOtherMonths
booleantruemoveToOtherMonthsOnSelect
booleantrueshowOtherYears
booleantrueselectOtherYears
booleantruemoveToOtherYearsOnSelect
booleantrueminDate
Date""maxDate
Date""disableNavWhenOutOfRange
booleantruemultipleDates
boolean|numberfalsemultipleDatesSeparator
string","todayButton
booleanfalseclearButton
booleanfalseshowEvent
string"focus"autoClose
booleanfalseprevHtml
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
objectnavTitles = {
+})Example of localization object
Datepicker.language['en'] = {
+ days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+ daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+ daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+ months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
+ monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+ today: 'Today',
+ clear: 'Clear',
+ dateFormat: 'mm/dd/yy',
+ firstDay: 0
+};dist/js/i18ndirectory.Options
inline
booleanfalselanguage
string|object"ru"Datepicker.languageobject.
+If object is passed, then data will be taken from this object directly.startDate
Datenew Date()firstDay
number""weekends
array[6, 0].-weekend-will be added to relevant cells.
+. By default its saturday and sunday.dateFormat
string""toggleSelected
booleantrueposition
string"bottom left"{position: "right top"}- will set datepicker's position from right side on top of text input.offset
number12view
string"days"days- display days of one monthmonths- display months of one yearyears- display years of one decademinView
string"days"view.showOtherMonths
booleantrueselectOtherMonths
booleantruemoveToOtherMonthsOnSelect
booleantrueshowOtherYears
booleantrueselectOtherYears
booleantruemoveToOtherYearsOnSelect
booleantrueminDate
Date""maxDate
Date""disableNavWhenOutOfRange
booleantruemultipleDates
boolean|numberfalsemultipleDatesSeparator
string","todayButton
booleanfalseclearButton
booleanfalseshowEvent
string"focus"autoClose
booleanfalseprevHtml
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
objectnavTitles = {
days: 'MM, <i>yyyy</i>',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
- };dateFormat. Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.$('#my-datepicker').datepicker({
+ };dateFormat. Missing fields will be taken from default values. Html tags are also possible.$('#my-datepicker').datepicker({
navTitles: {
- days: '<h3>Выберете дату заезда</h3> MM, yyyy'
+ days: '<h3>Check in date:</h3> MM, yyyy'
}
- })monthsField
string"monthsShort"События
onSelect(formattedDate, date, inst)
functionnullDateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов.onChangeMonth(month, year)
functionnullonChangeYear(year)
functionnullonChangeDecade(decade)
functionnullonChangeView(view)
functionnullonRenderCell(date, cellType)
functionnull{
- html: '', // Кастомный контент ячейки
- classes: '', // Дополнительные классы для ячейки
- disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
-}Пример
$('#my-datepicker').datepicker({
- // Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class'
- // и делает их невозможными к выбору.
+ })monthsField
string"monthsShort"Events
onSelect(formattedDate, date, inst)
functionnull{multipleDates: true}, then it will be an array of js dates.onChangeMonth(month, year)
functionnullonChangeYear(year)
functionnullonChangeDecade(decade)
functionnullonChangeView(view)
functionnullonRenderCell(date, cellType)
functionnull{
+ html: '', // Custom cell content
+ classes: '', // Extra css classes to cell
+ disabled: '' // true/false, if true, when cell will be disabled
+}Example
$('#my-datepicker').datepicker({
+ // Let's make a function which will add class 'my-class' to every 11 of the month
+ // and make these cells disabled.
onRenderCell: function(date, cellType) {
- if (cellType == 'day' && date.getDate() == 4) {
+ 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()
prev()
selectDate(date)
Date(){multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.removeDate(date)
Date()update(field[, value])
var datepicker = $('#my-elem').datepicker().data('datepicker');
-// Обновление одного параметра
+})API
dataattribute.var myDatepicker = $('#my-elem').datepicker().data('datepicker');
+myDatepicker.show();show()
hide()
next()
prev()
selectDate(date)
Date(){multipleDates: false}and date is already active, then it will be deactivated. If{multipleDates: true}then another active date will be added.removeDate(date)
Date()clear()
update(field[, value])
var datepicker = $('#my-elem').datepicker().data('datepicker');
+// Single parameter update
datepicker.update('minDate', new Date())
-// Обновление нескольких параметров
+// Multiple parameters
datepicker.update({
position: "top right",
maxDate: new Date(),
todayButton: true
-})view
datepicker.view = 'months';date
Date()datepicker.date = new Date();