AIR DATEPICKERлегкий соврменный jQuery календарь
Установка
bower i --save air-datepickerЛибо можно скачать файлы напрямую с GitHub
Использование
Календарь автоматически проинициализируется на элементах с классом.datepicker-here, при этом опции можно передать черезdataатрибуты.
<input type='text' class="datepicker-here" data-position="right top" />Ручная инициализация
// Инициализация
+Air Datepicker AIR DATEPICKERлегкий современный jQuery календарь
Описание
Легкий кроссбраузерный календарь, написан с использованием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">
+ <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])
// Доступ к экземпляру объекта
$('#my-element').data('datepicker')
Примеры
Инициализация с опциями по умолчанию
Пример<input type='text' class='datepicker-here' />
-
Выбор нескольких дат
Передайте параметр{multipleDates: true}для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число{multipleDates: 3}.
Пример<input type="text"
+
Выбор нескольких дат
Передайте параметр{multipleDates: true}для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число{multipleDates: 3}.
Пример<input type="text"
class="datepicker-here"
data-multiple-dates="3"
- data-multiple-dates-separator=", " />
+ data-multiple-dates-separator=", "
+ data-position='right top'/>
Постоянно видимый календарь
Проинициализируйте плагин на элементе, который не является текстовым полем, например на<div> … </div>, либо передайте параметр{inline: true}.
Пример<div class="datepicker-here"></div>
Выбор месяца
Пример<input type="text"
class="datepicker-here"
@@ -79,15 +90,14 @@ $('.my-datepicker').datepicker({
weekends
Тип:array
Значение по умполчанию:[6, 0]
Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс.-weekend-. По умолчанию это суббота и воскресенье.
dateFormat
Тип:string
Значение по умполчанию:""
Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
- d- дата
- dd- дата с лидирующем нулем
- D- сокращенное наименование дня
- DD- полное наименование дня
- m- номер мясяца
- mm- номер месяца с лидирующем нулем
- M- сокращенное наименовение месяца
- MM- полное наименовение месяца
- yy- сокращенный номер года
- yyyy- полный номер года
- yyyy1- первый год декады, в которую входит текущий год
- yyyy2- последний год декады, в которую входит текущий год
toggleSelected
Тип:boolean
Значение по умполчанию:true
Если true, то клик на выделенной дате снимет выделение.
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
Значение по умполчанию:","
Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку.
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, yyyy',
+ days: 'MM, <i>yyyy</i>',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
};
Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и вdateFormat. Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
$('#my-datepicker').datepicker({
navTitles: {
days: '<h3>Выберете дату заезда</h3> MM, yyyy'
}
-})
-
События
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).
Функция должна возвращать объект, которой может состоять из трех полей:
{
+})
monthsField
Тип:string
Значение по умполчанию:"monthsShort"
Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.
События
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, то ячейку нельзя будет выбрать
@@ -120,9 +130,7 @@ datepicker.update({
todayButton: true
})
view
Устанавливает новое представление для календаря.
datepicker.view = 'months';
-
date
Устанавливает новую отображаемую дату, нужно передать JavaScriptDate()
datepicker.date = new Date();
-
-
Выберете дату заезда
MM, yyyy'
}
})
+ .param
+ +param-header('monthsField','string','"monthsShort"')
+ p Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.
h2 События
.param
@@ -566,8 +595,4 @@ block content
+example-inline('Date()')
+example-code('js').
- datepicker.date = new Date();
-
-
- .datepicker-here#from
- .datepicker-here#to
\ No newline at end of file
+ datepicker.date = new Date();
\ No newline at end of file
diff --git a/page/sass/_page.scss b/page/sass/_page.scss
index 2e4ccb0..c353fb1 100644
--- a/page/sass/_page.scss
+++ b/page/sass/_page.scss
@@ -55,10 +55,9 @@ h4 {
}
input[type='text'] {
- border-radius: 4px;
outline: none;
height: 32px;
- border: 1px solid #c0c0c0;
+ border: 1px solid #979797;
padding: 0 8px;
margin: 0 0 14px;
color: #444;
@@ -67,8 +66,7 @@ input[type='text'] {
width: 250px;
&:focus {
- border-color: gold;
- box-shadow: 0 0 8px rgba(0, 0, 0, .1);
+ border-color: #ffd75c;
}
}
@@ -84,7 +82,7 @@ ul {
------------------------------------------------- */
%example-label {
- background: #f4f4f4;
+ background: #ececec;
border-radius: 0 0 4px 4px;
position: absolute;
padding: 4px 12px;
@@ -101,7 +99,7 @@ $exampleBorderRadius: 4px;
}
.example {
- border: 1px solid #ddd;
+ border: 1px solid #ececec;
border-radius: $exampleBorderRadius;
position: relative;
margin: 16px 0;
@@ -109,7 +107,7 @@ $exampleBorderRadius: 4px;
.example-code {
border: none;
border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius;
- border-top: 1px solid #eee;
+ border-top: 1px solid #ececec;
margin: 0;
}
}
@@ -206,10 +204,12 @@ a {
}
}
-.promo-input {
- height: 40px;
- margin: 26px 0;
- width: 300px;
+.datepicker-promo {
+ text-align: center;
+
+ .datepicker-inline {
+ display: inline-block;
+ }
}
// Range example
diff --git a/src/js/body.js b/src/js/body.js
index e99aa38..7a38cae 100644
--- a/src/js/body.js
+++ b/src/js/body.js
@@ -141,7 +141,7 @@
d = Datepicker.getParsedDate(date),
currentDate = new Date(),
loc = this.d.loc,
- html = loc.months[d.month],
+ html = loc[this.opts.monthsFiled][d.month],
render = {};
if (this.opts.onRenderCell) {
diff --git a/src/js/datepicker.js b/src/js/datepicker.js
index 9cd7491..2f3889c 100644
--- a/src/js/datepicker.js
+++ b/src/js/datepicker.js
@@ -48,10 +48,11 @@ var Datepicker;
autoClose: false,
// navigation
+ monthsFiled: 'monthsShort',
prevHtml: '',
nextHtml: '',
navTitles: {
- days: 'MM, yyyy',
+ days: 'MM, yyyy',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
},
@@ -148,7 +149,7 @@ var Datepicker;
this.loc = $.extend(true, {}, Datepicker.language.ru)
}
- this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
+ this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
} else {
this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
}
@@ -179,7 +180,7 @@ var Datepicker;
$appendTarget = $inline.insertAfter(this.$el)
}
} else {
- $appendTarget = $inline.insertAfter(this.$el)
+ $appendTarget = $inline.appendTo(this.$el)
}
this.$datepicker = $(baseTemplate).appendTo($appendTarget);
diff --git a/src/sass/_datepicker-config.scss b/src/sass/_datepicker-config.scss
index fef0616..29b31d6 100644
--- a/src/sass/_datepicker-config.scss
+++ b/src/sass/_datepicker-config.scss
@@ -1,34 +1,40 @@
$dayCellSize: 32px;
-$datepickerWidth: 232px;
+$datepickerWidth: 250px;
$datepickerMinBodyHeight: 170px;
-$datepickerBorderRadius: 2px;
-$datepickerPadding: 2px;
+$datepickerBorderRadius: 4px;
+$datepickerPadding: 4px;
$fontFamily: Tahoma;
$fontSize: 14px;
$yearsPerRow: 4;
+
$textColor: (
+ button: #5cc4ef,
+ otherMonth: #dedede,
+ disabled: #aeaeae,
+ currentDate: #4EB5E6,
common: #4a4a4a,
- dayNames: #f5a33a,
+ dayNames: #FF9A19,
+ navArrows: #9c9c9c
+);
+
+$bg: (
+ selected: #5cc4ef,
+ hover: #eee
+);
+
+$borderColor: (
+ nav: #f4f4f4,
+ inline: #d7d7d7,
+ default: #cccccc
);
$navigationHeight: 32px;
-$navigationButtonsOffset: 1px;
+$navigationButtonsOffset: 2px;
$pointerSize: 10px;
-$pointerOffset: 8px;
-
-// Colors
-$colorGrey: #ddd;
-$colorAnotherMonth: #ddd;
-$colorCellHover: #eee;
-$colorCellCurrent: #60C4F5;
-$colorCellSelected: skyblue;
-$colorCellWeekend: '';
-$borderColor: $colorGrey;
-$bgButton: #f2f2f2;
-$bgButtonHover: darken($bgButton, 3);
+$pointerOffset: 10px;
// Transitions
$transitionSpeed: .3s;
@@ -37,12 +43,21 @@ $transitionOffset: 8px;
// Objects
%otherMonth {
- color: $colorAnotherMonth;
- font-size: .9em;
+ color: map_get($textColor, otherMonth);
+
+ &:hover {
+ color: darken(map_get($textColor, otherMonth), 10);
+ }
+
+ &.-disabled- {
+ &:hover {
+ color: map_get($textColor, otherMonth);
+ }
+ }
&.-selected- {
color: #fff;
- background: lighten($colorCellSelected, 20%);
+ background: lighten(map_get($bg, selected), 15);
}
&:empty {
diff --git a/src/sass/cell.scss b/src/sass/cell.scss
index adafca7..39a39e9 100644
--- a/src/sass/cell.scss
+++ b/src/sass/cell.scss
@@ -20,30 +20,31 @@
z-index: 1;
&:hover {
- background: $colorCellHover;
+ background: map_get($bg, hover);
}
&.-current- {
- color: $colorCellCurrent;
+ color: map_get($textColor, currentDate);
&:hover {
- background: rgba($colorCellCurrent, .05);
+ color: map_get($textColor, common);
+ //background: rgba(map_get($textColor, currentDate), .05);
}
}
&.-disabled- {
cursor: default;
- color: $colorGrey;
+ color: map_get($textColor, disabled);
background: none;
}
&.-selected- {
color: #fff;
- background: $colorCellSelected;
+ background: map_get($bg, selected);
&.-current- {
color: #fff;
- background: $colorCellSelected;
+ background: map_get($bg, selected);
}
}
}
@@ -54,6 +55,7 @@
.datepicker--days-names {
display: flex;
flex-wrap: wrap;
+ margin: 8px 0 3px;
}
.datepicker--day-name {
@@ -62,17 +64,15 @@
align-items: center;
justify-content: center;
flex: 1;
- height: $dayCellSize;
text-align: center;
text-transform: uppercase;
- font-size: 13px;
+ font-size: .8em;
}
// Day cell
// -------------------------------------------------
.datepicker--cell-day {
- border-radius: 50%;
width: (100/7)#{'%'};
&.-other-month- {
diff --git a/src/sass/datepicker.scss b/src/sass/datepicker.scss
index 0e2dd15..b1fade6 100644
--- a/src/sass/datepicker.scss
+++ b/src/sass/datepicker.scss
@@ -12,7 +12,8 @@
.datepicker {
background: #fff;
- border: 1px solid $borderColor;
+ border: 1px solid map_get($borderColor, default);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
border-radius: $datepickerBorderRadius;
box-sizing: content-box;
font-family: $fontFamily, sans-serif;
@@ -47,6 +48,8 @@
.datepicker-inline {
.datepicker {
+ border-color: map-get($borderColor, inline);
+ box-shadow: none;
position: static;
left: auto;
right: auto;
@@ -60,6 +63,7 @@
}
.datepicker--content {
+ box-sizing: content-box;
padding: $datepickerPadding;
}
@@ -70,8 +74,8 @@ $pointerHalfSize: $pointerSize / 2 - 1;
.datepicker--pointer {
position: absolute;
background: #fff;
- border-top: 1px solid $borderColor;
- border-right: 1px solid $borderColor;
+ border-top: 1px solid map-get($borderColor, default);
+ border-right: 1px solid map-get($borderColor, default);
width: $pointerSize;
height: $pointerSize;
z-index: -1;
diff --git a/src/sass/navigation.scss b/src/sass/navigation.scss
index aac68a2..e545d72 100644
--- a/src/sass/navigation.scss
+++ b/src/sass/navigation.scss
@@ -7,8 +7,9 @@
.datepicker--nav {
display: flex;
justify-content: space-between;
+ border-bottom: 1px solid map_get($borderColor, nav);
+ min-height: $navigationHeight;
padding: $datepickerPadding;
- height: $navigationHeight;
}
.datepicker--nav-title,
@@ -25,7 +26,7 @@
user-select: none;
&:hover {
- background: $colorCellHover;
+ background: map_get($bg, hover);
}
&.-disabled- {
@@ -39,7 +40,7 @@
path {
fill: none;
- stroke: #bdbdbd;
+ stroke: map_get($textColor, navArrows);
stroke-width: 2px;
}
}
@@ -48,8 +49,14 @@
border-radius: $datepickerBorderRadius;
padding: 0 8px;
+ i {
+ font-style: normal;
+ color: map_get($textColor, navArrows);
+ margin-left: 5px;
+ }
+
&:hover {
- background: $colorCellHover;
+ background: map_get($bg, hover);
}
&.-disabled- {
@@ -63,21 +70,22 @@
.datepicker--buttons {
display: flex;
- margin: 0 $navigationButtonsOffset $datepickerPadding;
+ padding: $datepickerPadding;
+ border-top: 1px solid map_get($borderColor, nav);
}
.datepicker--button {
- background: $bgButton;
+ color: map_get($textColor, currentDate);
cursor: pointer;
border-radius: $datepickerBorderRadius;
- margin: 0 $navigationButtonsOffset;
flex: 1;
display: inline-flex;
justify-content: center;
align-items: center;
- height: 24px;
+ height: 32px;
&:hover {
- background: $bgButtonHover;
+ color: map_get($textColor, common);
+ background: map_get($bg, hover);
}
}
\ No newline at end of file