Описание
Легкий (~20kb минифицированный js файл и ~5.5kb gziped) кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах:
+
Описание
Легкий (~26kb минифицированный js файл и ~7kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах:
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">
@@ -150,7 +150,7 @@ $('.my-datepicker').datepicker({
};
Опции
classes
Типstring
Значение по умолчанию""
Дополнительные классы для календаря.
inline
Типboolean
Значение по умолчаниюfalse
Если true, то календарь будет виден постоянно.
language
Типstring|object
Значение по умолчанию"ru"
Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте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"
Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования, +
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
Значение по умолчаниюfalse
Если true, то будет отображена кнопка "Сегодня".
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>',
diff --git a/docs/index.html b/docs/index.html
index 2e3a233..332ecf7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,7 +1,7 @@
Air Datepicker 
На русском языкеAIR DATEPICKERlightweight cross-browser jQuery datepicker
Description
Light (~20kb minified js file and ~5.5kb gziped) cross-browser calendar, built withes5andcss flexbox.Works in all modern browsers:
+})
Description
Light (~26kb minified js file and ~7kb gziped) customizable cross-browser calendar, built withes5andcss flexbox.Works in all modern browsers:
IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
Installation
bower i --save air-datepicker
Or you can download files directly from GitHub
Usage
Include styles and scripts from/distdirectory:
<html>
<head>
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
@@ -152,7 +152,7 @@ $('.my-datepicker').datepicker({
};
Available localizations located indist/js/i18ndirectory.
Options
classes
Typestring
Defaults""
Extra css classes for datepicker.
inline
Typeboolean
Defaultsfalse
If true, then datepicker will be always visible.
language
Typestring|object
Defaults"ru"
Datepicker's language. If string is passed, then language will be searched inDatepicker.languageobject.
If object is passed, then data will be taken from this object directly.
If some fields are missing, they will be taken from default localization object ('Russian').
startDate
TypeDate
Defaultsnew Date()
This date will be shown at first initialization.
firstDay
Typenumber
Defaults""
Day index from which week will be started. Possible values are from 0 to 6, where 0 - Sunday and 6 - Saturday.
By default value is taken from current localization, but if it passed here then it will have higher priority.
weekends
Typearray
Defaults[6, 0]
Array of day's indexes which will be considered as weekends. Class.-weekend-will be added to relevant cells.
-. By default its Saturday and Sunday.
dateFormat
Typestring
Defaults""
Desirable date format. It's combination of d, m, yyyy, D, M, etc. By default value is taken from current localization, but if it passed here, then it will have higher priority.
- @- time in milliseconds
- d- date number
- dd- date with leading zero
- D- short day name
- DD- full day name
- m- month number
- mm- month number with leading zero
- M- short month name
- MM- full month name
- yy- two digit year number
- yyyy- four digit year number
- yyyy1- first year of decade, which included current year
- yyyy2- last year of decade, which included current year
altField
Typestring|jQuery
Defaults""
Alternative text input. UsealtFieldDateFormatfor date formatting.
altFieldDateFormat
Typestring
Defaults"@"
Date format for alternative field.
toggleSelected
Typeboolean
Defaultstrue
If true, then clicking on selected cell will remove selection.
keyboardNav
Typeboolean
Defaultstrue
If true, then one can navigate through calendar by keyboard.
Hot keys:
- Ctrl + → | ↑- move one month forwards
- Ctrl + ← | ↓- move one month backwards
- Shift + → | ↑- move one year forwards
- Shift + ← | ↓- move one year backwards
- Alt + → | ↑- move 10 years forwards
- Alt + ← | ↓- move 10 years backwards
- Ctrl + Shift + ↑ | ↓- move to next view
- Esc- hides datepicker
position
Typestring
Defaults"bottom left"
Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis.
+. By default its Saturday and Sunday.
dateFormat
Typestring
Defaults""
Desirable date format. It's combination of d, m, yyyy, D, M, etc. By default value is taken from current localization, but if it passed here, then it will have higher priority.
- @- time in milliseconds
- d- date number
- dd- date with leading zero
- D- short day name
- DD- full day name
- m- month number
- mm- month number with leading zero
- M- short month name
- MM- full month name
- yy- two digit year number
- yyyy- four digit year number
- yyyy1- first year of decade, which included current year
- yyyy2- last year of decade, which included current year
altField
Typestring|jQuery
Defaults""
Alternative text input. UsealtFieldDateFormatfor date formatting.
altFieldDateFormat
Typestring
Defaults"@"
Date format for alternative field.
toggleSelected
Typeboolean
Defaultstrue
If true, then clicking on selected cell will remove selection.
keyboardNav
Typeboolean
Defaultstrue
If true, then one can navigate through calendar by keyboard.
Hot keys:
- Ctrl + → | ↑- move one month forwards
- Ctrl + ← | ↓- move one month backwards
- Shift + → | ↑- move one year forwards
- Shift + ← | ↓- move one year backwards
- Alt + → | ↑- move 10 years forwards
- Alt + ← | ↓- move 10 years backwards
- Ctrl + Shift + ↑- move to next view
- Esc- hides datepicker
position
Typestring
Defaults"bottom left"
Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis.
For example{position: "right top"}- will set datepicker's position from right side on top of text input.
offset
Typenumber
Defaults12
Offset from the main positioning axes.
view
Typestring
Defaults"days"
Start datepicker view. Possible values are:
days- display days of one monthmonths- display months of one yearyears- display years of one decade
minView
Typestring
Defaults"days"
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 inview.
showOtherMonths
Typeboolean
Defaultstrue
If true, then days from other months will be visible.
selectOtherMonths
Typeboolean
Defaultstrue
If true, then one can select days form other months.
moveToOtherMonthsOnSelect
Typeboolean
Defaultstrue
If true, then selecting days from other month, will cause transition to that month.
showOtherYears
Typeboolean
Defaultstrue
If true, then years from other decades will be visible.
selectOtherYears
Typeboolean
Defaultstrue
If true, then on can select years from other decades
moveToOtherYearsOnSelect
Typeboolean
Defaultstrue
If true, then selecting year from other decade, will cause transition to that decade.
minDate
TypeDate
Defaults""
The minimum date for selection. All dates, running before it can't be activated.
maxDate
TypeDate
Defaults""
The maximum date for selection. All dates which comes after it cannot be selected.
disableNavWhenOutOfRange
Typeboolean
Defaultstrue
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.
multipleDates
Typeboolean|number
Defaultsfalse
If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it.
multipleDatesSeparator
Typestring
Defaults","
Dates separator, which will be used when concatenating dates to string.
range
Typeboolean
Defaultsfalse
For selecting dates range, turn this option to true.multipleDatesSeparatorwill be used as dates separator.
todayButton
Typeboolean
Defaultsfalse
If true, then button "Today" will be visible.
clearButton
Typeboolean
Defaultsfalse
If true, then button "Clear" will be visible.
showEvent
Typestring
Defaults"focus"
Event type, on which datepicker should be shown.
autoClose
Typeboolean
Defaultsfalse
If true, then after date selection, datepicker will be closed.
prevHtml
Typestring
Defaults<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>
Contents of 'next' button.
nextHtml
Typestring
Defaults<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>
Contents of 'prev' button.
navTitles
Typeobject
Defaults
navTitles = {
days: 'MM, <i>yyyy</i>',
diff --git a/docs/jade/pages/index-ru.jade b/docs/jade/pages/index-ru.jade
index f231cc9..0eecbb8 100644
--- a/docs/jade/pages/index-ru.jade
+++ b/docs/jade/pages/index-ru.jade
@@ -17,7 +17,7 @@ block content
article
h2#intro Описание
p
- | Легкий (~20kb минифицированный js файл и ~5.5kb gziped) кроссбраузерный календарь, написан с использованием
+ | Легкий (~26kb минифицированный js файл и ~7kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованием
+example-inline('es5')
| и
+example-inline('css flexbox', 'js')
@@ -439,7 +439,7 @@ block content
+param('Alt + ← | ↓')
| - переход на 10 лет назад
li
- +param('Ctrl + Shift + ↑ | ↓')
+ +param('Ctrl + Shift + ↑')
| - переход на следующий вид
li
+param('Esc')
diff --git a/docs/jade/pages/index.jade b/docs/jade/pages/index.jade
index 359e3c8..7e69f63 100644
--- a/docs/jade/pages/index.jade
+++ b/docs/jade/pages/index.jade
@@ -17,7 +17,7 @@ block content
article
h2#intro Description
p
- | Light (~20kb minified js file and ~5.5kb gziped) cross-browser calendar, built with
+ | Light (~26kb minified js file and ~7kb gziped) customizable cross-browser calendar, built with
+example-inline('es5')
| and
+example-inline('css flexbox', 'js')
@@ -424,7 +424,7 @@ block content
+param('Alt + ← | ↓')
| - move 10 years backwards
li
- +param('Ctrl + Shift + ↑ | ↓')
+ +param('Ctrl + Shift + ↑')
| - move to next view
li
+param('Esc')