From bf899f36d976f6a51c35d866cee048ddb3d8c8d0 Mon Sep 17 00:00:00 2001 From: t1m0n Date: Sun, 29 Nov 2015 18:20:37 +0300 Subject: [PATCH] add english docs --- README.md | 8 +- docs/css/style.css | 2 +- docs/img/en.png | Bin 0 -> 1132 bytes docs/img/ru.png | Bin 0 -> 520 bytes docs/index-ru.html | 20 +- docs/index.html | 102 +++++---- docs/jade/mixins/example.jade | 4 +- docs/jade/mixins/param-header.jade | 28 ++- docs/jade/pages/index-ru.jade | 14 +- docs/jade/pages/index.jade | 347 ++++++++++++++++------------- docs/sass/_docs.scss | 20 ++ gulpfile.js | 5 +- tasks/jade.js | 28 ++- 13 files changed, 333 insertions(+), 245 deletions(-) create mode 100644 docs/img/en.png create mode 100644 docs/img/ru.png diff --git a/README.md b/README.md index c631e7d..2727d3d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Air Datepicker -Lightweight cross browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern browsers. +Lightweight cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern browsers. ## Install ``` @@ -13,7 +13,5 @@ $('.my-datepicker').datepicker([options]) ``` ## Demo and docs -[Demo](http://t1m0n.name/air-datepicker/docs/) - - - +[Docs in English](http://t1m0n.name/air-datepicker/docs/) +[Docs in Russian](http://t1m0n.name/air-datepicker/docs/index-ru.html) diff --git a/docs/css/style.css b/docs/css/style.css index 8cb25a5..d4a037b 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}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{top:0;bottom: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}.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}}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;position:absolute;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}.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}.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:-20px;left:0;overflow:auto}.nav--section{margin-bottom:20px}.nav--section:last-child{margin-bottom:0}.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}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}.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}}.lang-link{position:absolute;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;position:absolute;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}.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:-20px;left:0;overflow:auto}.nav--section{margin-bottom:20px}.nav--section:last-child{margin-bottom:0}.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 diff --git a/docs/img/en.png b/docs/img/en.png new file mode 100644 index 0000000000000000000000000000000000000000..02fa2a15cce16934a135922553fd2f058b280182 GIT binary patch literal 1132 zcmV-y1e5!TP)~+9LGx%dSReJ2vJyK+Fmr4ppK@4L8)7d?8Rtl6Xz_}iYB8?iy2LFE%UZ{so50M zhK2VGIv%xSYG>LZZ|SKlkDWSKwJh_Jsr&4C{+Xv(Z#Ig(*&n_y&hPU1K9}El=FR*6 z`|rQ`^B2_b*g=<0M~kkDh<(L)f0T*$#w?-iIT;N7)U92M+S{AH?rz@Op8rBVOX&&Q zQ$&46Hs}5Q(Pm{K+0wwJX7_H4X=#l1_cJ{`P0KYK#|k@0KGi`=Q3q+KJDHjJ6MIe$ zwu}sBCMGypu2*uh=4e4XjjeYWEG@;9p3aEbOj}!~R!j^-6%_(D zgTefW*p$m`jjvTC4Gd9H+}^sC>CsWXI?|-Xzx=TgeN!jK*jVg^g*+J>!#*@j(5GqA zz*RADdh0uOCaU?Pp$lVtJogSA;_2`(W8;(jT--_6H!88S8E%J%(;F7X)Z@o|k=VeI z{Hxf?DlkMxGa`<7YHEu1>o)crsY5bfF!+{`U8Mx?swDIGcFcMC^lsb6qbpaGrux>q zJbgOF%`IEF9vsZ%!-v$>bz|JWA7fk`69WT0nVclAqFZ4|mSj2%R_`Mys+hpfO9+fE zB{HFwn-?x|U98reoz0}!_M`ylLqg~d3}oWL19~GOuoV<2aiirSI}cw}dL=`$By-N- zqDI5u;2 zvR5)B>x7e&!yrfe(5za8cDA5Z7K?fRCu*JTl?=%`Ar?JnpjN9f8jTEy%esI6J`cnh z4~r>!QA2m{(zIj=T2Ifv<)mbf?3E13su4`bCHs7h+qzWT0)G+83))AHp?e9&s8M~w7kaU9x$5&|NMlwO4)Sd!^5@ZQTJ|D(7Bq!E`| zi`8bw+|xsAXeg~4H}YGa8f#x4^%`F8i%z^t8gWsT$Ir5SLpIL7DR>0uaPP(q zRL;)SE?$huWLDx*KAUo>ZSD~<6YU8JTyS?s{ZlG$haPkoR99Eiu2NCs>x(url7q=r z3VfN6ga?G5!X$Q}S-Fx+Yt~>kTUZf#T*)alAvq+U)F_vGt*VN1;>hwp-sCVSIdFhn z4-ZbqC$R35W4QT!KdS^qt2QLjD5j#o&5gok%V=tDp36Pcv-&YgSr?%ltC|J=EAU%!6+`Sa(WKY#xI{re9U96562^XJb$e*F0T`!_`P z@ZrOsK79g;K-3>Pbm+r}58uCk2b%Ef*Ds(lCZ+?nwr_20zS`J)x3T$QWAl@VX}_`Y zYa^piMn+$ajJ_Efeq&R1T|J)n&Yp00i_>zopr0Fe6Rpa1{> literal 0 HcmV?d00001 diff --git a/docs/index-ru.html b/docs/index-ru.html index 0754bb2..234c9bb 100644 --- a/docs/index-ru.html +++ b/docs/index-ru.html @@ -1,9 +1,9 @@ -Air Datepicker

