Установка
bower i --save air-datepicker
Либо можно скачать файлы напрямую с GitHub
Использование
Календарь автоматически проинициализируется на элементах с классом.datepicker-here, при этом опции можно передать черезdataатрибуты.
<input type='text' class="datepicker-here" data-position="right top" />
Ручная инициализация
// Инициализация
+Air DatepickerУстановка
bower i --save air-datepicker
Либо можно скачать файлы напрямую с GitHub
Использование
Календарь автоматически проинициализируется на элементах с классом.datepicker-here, при этом опции можно передать черезdataатрибуты.
<input type='text' class="datepicker-here" data-position="right top" />
Ручная инициализация
// Инициализация
$('#my-element').datepicker([options])
// Доступ к экземпляру объекта
@@ -76,7 +76,33 @@ $('.my-datepicker').datepicker({
};
Опции
Если true, то календарь будет виден постоянно.
Язык календаря. Если передается строка, то поиск языка будет осуществляться в объектеDatepicker.languageЕсли передан объект, то данные будут браться из него.
Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.
Какую дату нужно показывать при инициализации календаря.
Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
-
Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс.-weekend-. По умолчанию это суббота и воскресенье.
Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
- d- дата
- dd- дата с лидирующем нулем
- D- сокращенное наименование дня
- DD- полное наименование дня
- m- номер мясяца
- mm- номер месяца с лидирующем нулем
- M- сокращенное наименовение месяца
- MM- полное наименовение месяца
- yy- сокращенный номер года
- yyyy- полный номер года
- yyyy1- первый год декады, в которую входит текущий год
- yyyy2- последний год декады, в которую входит текущий год
Если true, то клик на выделенной дате снимет выделение.
Выберете дату заезда
MM, yyyy'
+ }
+ })
+
+ h2 События
+ .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({
+ // Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class'
+ // и делает их невозможными к выбору.
+ onRenderCell: function(date, cellType) {
+ if (cellType == 'day' && date.getDate() == 4) {
+ return {
+ classes: 'my-class',
+ disabled: true
+ }
+ }
+ }
+ })
diff --git a/page/sass/_page.scss b/page/sass/_page.scss
index 3cf11e4..2e4ccb0 100644
--- a/page/sass/_page.scss
+++ b/page/sass/_page.scss
@@ -15,7 +15,7 @@ p {
margin-bottom: 14px;
}
-h1, h2, h3 {
+h1, h2, h3, h4 {
font-family: 'Fira Sans', sans-serif;
line-height: 1;
}
@@ -32,6 +32,13 @@ h3 {
margin: 24px 0 8px;
}
+h4 {
+ font-weight: normal;
+ color: #939393;
+ font-size: 16px;
+ margin: 24px 0 0;
+}
+
.container {
width: 960px;
@@ -160,7 +167,8 @@ a {
// -------------------------------------------------
-.param {
+.param-inline {
+ font-family: Consolas, monospace;
strong {
background: #efefef;
color: #333;
diff --git a/src/js/datepicker.js b/src/js/datepicker.js
index f26e0ea..86ad77b 100644
--- a/src/js/datepicker.js
+++ b/src/js/datepicker.js
@@ -48,8 +48,8 @@ var Datepicker;
autoClose: false,
// navigation
- prevHtml: '«',
- nextHtml: '»',
+ prevHtml: '',
+ nextHtml: '',
navTitles: {
days: 'MM, yyyy',
months: 'yyyy',
@@ -219,11 +219,11 @@ var Datepicker;
switch (this.view) {
case 'days':
this.date = new Date(d.year, d.month + 1, 1);
- if (o.onChangeMonth) o.onChangeMonth(d.month + 1);
+ if (o.onChangeMonth) o.onChangeMonth(this.parsedDate.month, this.parsedDate.year);
break;
case 'months':
this.date = new Date(d.year + 1, d.month, 1);
- if (o.onChangeYear) o.onChangeYear(d.year + 1);
+ if (o.onChangeYear) o.onChangeYear(this.parsedDate.year);
break;
case 'years':
this.date = new Date(d.year + 10, 0, 1);
@@ -238,11 +238,11 @@ var Datepicker;
switch (this.view) {
case 'days':
this.date = new Date(d.year, d.month - 1, 1);
- if (o.onChangeMonth) o.onChangeMonth(d.month - 1);
+ if (o.onChangeMonth) o.onChangeMonth(this.parsedDate.month, this.parsedDate.year);
break;
case 'months':
this.date = new Date(d.year - 1, d.month, 1);
- if (o.onChangeYear) o.onChangeYear(d.year - 1);
+ if (o.onChangeYear) o.onChangeYear(this.parsedDate.year);
break;
case 'years':
this.date = new Date(d.year - 10, 0, 1);
diff --git a/src/js/navigation.js b/src/js/navigation.js
index 07cf05e..0e45ba5 100644
--- a/src/js/navigation.js
+++ b/src/js/navigation.js
@@ -120,7 +120,7 @@
},
_onClickNavButton: function (e) {
- var $el = $(e.target),
+ var $el = $(e.target).closest('[data-action]'),
action = $el.data('action');
this.d[action]();
diff --git a/src/sass/navigation.scss b/src/sass/navigation.scss
index 49f3cd6..aac68a2 100644
--- a/src/sass/navigation.scss
+++ b/src/sass/navigation.scss
@@ -22,6 +22,7 @@
.datepicker--nav-action {
width: $dayCellSize;
border-radius: $datepickerBorderRadius;
+ user-select: none;
&:hover {
background: $colorCellHover;
@@ -30,6 +31,17 @@
&.-disabled- {
visibility: hidden;
}
+
+ svg {
+ width: 32px;
+ height: 32px;
+ }
+
+ path {
+ fill: none;
+ stroke: #bdbdbd;
+ stroke-width: 2px;
+ }
}
.datepicker--nav-title {