From 776f0a5781abd682e5427709b6b6a24ef16cc3de Mon Sep 17 00:00:00 2001 From: t1m0n Date: Thu, 10 Dec 2015 15:21:45 +0300 Subject: [PATCH] update docs --- docs/css/style.css | 2 +- docs/index-ru.html | 116 ++++++++++++++++++------ docs/index.html | 124 +++++++++++++++++++------ docs/jade/pages/index-ru.jade | 166 +++++++++++++++++++++++++++------- docs/jade/pages/index.jade | 166 +++++++++++++++++++++++++++------- docs/sass/_docs.scss | 29 ++++++ 6 files changed, 485 insertions(+), 118 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index 9ef2107..14ea939 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1 +1 @@ -.-text-center-,.datepicker-promo,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px;min-width:320px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3,h4{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}h4{font-weight:400;color:#939393;font-size:16px;margin:24px 0 0}article h2,article h3{position:relative;z-index:1}article h2:after,article h3:after{content:'';background:rgba(67,156,255,.2);border-radius:4px;opacity:0;left:-8px;right:-8px;top:-10px;bottom:-4px;position:absolute;z-index:-1;transition:all .4s .3s linear}.nav,.nav-wrap{bottom:0;top:0}article h2.-hilited-:after,article h3.-hilited-:after{opacity:1;transition:all .4s .7s linear}.container{max-width:960px;margin:0 auto;padding:1px 0;position:relative}.buttons,.example--label,.lang-link{position:absolute}.container article{margin:60px 0 30px}@media all and (max-width:1525px){.container{margin-left:270px}}@media all and (max-width:1280px){.container{margin-right:20px}}@media all and (max-width:650px){.container{margin-right:20px;margin-left:20px}}.buttons{top:19px}.lang-link{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;right:0;top:15px}.lang-link img{margin-right:5px}@media all and (max-width:650px){.lang-link span{display:none}}input[type=text]{outline:0;height:32px;border:1px solid #b5b5b5;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}.hljs,.param-inline{font-family:Consolas,monospace}input[type=text]:focus{border-color:#ffd75c}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#ececec;border-radius:0 0 4px 4px;padding:4px 12px;right:8px;top:0}.hljs{line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ececec;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #ececec;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:0 4px}.example-content{padding:32px}@media all and (max-width:650px){.example-content{padding-left:4%;padding-right:4%}}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#ff767e}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param-inline i,.param-inline strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param-inline strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param-inline i{color:#838383;font-size:.95em;font-style:normal;font-weight:100;font-family:'Fira Sans',sans-serif}.promo-header{font-size:48px;font-weight:100;margin-top:54px}.promo-header span{display:block;font-size:.5em}.datepicker-promo .datepicker-inline,.param-header--label,.range-example span{display:inline-block}.range-example input[type=text]{width:150px}.range-example span{margin:0 8px}.param-header{margin-bottom:8px}.param-header h3{margin-bottom:2px}.param-header p{margin:0;font-size:13px}.param{margin-bottom:32px}.param-header--label{color:#707070;vertical-align:middle}.nav-wrap{background:#fff;position:fixed;overflow:hidden;width:250px;left:0;box-shadow:0 0 4px rgba(0,0,0,.3)}@media all and (max-width:650px){.nav-wrap{display:none}}.nav-wrap:after,.nav-wrap:before{content:'';pointer-events:none;position:absolute;left:0;right:0;height:28px}.nav-wrap:after{background:linear-gradient(to top,#fff,rgba(255,255,255,0));bottom:0}.nav{position:absolute;padding:18px;right:0;left:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.nav--section{margin-bottom:20px}.nav--section-title{line-height:1;font-size:22px;margin:0 0 8px}.nav--section-title a{color:#000;text-decoration:none}.nav--section-title a:hover{color:#ff767e}.nav--subsection{margin-left:2px}.nav--subsection-title{font-size:13px;margin:0 0 8px;font-weight:400;font-family:Tahoma,sans-serif}.nav--subsection-title a{color:#787878;text-decoration:none}.nav--subsection-title a:hover{color:#ff767e} \ No newline at end of file +.-text-center-,.datepicker-promo,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px;min-width:320px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3,h4{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}h4{font-weight:400;color:#939393;font-size:16px;margin:24px 0 0}article h2,article h3{position:relative;z-index:1}article h2:after,article h3:after{content:'';background:rgba(67,156,255,.2);border-radius:4px;opacity:0;left:-8px;right:-8px;top:-10px;bottom:-4px;position:absolute;z-index:-1;transition:all .4s .3s linear}.nav,.nav-wrap{bottom:0;top:0}article h2.-hilited-:after,article h3.-hilited-:after{opacity:1;transition:all .4s .7s linear}.container{max-width:960px;margin:0 auto;padding:1px 0;position:relative}.buttons,.example--label,.lang-link{position:absolute}.container article{margin:60px 0 30px}@media all and (max-width:1525px){.container{margin-left:270px}}@media all and (max-width:1280px){.container{margin-right:20px}}@media all and (max-width:650px){.container{margin-right:20px;margin-left:20px}}.list-inline{display:-webkit-flex;display:-ms-flexbox;display:flex;margin:-8px -8px 0}.list-inline>*{margin:8px 8px 0}.buttons{top:19px}.lang-link{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;right:0;top:15px}.lang-link img{margin-right:5px}@media all and (max-width:650px){.lang-link span{display:none}}input[type=text]{outline:0;height:32px;border:1px solid #b5b5b5;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}.hljs,.param-inline{font-family:Consolas,monospace}input[type=text]:focus{border-color:#ffd75c}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#ececec;border-radius:0 0 4px 4px;padding:4px 12px;right:8px;top:0}.hljs{line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ececec;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #ececec;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:0 4px}.example-content{padding:32px}@media all and (max-width:650px){.example-content{padding-left:4%;padding-right:4%}}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#ff767e}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param-inline i,.param-inline strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param-inline strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param-inline i{color:#838383;font-size:.95em;font-style:normal;font-weight:100;font-family:'Fira Sans',sans-serif}.promo-header{font-size:48px;font-weight:100;margin-top:54px}.promo-header span{display:block;font-size:.5em}.datepicker-promo .datepicker-inline,.param-header--label,.range-example span{display:inline-block}.range-example input[type=text]{width:150px}.range-example span{margin:0 8px}.param-header{margin-bottom:8px}.param-header h3{margin-bottom:2px}.param-header p{margin:0;font-size:13px}.param{margin-bottom:32px}.param-header--label{color:#707070;vertical-align:middle}.nav-wrap{background:#fff;position:fixed;overflow:hidden;width:250px;left:0;box-shadow:0 0 4px rgba(0,0,0,.3)}.dp-note,.nav{position:absolute}@media all and (max-width:650px){.nav-wrap{display:none}}.nav-wrap:after,.nav-wrap:before{content:'';pointer-events:none;position:absolute;left:0;right:0;height:28px}.nav-wrap:after{background:linear-gradient(to top,#fff,rgba(255,255,255,0));bottom:0}.nav{padding:18px;right:0;left:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.nav--section{margin-bottom:20px}.nav--section-title{line-height:1;font-size:22px;margin:0 0 8px}.nav--section-title a{color:#000;text-decoration:none}.nav--section-title a:hover{color:#ff767e}.nav--subsection{margin-left:2px}.nav--subsection-title{font-size:13px;margin:0 0 8px;font-weight:400;font-family:Tahoma,sans-serif}.nav--subsection-title a{color:#787878;text-decoration:none}.nav--subsection-title a:hover{color:#ff767e}.dp-note{background:#ccc;width:4px;height:4px;border-radius:50%;left:50%;bottom:1px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.-selected- .dp-note{bottom:2px;background:#fff;opacity:.5} \ No newline at end of file diff --git a/docs/index-ru.html b/docs/index-ru.html index 62425a7..6e96067 100644 --- a/docs/index-ru.html +++ b/docs/index-ru.html @@ -29,39 +29,103 @@ $('#my-element').data('datepicker') // Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня minDate: new Date() }) -

Диапозон дат

По умолчанию в плагине нет встроенного механизма выбора диапозона дат. -Тем не менее это можно с легкостью сделать вручную.

Пример
–
// Сделаем неактивными воскресенье и субботу
+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)
 	}
 })