AIR DATEPICKERлегкий кроссбраузерный jQuery календарь

In English

AIR DATEPICKERлегкий кроссбраузерный jQuery календарь

Описание

Легкий (~20kb минифицированный js файл и ~5.5kb gziped) кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах: -IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.

Установка

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 - суббота. +

Опции

inline

Типboolean

Defaultsfalse

Если true, то календарь будет виден постоянно.

language

Типstring|object

Defaults"ru"

Язык календаря. Если передается строка, то поиск языка будет осуществляться в объектеDatepicker.languageЕсли передан объект, то данные будут браться из него.

Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.

startDate

ТипDate

Defaultsnew Date()

Какую дату нужно показывать при инициализации календаря.

firstDay

Типnumber

Defaults""

Индекс дня, с которого начинается неделя. Возможные значение от 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- последний год декады, в которую входит текущий год

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 = {
+

weekends

Типarray

Defaults[6, 0]

Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс.-weekend-. По умолчанию это суббота и воскресенье.

dateFormat

Типstring

Defaults""

Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.

  • d- дата
  • dd- дата с лидирующем нулем
  • D- сокращенное наименование дня
  • DD- полное наименование дня
  • m- номер мясяца
  • mm- номер месяца с лидирующем нулем
  • M- сокращенное наименовение месяца
  • MM- полное наименовение месяца
  • yy- сокращенный номер года
  • yyyy- полный номер года
  • yyyy1- первый год декады, в которую входит текущий год
  • yyyy2- последний год декады, в которую входит текущий год

toggleSelected

Типboolean

Defaultstrue

Если true, то клик на выделенной дате снимет выделение.

position

Типstring

Defaults"bottom left"

Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования, +воторым - положение на этой оси. Например{position: "right top"}- утсановит позицию клаендаря справа вверху от текстового поля.

offset

Типnumber

Defaults12

Отступ от основной оси позиционирования.

view

Типstring

Defaults"days"

Начальный вид календаря. Возможноые значения:

  • days- отображение дней месяца
  • months- отображение месяцев одного года
  • years- отображение годов одной декады

minView

Типstring

Defaults"days"

Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду. +Возможные значения такие же как и у параметраview.

showOtherMonths

Типboolean

Defaultstrue

Если true, то будут отображаться дни других месяцев.

selectOtherMonths

Типboolean

Defaultstrue

Если true, то можно будет выбрать дни из других месяцев.

moveToOtherMonthsOnSelect

Типboolean

Defaultstrue

Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.

showOtherYears

Типboolean

Defaultstrue

Если true, то при отображении декады, будут показаны годы из других декад.

selectOtherYears

Типboolean

Defaultstrue

Если true, то можно будет выбрать года из других декад

moveToOtherYearsOnSelect

Типboolean

Defaultstrue

Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.

minDate

ТипDate

Defaults""

Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.

maxDate

ТипDate

Defaults""

Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.

disableNavWhenOutOfRange

Типboolean

Defaultstrue

Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'

multipleDates

Типboolean|number

Defaultsfalse

Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.

multipleDatesSeparator

Типstring

Defaults","

Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку.

todayButton

Типboolean

Defaultsfalse

Если true, то будет отображена кнопка "Сегодня".

clearButton

Типboolean

Defaultsfalse

Если true, то будет отображена кнопка "Очистить".

showEvent

Типstring

Defaults"focus"

Тип события, по наступлению которого будет показан календарь.

autoClose

Типboolean

Defaultsfalse

Если true, то при активации даты, календарь закроется.

prevHtml

Типstring

Defaults<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>

Контент кнопки 'предыдущий месяц|год|декада'.

nextHtml

Типstring

Defaults<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>

Контент кнопки 'следующий месяц|год|декада'.

navTitles

Типobject

Defaults

navTitles = {
 	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)

Тип: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

Defaults"monthsShort"

Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.

События

onSelect(formattedDate, date, inst)

Типfunction

Defaultsnull

Функция обратного вызова при выборе даты.

  • formattedDatestring- отформатированная дата.
  • dateDate|array- объектDateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов.
  • instobject- экземпляр плагина.

onChangeMonth(month, year)

Типfunction

Defaultsnull

Функция обратного вызова при изменении месяца.

  • monthnumber- номер месяца (от 0 до 12), к которому осуществлен переход.
  • yearnumber- номер года, к которому осуществлен переход.

onChangeYear(year)

Типfunction

Defaultsnull

Функция обратного вызова при изменении года.

  • yearnumber- номер года, к которому осуществлен переход

onChangeDecade(decade)

Типfunction

Defaultsnull

Функция обратного вызова при изменении декады.

  • decadearray- массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.

onChangeView(view)

Типfunction

Defaultsnull

Функция обратного вызова при изменении вида календаря

  • viewstring- вид, к которому осуществлен переход (days, months, years).

onRenderCell(date, cellType)

Типfunction

Defaultsnull

Функция обратного вызова при отрисовке ячейки календаря.

  • dateDate- объект даты текущей ячейки
  • cellTypestring- тип текущей ячейки (day, month, year).

Функция должна возвращать объект, которой может состоять из трех полей:

{
 	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()

Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.

prev()

Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.

selectDate(date)

  • dateDate- дата в формате JavaScriptDate()

Выбирает переданную дату. Если{multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.

removeDate(date)

  • dateDate- дата в формате JavaScriptDate()

Снимает выделение с переданной даты.

update(field[, value])

  • fieldstring|object- название поля значение которого нужно обновить.
  • fieldstring|*- новое значение параметра

Обновление опций календаря, после вызова метода он автоматически перерисуется. +

show()

Показывает календарь.

hide()

Скрывает календарь.

next()

Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.

prev()

Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.

selectDate(date)

  • dateDate- дата в формате JavaScriptDate()

Выбирает переданную дату. Если{multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.

removeDate(date)

  • dateDate- дата в формате JavaScriptDate()

Снимает выделение с переданной даты.

clear()

Убирает выделение со всех активных дат.

update(field[, value])

  • fieldstring|object- название поля значение которого нужно обновить.
  • fieldstring|*- новое значение параметра

Обновление опций календаря, после вызова метода он автоматически перерисуется. Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями. 

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
AIR DATEPICKERлегкий кроссбраузерный jQuery календарь
Описание
Легкий (~20kb минифицированный js файл и ~5.5kb gziped) кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах:
-IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
Установка
bower i --save air-datepicker
Либо можно скачать файлы напрямую с GitHub
Использование
Подключите стили и скрипты из папки/dist:
<html>
+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:
+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">
 		<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 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])
-// Доступ к экземпляру объекта
-$('#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
Pass the 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-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
Initialize the plugin on non text input element, such as<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"]и при вызове календаря передать название языка в параметрlanguage
Datepicker.language['my-lang'] = {...}
+	})
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
 $('.my-datepicker').datepicker({
 	language: 'my-lang'
-})
Также объект локализации можно передавать непосредственно вlanguage
$('.my-datepicker').datepicker({
+})
You can also pass localization object directly inlanguage
$('.my-datepicker').datepicker({
 	language: {
 		days: [...]
 		...
 	}
-})
Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию.
Пример объекта локализации
Datepicker.language['ru'] =  {
-	days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
-	daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
-	daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
-	months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
-	monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
-	today: 'Сегодня',
-	clear: 'Очистить',
-	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 - суббота.
-По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
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 = {
+})
If some fields are missing, they will be taken from default localization object ('Russian').
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
+};
Available localizations located indist/js/i18ndirectory.
Options
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()
Which date must 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 и 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 must be considered as holidays. Class.-weekend-will be added to relevant cells.
+. By default its saturday and sunday.
dateFormat
Typestring
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.
  • 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
toggleSelected
Typeboolean
Defaultstrue
If true, then clicking on selected cell will remove selection.
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 must be shown.
autoClose
Typeboolean
Defaultsfalse
If true, when 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'
-  };
Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и вdateFormat. Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
$('#my-datepicker').datepicker({
+  };
Content of datepicker's title depending on current view, can use same notation as in parameterdateFormat. 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)
Тип: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, то ячейку нельзя будет выбрать
-}
Пример
$('#my-datepicker').datepicker({
-	// Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class'
-	// и делает их невозможными к выбору.
+   })
monthsField
Typestring
Defaults"monthsShort"
Which field from localization object must be used as months names, when view is 'months'.
Events
onSelect(formattedDate, date, inst)
Typefunction
Defaultsnull
Callback when selecting date
  • formattedDatestring- formatted date.
  • dateDate|array- JavaScript Date object
+if{multipleDates: true}, then it will be an array of js dates.
  • instobject- plugin instance.
onChangeMonth(month, year)
Typefunction
Defaultsnull
Callback when months are changed.
  • monthnumber- month number (from 0 to 12), to which transition is done.
  • yearnumber- year, to which transition is done.
onChangeYear(year)
Typefunction
Defaultsnull
Callback when year is changed
  • yearnumber- year, to which transition is done.