-
var $start = $('#start'),
-	$end = $('#end');
 
-	$start.datepicker({
-		onSelect: function (fd, date) {
-			$end.data('datepicker')
-				.update('minDate', date)
-		}
-	})
+// Сразу выберем какую-ниудь дату из `eventDates`
+var currentDate = currentDate = new Date();
+$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
 
-	$end.datepicker({
-		onSelect: function (fd, date) {
-			$start.data('datepicker')
-				.update('maxDate', date)
-		}
-	})

Локализация

Вы можете добавить свою локализацию в объектDatepicker.language["my-lang"]и при вызове календаря передать название языка в параметрlanguage

Datepicker.language['my-lang'] = {...}
 
 $('.my-datepicker').datepicker({
@@ -88,7 +152,7 @@ $('.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- последний год декады, в которую входит текущий год
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
Значение по умолчанию","
Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.
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 = {
+Возможные значения такие же как и у параметра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>',
 	months: 'yyyy',
 	years: 'yyyy1 - yyyy2'
diff --git a/docs/index.html b/docs/index.html
index 0ffc65a..2e3a233 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,11 +6,14 @@ $promo.datepicker({
 	<head>
 		<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
 		<script src="dist/js/datepicker.min.js"></script>
+
+		<!-- Include English language -->
+		<script src="dist/js/i18n/datepicker.en.js"></script>
 	</head>
 </html>
Datepicker will automatically initialize on elements with class.datepicker-here, options may be sent viadataattributes.
<input type='text' class="datepicker-here" data-position="right top" />
Manual initialization
// Initialization
 $('#my-element').datepicker([options])
 // Access instance of plugin
-$('#my-element').data('datepicker')

Examples

Initialization with default options

Example
<input type='text' class='datepicker-here', data-language='en' />

Selecting multiple dates

Pass parameter{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"
+$('#my-element').data('datepicker')

Examples

Initialization with default options

Example
<input type='text' class='datepicker-here' data-language='en' />

Selecting multiple dates

Pass parameter{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-language='en'
 	   data-multiple-dates="3"
@@ -26,37 +29,106 @@ $('#my-element').data('datepicker')

$('#minMaxExample').datepicker({ language: 'en', minDate: new Date() // Now can select only dates, which goes after today -})

Range

By default there is no functionality to select dates range, but it can be easily achieved manually.

Example
–
// Make Sunday and Saturday disabled
+var disabledDays = [0, 6];
+
+$('#disabled-days').datepicker({
+	language: 'en',
+	onRenderCell: function (date, cellType) {
+		if (cellType == 'day') {
+			var day = date.getDay(),
+				isDisabled = disabledDays.indexOf(day) != -1;
+
+			return {
+				disabled: isDisabled
+			}
+		}
 	}
 })
-$end.datepicker({
+

Custom cells content

Air Datepicker allows you to change contents of cells like you want. You could useonRenderCellfor this purpose. +Lets add extra elements to several dates, and show `lorem` text when selecting them.

Example

var $start = $('#start'),
-	$end = $('#end');
-	$start.datepicker({
-		language: 'en',
-		onSelect: function (fd, date) {
-			$end.data('datepicker')
-				.update('minDate', date)
+})
+var currentDate = new Date();
+$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
var eventDates = [1, 10, 12, 22],
+	$picker = $('#custom-cells'),
+	$content = $('#custom-cells-events'),
+	sentences = [ … ];
+
+$picker.datepicker({
+	language: 'en',
+	onRenderCell: function (date, cellType) {
+		var currentDate = date.getDate();
+		// Add extra element, if `eventDates` contains `currentDate`
+		if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+			return {
+				html: currentDate + '<span class="dp-note"></span>'
+			}
 		}
-	})
-	$end.datepicker({
-		language: 'en',
-		onSelect: function (fd, date) {
-			$start.data('datepicker')
-				.update('maxDate', date)
+	},
+	onSelect: function onSelect(fd, date) {
+		var title = '', content = ''
+		// If date with event is selected, show it
+		if (date && eventDates.indexOf(date.getDate()) != -1) {
+			title = fd;
+			content = sentences[Math.floor(Math.random() * eventDates.length)];
 		}
-	})

Localization

You can add your localization to objectDatepicker.language["my-lang"]and pass it name to parameterlanguage

// Add custom localization
+		$('strong', $content).html(title)
+		$('p', $content).html(content)
+	}
+})
+
+// Select initial date from `eventDates`
+var currentDate = currentDate = new Date();
+$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+

Localization

You can add your localization to objectDatepicker.language["my-lang"]and pass it name to parameterlanguage

// Add custom localization
 Datepicker.language['my-lang'] = {...}
 
 // Initialize datepicker with it
@@ -82,7 +154,7 @@ If object is passed, then data will be taken from this object directly.
If
 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.
 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 month
  • months- display months of one year
  • years- 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.
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 = {
+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>',
 	  months: 'yyyy',
 	  years: 'yyyy1 - yyyy2'
diff --git a/docs/jade/pages/index-ru.jade b/docs/jade/pages/index-ru.jade
index 101f043..f231cc9 100644
--- a/docs/jade/pages/index-ru.jade
+++ b/docs/jade/pages/index-ru.jade
@@ -136,53 +136,148 @@ block content
 					minDate: new Date()
 				})
 
-		h3 Диапозон дат
-		p.
-			По умолчанию в плагине нет встроенного механизма выбора диапозона дат.
-			Тем не менее это можно с легкостью сделать вручную.
+		h3#example-range Диапозон дат
+		p Используйте парамтер
+			+example-inline('{range: true}')
+			| для выбора диапазона. В качестве разделителя дат будет использован
+			+example-inline('multipleDatesSeparator')
+
+
 		+example
 			+example-content
-				div.range-example
-					input(type='text' placeholder='Начало')#start
-					span –
-					input(type='text' placeholder='Конец')#end
+				input(type='text' data-range='true' data-multiple-dates-separator=' - ').datepicker-here
+
+			+example-code('html')
+				:code
+					
+
+		h3#example-disabled-days Неактивные дни недели
+		p Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методом
+			+example-inline('onRenderCell')
+			| .
+		+example
+			+example-content
+				input(type='text' id='disabled-days')
 
 				script.
-					var $start = $('#start'),
-							$end = $('#end');
+					var disabledDays = [0, 6]; // Сделаем неактивными субботу и воскресенье
 
-					$start.datepicker({
-						onSelect: function (fd, date) {
-							$end.data('datepicker')
-									.update('minDate', date)
+					$('#disabled-days').datepicker({
+						onRenderCell: function (date, cellType) {
+							if (cellType == 'day') {
+								var day = date.getDay(),
+									isDisabled = disabledDays.indexOf(day) != -1;
+
+								return {
+									disabled: isDisabled
+								}
+							}
 						}
 					})
-
-					$end.datepicker({
-						onSelect: function (fd, date) {
-							$start.data('datepicker')
-									.update('maxDate', date)
-						}
-					})
-
 			+example-code('js').
-				var $start = $('#start'),
-					$end = $('#end');
+				// Сделаем неактивными воскресенье и субботу
+				var disabledDays = [0, 6];
 
-					$start.datepicker({
-						onSelect: function (fd, date) {
-							$end.data('datepicker')
-								.update('minDate', date)
+				$('#disabled-days').datepicker({
+					onRenderCell: function (date, cellType) {
+						if (cellType == 'day') {
+							var day = date.getDay(),
+								isDisabled = disabledDays.indexOf(day) != -1;
+
+							return {
+								disabled: isDisabled
+							}
+						}
+					}
+				})
+
+		h3 Кастомное содержимое ячеек
+		p Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методом
+			+example-inline('onRenderCell')
+			| .
+			| Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:
+
+		+example
+			+example-content
+				.list-inline
+					div
+						div#custom-cells
+					div#custom-cells-events
+						strong
+						p
+
+				script.
+					var eventDates = [1, 10, 12, 22],
+						$picker = $('#custom-cells'),
+						$content = $('#custom-cells-events'),
+						sentences = [
+								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Si enim ad populum me vocas, eum. Ita prorsus, inquam; Nonne igitur tibi videntur, inquit, mala? Hunc vos beatum; Idemne, quod iucunde? ',
+								'Ratio quidem vestra sic cogit. Illi enim inter se dissentiunt. Tu vero, inquam, ducas licet, si sequetur; Non semper, inquam; ',
+								'Duo Reges: constructio interrete. A mene tu? Ea possunt paria non esse. Est, ut dicis, inquam. Scaevolam M. Quid iudicant sensus? ',
+								'Poterat autem inpune; Qui est in parvis malis. Prave, nequiter, turpiter cenabat; Ita credo. '
+							]
+
+					$picker.datepicker({
+						onRenderCell: function (date, cellType) {
+							var currentDate = date.getDate();
+
+							if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+								return {
+									html: currentDate + ''
+								}
+							}
+						},
+						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)
 						}
 					})
 
-					$end.datepicker({
-						onSelect: function (fd, date) {
-							$start.data('datepicker')
-								.update('maxDate', date)
+					var currentDate = new Date();
+					$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+
+			+example-code('js')
+				:code
+					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 + ''
+								}
+							}
+						},
+						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))
+
+
 	article
 		h2#localization Локализация
 		p
@@ -310,7 +405,7 @@ block content
 			+param-header('altField', 'string|jQuery', '""')
 			p Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом
 				+example-inline('altFieldDateFormat')
-				|.
+				| .
 
 		.param
 			+param-header('altFieldDateFormat', 'string', '"@"')
@@ -427,7 +522,10 @@ block content
 		.param
 			+param-header('multipleDatesSeparator', 'string', '","')
 			p Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.
-
+		.param
+			+param-header('range', 'boolean', 'false')
+			p Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован
+				+example-inline('multipleDatesSeparator')
 		.param
 			+param-header('todayButton', 'boolean', 'false')
 			p Если true, то будет отображена кнопка "Сегодня".
diff --git a/docs/jade/pages/index.jade b/docs/jade/pages/index.jade
index d2b43b5..359e3c8 100644
--- a/docs/jade/pages/index.jade
+++ b/docs/jade/pages/index.jade
@@ -39,6 +39,9 @@ block content
 					
 						
 						
+
+						
+						
 					
 				
 		p
@@ -64,7 +67,7 @@ block content
 				input(type='text', data-language='en').datepicker-here
 			+example-code('html')
 				:code
-					
+					
 		h3 Selecting multiple dates
 		p
 			| Pass parameter
@@ -128,49 +131,145 @@ block content
 					language: 'en',
 					minDate: new Date() // Now can select only dates, which goes after today
 				})
-		h3 Range
-		p.
-			By default there is no functionality to select dates range, but it can be easily achieved manually.
+
+		h3#example-range Range of dates
+		p Use
+			+example-inline('{range: true}')
+			| for choosing range of dates. As dates separator
+			+example-inline('multipleDatesSeparator')
+			| will be used.
 		+example
 			+example-content
-				div.range-example
-					input(type='text' placeholder='Start')#start
-					span –
-					input(type='text' placeholder='End')#end
+				input(type='text' data-range='true' data-multiple-dates-separator=' - ' data-language='en').datepicker-here
+			+example-code('html')
+				:code
+					
+
+
+		h3#example-disabled-days Disable days of week
+		p For disabling days, use
+			+example-inline('onRenderCell')
+			| .
+		+example
+			+example-content
+				input(type='text' id='disabled-days')
 				script.
-					var $start = $('#start'),
-							$end = $('#end');
-					$start.datepicker({
+					// Make Sunday and Saturday disabled
+					var disabledDays = [0, 6];
+
+					$('#disabled-days').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)
+						onRenderCell: function (date, cellType) {
+							if (cellType == 'day') {
+								var day = date.getDay(),
+									isDisabled = disabledDays.indexOf(day) != -1;
+								return {
+									disabled: isDisabled
+								}
+							}
 						}
 					})
 			+example-code('js').
-				var $start = $('#start'),
-					$end = $('#end');
-					$start.datepicker({
+				// Make Sunday and Saturday disabled
+				var disabledDays = [0, 6];
+
+				$('#disabled-days').datepicker({
+					language: 'en',
+					onRenderCell: function (date, cellType) {
+						if (cellType == 'day') {
+							var day = date.getDay(),
+								isDisabled = disabledDays.indexOf(day) != -1;
+
+							return {
+								disabled: isDisabled
+							}
+						}
+					}
+				})
+
+		h3 Custom cells content
+		p Air Datepicker allows you to change contents of cells like you want. You could use
+			+example-inline('onRenderCell')
+			| for this purpose.
+			| Lets add extra elements to several dates, and show `lorem` text when selecting them.
+		+example
+			+example-content
+				.list-inline
+					div
+						div#custom-cells
+					div#custom-cells-events
+						strong
+						p
+				script.
+					var eventDates = [1, 10, 12, 22],
+							$picker = $('#custom-cells'),
+							$content = $('#custom-cells-events'),
+							sentences = [
+								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Si enim ad populum me vocas, eum. Ita prorsus, inquam; Nonne igitur tibi videntur, inquit, mala? Hunc vos beatum; Idemne, quod iucunde? ',
+								'Ratio quidem vestra sic cogit. Illi enim inter se dissentiunt. Tu vero, inquam, ducas licet, si sequetur; Non semper, inquam; ',
+								'Duo Reges: constructio interrete. A mene tu? Ea possunt paria non esse. Est, ut dicis, inquam. Scaevolam M. Quid iudicant sensus? ',
+								'Poterat autem inpune; Qui est in parvis malis. Prave, nequiter, turpiter cenabat; Ita credo. '
+							]
+					$picker.datepicker({
 						language: 'en',
-						onSelect: function (fd, date) {
-							$end.data('datepicker')
-								.update('minDate', date)
+						onRenderCell: function (date, cellType) {
+							var currentDate = date.getDate();
+							if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+								return {
+									html: currentDate + ''
+								}
+							}
+						},
+						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)
 						}
 					})
-					$end.datepicker({
+					var currentDate = new Date();
+					$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+			+example-code('js')
+				:code
+					var eventDates = [1, 10, 12, 22],
+						$picker = $('#custom-cells'),
+						$content = $('#custom-cells-events'),
+						sentences = [ … ];
+
+					$picker.datepicker({
 						language: 'en',
-						onSelect: function (fd, date) {
-							$start.data('datepicker')
-								.update('maxDate', date)
+						onRenderCell: function (date, cellType) {
+							var currentDate = date.getDate();
+							// Add extra element, if `eventDates` contains `currentDate`
+							if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+								return {
+									html: currentDate + ''
+								}
+							}
+						},
+						onSelect: function onSelect(fd, date) {
+							var title = '', content = ''
+							// If date with event is selected, show it
+							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)
 						}
 					})
+
+					// Select initial date from `eventDates`
+					var currentDate = currentDate = new Date();
+					$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+
 	article
 		h2#localization Localization
 		p
@@ -394,6 +493,11 @@ block content
 		.param
 			+param-header('multipleDatesSeparator', 'string', '","')
 			p Dates separator, which will be used when concatenating dates to string.
+		.param
+			+param-header('range', 'boolean', 'false')
+			p For selecting dates range, turn this option to true.
+				+example-inline('multipleDatesSeparator')
+				| will be used as dates separator.
 		.param
 			+param-header('todayButton', 'boolean', 'false')
 			p If true, then button "Today" will be visible.
diff --git a/docs/sass/_docs.scss b/docs/sass/_docs.scss
index baf4ba5..dc5e92c 100644
--- a/docs/sass/_docs.scss
+++ b/docs/sass/_docs.scss
@@ -95,6 +95,14 @@ article {
   }
 }
 
+.list-inline {
+  display: flex;
+  margin: -8px -8px 0;
+  > * {
+    margin: 8px 8px 0;
+  }
+}
+
 .buttons {
   position: absolute;
   top: 19px;
@@ -410,3 +418,24 @@ a {
     }
   }
 }
+
+
+//  Cell note
+// -------------------------
+
+.dp-note {
+  position: absolute;
+  background: #cccccc;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  left: 50%;
+  bottom: 1px;
+  transform: translateX(-50%);
+
+  .-selected- & {
+    bottom: 2px;
+    background: #fff;
+    opacity: .5;
+  }
+}
\ No newline at end of file