onChangeDecade(decade)
Typefunction
Defaultsnull
Callback when decade is changed
  • decadearray- array which consists of two years: first year in decade and last year in decade.
onChangeView(view)
Typefunction
Defaultsnull
Callback when datepicker's view is changed
  • viewstring- view name, to which transition is done (days, months, years).
onRenderCell(date, cellType)
Typefunction
Defaultsnull
Callback when datepicker's cell is rendered.
  • dateDate- current cell date
  • cellTypestring- current cell type (day, month, year).
The callback must return object which may consists of three fields:
{
+	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()
Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
prev()
Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.
selectDate(date)
  • dateDate- дата в формате JavaScriptDate()
Выбирает переданную дату. Если{multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.
removeDate(date)
  • dateDate- дата в формате JavaScriptDate()
Снимает выделение с переданной даты.
update(field[, value])
  • fieldstring|object- название поля значение которого нужно обновить.
  • fieldstring|*- новое значение параметра
Обновление опций календаря, после вызова метода он автоматически перерисуется.
-Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями.
var datepicker = $('#my-elem').datepicker().data('datepicker');
-// Обновление одного параметра
+})
API
Plugin instance is accessible throughdataattribute.
var myDatepicker = $('#my-elem').datepicker().data('datepicker');
+myDatepicker.show();
show()
Shows datepicker.
hide()
Hides datepicker.
next()
Renders next month, year or decade, depending on current view.
prev()
Renders previous month, year or decade, depending on current view.
selectDate(date)
  • dateDate- JavaScriptDate()
Activates passed date. If{multipleDates: false}and date is already active, then it will be deactivated. If{multipleDates: true}then another active date will be added.
removeDate(date)
  • dateDate- JavaScriptDate()
Removes selection from passed date.
clear()
Clears all selected dates.
update(field[, value])
  • fieldstring|object- field name which must be updated.
  • fieldstring|*- new value.
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.
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
Устанавливает новую отображаемую дату, нужно передать JavaScriptDate()
datepicker.date = new Date();