add old files to vcs after renaming 'page' to 'docs'

docs/css/github-gist.css

@@ -0,0 +1,218 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.bash .hljs-shebang,
+.java .hljs-javadoc,
+.javascript .hljs-javadoc,
+.rust .hljs-preprocessor {
+  color: #969896;
+}
+
+.hljs-string,
+.apache .hljs-sqbracket,
+.coffeescript .hljs-subst,
+.coffeescript .hljs-regexp,
+.cpp .hljs-preprocessor,
+.c .hljs-preprocessor,
+.javascript .hljs-regexp,
+.json .hljs-attribute,
+.makefile .hljs-variable,
+.markdown .hljs-value,
+.markdown .hljs-link_label,
+.markdown .hljs-strong,
+.markdown .hljs-emphasis,
+.markdown .hljs-blockquote,
+.nginx .hljs-regexp,
+.nginx .hljs-number,
+.objectivec .hljs-preprocessor .hljs-title,
+.perl .hljs-regexp,
+.php .hljs-regexp,
+.xml .hljs-value,
+.less .hljs-built_in,
+.scss .hljs-built_in {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.css .hljs-at_rule,
+.css .hljs-important,
+.http .hljs-request,
+.ini .hljs-setting,
+.haskell .hljs-type,
+.java .hljs-javadoctag,
+.javascript .hljs-tag,
+.javascript .hljs-javadoctag,
+.nginx .hljs-title,
+.objectivec .hljs-preprocessor,
+.php .hljs-phpdoc,
+.sql .hljs-built_in,
+.less .hljs-tag,
+.less .hljs-at_rule,
+.scss .hljs-tag,
+.scss .hljs-at_rule,
+.scss .hljs-important,
+.stylus .hljs-at_rule,
+.go .hljs-typename,
+.swift .hljs-preprocessor {
+  color: #a71d5d;
+}
+
+.apache .hljs-common,
+.apache .hljs-cbracket,
+.apache .hljs-keyword,
+.bash .hljs-literal,
+.bash .hljs-built_in,
+.coffeescript .hljs-literal,
+.coffeescript .hljs-built_in,
+.coffeescript .hljs-number,
+.cpp .hljs-number,
+.cpp .hljs-built_in,
+.c .hljs-number,
+.c .hljs-built_in,
+.cs .hljs-number,
+.cs .hljs-built_in,
+.css .hljs-attribute,
+.css .hljs-hexcolor,
+.css .hljs-number,
+.css .hljs-function,
+.haskell .hljs-number,
+.http .hljs-literal,
+.http .hljs-attribute,
+.java .hljs-number,
+.javascript .hljs-built_in,
+.javascript .hljs-literal,
+.javascript .hljs-number,
+.json .hljs-number,
+.makefile .hljs-keyword,
+.markdown .hljs-link_reference,
+.nginx .hljs-built_in,
+.objectivec .hljs-literal,
+.objectivec .hljs-number,
+.objectivec .hljs-built_in,
+.php .hljs-literal,
+.php .hljs-number,
+.python .hljs-number,
+.ruby .hljs-prompt,
+.ruby .hljs-constant,
+.ruby .hljs-number,
+.ruby .hljs-subst .hljs-keyword,
+.ruby .hljs-symbol,
+.rust .hljs-number,
+.sql .hljs-number,
+.puppet .hljs-function,
+.less .hljs-number,
+.less .hljs-hexcolor,
+.less .hljs-function,
+.less .hljs-attribute,
+.scss .hljs-preprocessor,
+.scss .hljs-number,
+.scss .hljs-hexcolor,
+.scss .hljs-function,
+.scss .hljs-attribute,
+.stylus .hljs-number,
+.stylus .hljs-hexcolor,
+.stylus .hljs-attribute,
+.stylus .hljs-params,
+.go .hljs-built_in,
+.go .hljs-constant,
+.swift .hljs-built_in,
+.swift .hljs-number {
+  color: #0086b3;
+}
+
+.apache .hljs-tag,
+.cs .hljs-xmlDocTag,
+.css .hljs-tag,
+.xml .hljs-title,
+.stylus .hljs-tag {
+  color: #63a35c;
+}
+
+.bash .hljs-variable,
+.cs .hljs-preprocessor,
+.cs .hljs-preprocessor .hljs-keyword,
+.css .hljs-attr_selector,
+.css .hljs-value,
+.ini .hljs-value,
+.ini .hljs-keyword,
+.javascript .hljs-tag .hljs-title,
+.makefile .hljs-constant,
+.nginx .hljs-variable,
+.xml .hljs-tag,
+.scss .hljs-variable {
+  color: #333333;
+}
+
+.bash .hljs-title,
+.coffeescript .hljs-title,
+.cpp .hljs-title,
+.c .hljs-title,
+.cs .hljs-title,
+.css .hljs-id,
+.css .hljs-class,
+.css .hljs-pseudo,
+.ini .hljs-title,
+.haskell .hljs-title,
+.haskell .hljs-pragma,
+.java .hljs-title,
+.javascript .hljs-title,
+.makefile .hljs-title,
+.objectivec .hljs-title,
+.perl .hljs-sub,
+.php .hljs-title,
+.python .hljs-decorator,
+.python .hljs-title,
+.ruby .hljs-parent,
+.ruby .hljs-title,
+.rust .hljs-title,
+.xml .hljs-attribute,
+.puppet .hljs-title,
+.less .hljs-id,
+.less .hljs-pseudo,
+.less .hljs-class,
+.scss .hljs-id,
+.scss .hljs-pseudo,
+.scss .hljs-class,
+.stylus .hljs-class,
+.stylus .hljs-id,
+.stylus .hljs-pseudo,
+.stylus .hljs-title,
+.swift .hljs-title,
+.diff .hljs-chunk {
+  color: #795da3;
+}
+
+.coffeescript .hljs-reserved,
+.coffeescript .hljs-attribute {
+  color: #1d3e81;
+}
+
+.diff .hljs-chunk {
+  font-weight: bold;
+}
+
+.diff .hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.diff .hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.markdown .hljs-link_url {
+  text-decoration: underline;
+}

docs/css/style.css

@@ -0,0 +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(255,154,25,.2);border-radius:4px;opacity:0;left:-8px;right:-8px;top:-10px;bottom:-4px;position:absolute;z-index:-1;transition:all .3s .7s linear}.nav,.nav-wrap{top:0;bottom:0}article h2.-hilited-:after,article h3.-hilited-:after{opacity:1}.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}

docs/jade/layout.jade

@@ -0,0 +1,36 @@
+include mixins/example
+include mixins/example-content
+include mixins/example-code
+include mixins/example-inline
+include mixins/param
+include mixins/param-header
+
+doctype html
+html
+	head
+		title Air Datepicker
+		meta(charset='UTF-8')
+		link(href='css/style.css', rel='stylesheet', type='text/css')
+		link(href='css/github-gist.css', rel='stylesheet', type='text/css')
+		link(href='../dist/css/datepicker.min.css', rel='stylesheet', type='text/css')
+		link(href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&subset=latin,cyrillic', rel='stylesheet', type='text/css')
+		script(src='../bower_components/jquery/dist/jquery.min.js')
+		script(src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js')
+		script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
+		script(src='../dist/js/datepicker.js')
+		script(src='../dist/js/i18n/datepicker.en.js')
+
+	body
+		div.wrapper
+			main.main(role='main')
+				.container
+					block content
+
+		script(src='js/navigation.js')
+		script.
+			var $code = $('code');
+			$code.each(function (i, el) {
+				hljs.highlightBlock(el);
+			})
+
+			navigation.init();

docs/jade/mixins/example-code.jade

@@ -0,0 +1,4 @@
+mixin example-code(cl)
+	pre.example-code
+		code(class=cl)
+			block

docs/jade/mixins/example-content.jade

@@ -0,0 +1,3 @@
+mixin example-content()
+	.example-content
+		block

docs/jade/mixins/example-inline.jade

@@ -0,0 +1,4 @@
+mixin example-inline(content, type)
+	span.example-inline
+		code(class= type).
+			#{content}

docs/jade/mixins/example.jade

@@ -0,0 +1,4 @@
+mixin example()
+	.example
+		.example--label Пример
+		block

docs/jade/mixins/param-header.jade

@@ -0,0 +1,14 @@
+mixin param-header(name, type, defaults)
+	header.param-header
+		h3= name
+		if type
+			p.param-header--row
+				span.param-header--label Тип:
+				+example-inline(type, 'js')
+		if (defaults || block)
+			p.param-header--row
+				span.param-header--label Значение по умполчанию:
+				if defaults
+					+example-inline(defaults, 'js')
+				if block
+					block

docs/jade/mixins/param.jade

@@ -0,0 +1,5 @@
+mixin param(content, type)
+	span.param-inline
+		strong= content
+		if type
+			i= type

docs/jade/pages/index-ru.jade

@@ -0,0 +1,606 @@
+extends ../layout
+
+block content
+	h1.promo-header
+		| AIR DATEPICKER
+		span легкий кроссбраузерный jQuery календарь
+
+	p.-text-center-
+		.datepicker-here.datepicker-promo
+		script.
+			var $promo = $('.datepicker-promo');
+
+			$promo.datepicker()
+
+
+	article
+		h2#intro Описание
+		p
+			|Легкий (<strong>~20kb</strong> минифицированный js файл и <strong>~5.5kb</strong> gziped) кроссбраузерный календарь, написан с использованием
+			+example-inline('es5')
+			| и
+			+example-inline('css flexbox', 'js')
+			|. Работает во всех современных браузерах:
+			| <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.
+
+	article
+		h2#install Установка
+		+example-code('html') bower i --save air-datepicker
+		p Либо можно скачать файлы напрямую с <a href="">GitHub</a>
+
+	article
+		h2#usage Использование
+		p
+			|Подключите стили и скрипты из папки
+			+example-inline('/dist')
+			| :
+
+		+example-code('html')
+			:code
+				<html>
+					<head>
+						<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
+						<script src="dist/js/datepicker.min.js"></script>
+					</head>
+				</html>
+		p
+			| Календарь автоматически проинициализируется на элементах с классом
+			+example-inline('.datepicker-here', 'css')
+			| , при этом опции можно передать через
+			+example-inline('data', 'html')
+			| атрибуты.
+		+example-code('html')
+			:code
+				<input type='text' class="datepicker-here" data-position="right top" />
+		h3 Ручная инициализация
+		+example-code('js').
+			// Инициализация
+			$('#my-element').datepicker([options])
+
+			// Доступ к экземпляру объекта
+			$('#my-element').data('datepicker')
+
+	article
+		h2#examples Примеры
+		h3 Инициализация с опциями по умолчанию
+		+example
+			+example-content
+				input(type='text').datepicker-here
+			+example-code('html')
+				:code
+					<input type='text' class='datepicker-here' />
+
+		h3 Выбор нескольких дат
+		p
+			| Передайте параметр
+			+example-inline('{multipleDates: true}','js')
+			| для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число
+			+example-inline('{multipleDates: 3}','js')
+			| .
+		+example
+			+example-content
+				input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='top left').datepicker-here
+			+example-code('html')
+				:code
+					<input type="text"
+						class="datepicker-here"
+						data-multiple-dates="3"
+						data-multiple-dates-separator=", "
+						data-position='right top'/>
+
+		h3 Постоянно видимый календарь
+		p
+			| Проинициализируйте плагин на элементе, который не является текстовым полем, например на
+			+example-inline('<div> …  </div>', 'html')
+			| , либо передайте параметр
+			+example-inline('{inline: true}', 'js')
+			| .
+		+example
+			+example-content
+				div.datepicker-here
+			+example-code('html')
+				:code
+					<div class="datepicker-here"></div>
+
+		h3 Выбор месяца
+		+example
+			+example-content
+				input.datepicker-here(type='text' data-min-view='months' data-view='months' data-date-format='MM yyyy')
+			+example-code('html')
+				:code
+					<input type="text"
+						class="datepicker-here"
+						data-min-view="months"
+						data-view="months"
+						data-date-format="MM yyyy" />
+
+		h3 Минимальная и максимальные даты
+		p
+			| Чтобы ограничить выбор даты, используйте
+			+example-inline('minDate', 'js')
+			| и
+			+example-inline('maxDate', 'js')
+			| , которым нужно передать объект даты.
+		+example
+			+example-content
+				input#minMaxExample(type='text')
+				script.
+					$('#minMaxExample').datepicker({
+						minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
+					})
+			+example-code('js').
+				$('#minMaxExample').datepicker({
+					minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
+				})
+
+		h3 Диапозон дат
+		p.
+			По умолчанию в плагине нет встроенного механизма выбора диапозона дат для нескольких текстовых полей.
+			Тем не менее это можно сделть вручную.
+		+example
+			+example-content
+				div.range-example
+					input(type='text' placeholder='Начало')#start
+					span &ndash;
+					input(type='text' placeholder='Конец')#end
+
+				script.
+					var $start = $('#start'),
+							$end = $('#end');
+
+					$start.datepicker({
+						onSelect: function (fd, date) {
+							$end.data('datepicker')
+									.update('minDate', date)
+						}
+					})
+
+					$end.datepicker({
+						onSelect: function (fd, date) {
+							$start.data('datepicker')
+									.update('maxDate', date)
+						}
+					})
+
+			+example-code('js').
+				var $start = $('#start'),
+					$end = $('#end');
+
+					$start.datepicker({
+						onSelect: function (fd, date) {
+							$end.data('datepicker')
+								.update('minDate', date)
+						}
+					})
+
+					$end.datepicker({
+						onSelect: function (fd, date) {
+							$start.data('datepicker')
+								.update('maxDate', date)
+						}
+					})
+
+	article
+		h2#localization Локализация
+		p
+			| Вы можете добавить свою локализацию в объект
+			+example-inline('Datepicker.language["my-lang"]', 'js')
+			| и при вызове календаря передать название языка в параметр
+			+example-inline('language', 'js')
+
+		+example-code('js').
+			Datepicker.language['my-lang'] = {...}
+
+			$('.my-datepicker').datepicker({
+				language: 'my-lang'
+			})
+
+		p
+			| Также объект локализации можно передавать непосредственно в
+			+example-inline('language', 'js')
+
+		+example-code('js').
+			$('.my-datepicker').datepicker({
+				language: {
+					days: [...]
+					...
+				}
+			})
+
+		p Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию.
+
+		h3 Пример объекта локализации
+		+example-code('js').
+			Datepicker.language['ru'] =  {
+				days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
+				daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+				daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+				months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
+				monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+				today: 'Сегодня',
+				clear: 'Очистить',
+				dateFormat: 'dd.mm.yyyy',
+				firstDay: 1
+			};
+
+	article
+		h2#options Опции
+
+		.param
+			+param-header('inline', 'boolean', 'false')
+			p Если true, то календарь будет виден постоянно.
+
+		.param
+			+param-header('language', 'string|object', '"ru"')
+			p
+				| Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте
+				+example-inline('Datepicker.language', 'js')
+				| Если передан объект, то данные будут браться из него.
+			p Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.
+
+		.param
+			+param-header('startDate', 'Date', 'new Date()')
+			p Какую дату нужно показывать при инициализации календаря.
+
+		.param
+			+param-header('firstDay', 'number', '""')
+			p.
+				Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
+				По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
+
+		.param
+			+param-header('weekends', 'array', '[6, 0]')
+			p
+				| Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс
+				+example-inline('.-weekend-','css')
+				| . По умолчанию это суббота и воскресенье.
+
+		.param
+			+param-header('dateFormat', 'string', '""')
+			p Формат даты, кобминация из d, m, yyyy, D, M, и т.д.  По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
+			ul
+				li
+					+param('d')
+					| - дата
+				li
+					+param('dd')
+					| - дата с лидирующем нулем
+				li
+					+param('D')
+					| - сокращенное наименование дня
+				li
+					+param('DD')
+					| - полное наименование дня
+				li
+					+param('m')
+					| - номер мясяца
+				li
+					+param('mm')
+					| - номер месяца с лидирующем нулем
+				li
+					+param('M')
+					| - сокращенное наименовение месяца
+				li
+					+param('MM')
+					| - полное наименовение месяца
+				li
+					+param('yy')
+					| - сокращенный номер года
+				li
+					+param('yyyy')
+					| - полный номер года
+				li
+					+param('yyyy1')
+					| - первый год декады, в которую входит текущий год
+				li
+					+param('yyyy2')
+					| - последний год декады, в которую входит текущий год
+
+		.param
+			+param-header('toggleSelected', 'boolean', 'true')
+			p Если true, то клик на выделенной дате снимет выделение.
+
+		.param
+			+param-header('position', 'string', '"bottom left"')
+			p
+				| Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
+				| воторым - положение на этой оси. Например
+				+example-inline('{position: "right top"}', 'js')
+				| - утсановит позицию клаендаря справа вверху от текстового поля.
+
+		.param
+			+param-header('offset','number', 12)
+			p Отступ от основной оси позиционирования.
+
+		.param
+			+param-header('view', 'string', '"days"')
+			p Начальный вид календаря. Возможноые значения:
+				ul
+					li
+						+example-inline('days','js')
+						| - отображение дней месяца
+					li
+						+example-inline('months','js')
+						| - отображение месяцев одного года
+					li
+						+example-inline('years','js')
+						| - отображение годов одной декады
+
+		.param
+			+param-header('minView', 'string', '"days"')
+			p
+				| Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
+				| Возможные значения такие же как и у параметра
+				+example-inline('view')
+				| .
+
+		.param
+			+param-header('showOtherMonths', 'boolean', 'true')
+			p Если true, то будут отображаться дни других месяцев.
+
+		.param
+			+param-header('selectOtherMonths', 'boolean', 'true')
+			p Если true, то можно будет выбрать дни из других месяцев.
+
+		.param
+			+param-header('moveToOtherMonthsOnSelect', 'boolean', 'true')
+			p Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
+
+		.param
+			+param-header('showOtherYears', 'boolean', 'true')
+			p Если true, то при отображении декады, будут показаны годы из других декад.
+
+		.param
+			+param-header('selectOtherYears', 'boolean', 'true')
+			p Если true, то можно будет выбрать года из других декад
+
+		.param
+			+param-header('moveToOtherYearsOnSelect', 'boolean', 'true')
+			p Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
+
+		.param
+			+param-header('minDate', 'Date', '""')
+			p Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
+
+		.param
+			+param-header('maxDate', 'Date', '""')
+			p Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
+
+		.param
+			+param-header('disableNavWhenOutOfRange', 'boolean', 'true')
+			p Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
+
+		.param
+			+param-header('multipleDates', 'boolean|number', 'false')
+			p Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
+
+		.param
+			+param-header('multipleDatesSeparator', 'string', '","')
+			p Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку.
+
+		.param
+			+param-header('todayButton', 'boolean', 'false')
+			p Если true, то будет отображена кнопка "Сегодня".
+
+		.param
+			+param-header('clearButton', 'boolean', 'false')
+			p Если true, то будет отображена кнопка "Очистить".
+
+		.param
+			+param-header('showEvent','string','"focus"')
+			p Тип события, по наступлению которого будет показан календарь.
+
+		.param
+			+param-header('autoClose', 'boolean', 'false')
+			p Если true, то при активации даты, календарь закроется.
+
+		.param
+			+param-header('prevHtml', 'string', '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>')
+			p Контент кнопки 'предыдущий месяц|год|декада'.
+
+		.param
+			+param-header('nextHtml', 'string', '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>')
+			p Контент кнопки 'следующий месяц|год|декада'.
+
+		.param
+			+param-header('navTitles', 'object')
+				+example-code('js')
+					:code
+						navTitles = {
+							days: 'MM, <i>yyyy</i>',
+							months: 'yyyy',
+							years: 'yyyy1 - yyyy2'
+						};
+			p
+				| Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и в
+				+example-inline('dateFormat', 'js')
+				| . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.
+			+example-code('js')
+				:code
+					$('#my-datepicker').datepicker({
+						navTitles: {
+							days: '<h3>Выберете дату заезда</h3> MM, yyyy'
+						}
+					})
+		.param
+			+param-header('monthsField','string','"monthsShort"')
+			p Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.
+
+	article
+		h2#events События
+		.param
+			+param-header('onSelect(formattedDate, date, inst)', 'function', 'null')
+			p Функция обратного вызова при выборе даты.
+			ul
+				li
+					+param('formattedDate', 'string')
+					| - отформатированная дата.
+				li
+					+param('date', 'Date|array')
+					| - объект
+					+example-inline('Date', 'js')
+					| выбранной даты, если
+					+example-inline('{multipleDates: true}', 'js')
+					| , то будет передан массив таких объектов.
+				li
+					+param('inst','object')
+					| - экземпляр плагина.
+
+		.param
+			+param-header('onChangeMonth(month, year)','function','null')
+			p Функция обратного вызова при изменении месяца.
+			ul
+				li
+					+param('month','number')
+					| - номер месяца (от 0 до 12), к которому осуществлен переход.
+				li
+					+param('year','number')
+					| - номер года, к которому осуществлен переход.
+
+		.param
+			+param-header('onChangeYear(year)','function', 'null')
+			p Функция обратного вызова при изменении года.
+			ul
+				li
+					+param('year','number')
+					| - номер года, к которому осуществлен переход
+
+		.param
+			+param-header('onChangeDecade(decade)','function', 'null')
+			p Функция обратного вызова при изменении декады.
+			ul
+				li
+					+param('decade','array')
+					| - массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.
+
+		.param
+			+param-header('onChangeView(view)', 'function', 'null')
+			p Функция обратного вызова при изменении вида календаря
+			ul
+				li
+					+param('view', 'string')
+					| - вид, к которому осуществлен переход (days, months, years).
+
+		.param
+			+param-header('onRenderCell(date, cellType)', 'function', 'null')
+			p Функция обратного вызова при отрисовке ячейки календаря.
+			ul
+				li
+					+param('date', 'Date')
+					| - объект даты текущей ячейки
+				li
+					+param('cellType', 'string')
+					| - тип текущей ячейки (day, month, year).
+			p Функция должна возвращать объект, которой может состоять из трех полей:
+			+example-code('js').
+				{
+					html: '', // Кастомный контент ячейки
+					classes: '', // Дополнительные классы для ячейки
+					disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
+				}
+			h4 Пример
+			+example-code('js').
+				$('#my-datepicker').datepicker({
+					// Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class'
+					// и делает их невозможными к выбору.
+					onRenderCell: function(date, cellType) {
+						if (cellType == 'day' && date.getDate() == 4) {
+							return {
+								classes: 'my-class',
+								disabled: true
+							}
+						}
+					}
+				})
+
+	article
+		h2#api API
+		p
+			| Досутп к экземпляру плагина осуществляется через
+			+example-inline('data')
+			| атрибут.
+		+example-code('js').
+			var myDatepicker = $('#my-elem').datepicker().data('datepicker');
+
+			myDatepicker.show();
+
+		.param
+			+param-header('show()')
+			p Показывает календарь.
+
+		.param
+			+param-header('hide()')
+			p Скрывает календарь.
+
+		.param
+			+param-header('next()')
+			p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
+
+		.param
+			+param-header('prev()')
+			p Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.
+
+		.param
+			+param-header('selectDate(date)')
+			ul
+				li
+					+param('date','Date')
+					| - дата в формате JavaScript
+					+example-inline('Date()', 'js')
+			p
+				| Выбирает переданную дату. Если
+				+example-inline('{multipleDates: false}','js')
+				| и уже есть активная дата, то она будет деактивирована. Если
+				+example-inline('{multipleDates: true}','js')
+				| то будет добавлена еще одна активная дата.
+
+		.param
+			+param-header('removeDate(date)')
+			ul
+				li
+					+param('date','Date')
+					| - дата в формате JavaScript
+					+example-inline('Date()', 'js')
+			p
+				| Снимает выделение с переданной даты.
+
+		.param
+			+param-header('update(field[, value])')
+			ul
+				li
+					+param('field','string|object')
+					| - название поля значение которого нужно обновить.
+				li
+					+param('field','string|*')
+					| - новое значение параметра
+			p.
+				Обновление опций календаря, после вызова метода он автоматически перерисуется.
+				Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями.
+
+			+example-code('js').
+				var datepicker = $('#my-elem').datepicker().data('datepicker');
+
+				// Обновление одного параметра
+				datepicker.update('minDate', new Date())
+
+				// Обновление нескольких параметров
+				datepicker.update({
+					position: "top right",
+					maxDate: new Date(),
+					todayButton: true
+				})
+
+		.param
+			+param-header('view')
+			p Устанавливает новое представление для календаря.
+			+example-code('js').
+				datepicker.view = 'months';
+
+		.param
+			+param-header('date')
+			p
+				| Устанавливает новую отображаемую дату, нужно передать JavaScript
+				+example-inline('Date()')
+
+			+example-code('js').
+				datepicker.date = new Date();

docs/sass/_docs.scss

@@ -0,0 +1,379 @@
+/* -------------------------------------------------
+    Page styles
+   ------------------------------------------------- */
+
+$fontFamily: Tahoma, sans-serif;
+
+html {
+  color: #333;
+  font-family: $fontFamily;
+  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: normal;
+  color: #939393;
+  font-size: 16px;
+  margin: 24px 0 0;
+}
+
+article {
+  h2, h3 {
+    position: relative;
+    z-index: 1;
+
+    &:after {
+      content: '';
+      background: rgba(#FF9A19, .2);
+      border-radius: 4px;
+      opacity: 0;
+      left: -8px;
+      right: -8px;
+      top: -10px;
+      bottom: -4px;
+      position: absolute;
+      z-index: -1;
+      transition: all .3s .7s linear;
+    }
+
+    &.-hilited- {
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1px 0;
+
+  article {
+    margin: 60px 0 30px;
+  }
+  
+  @media all and (max-width: 1525px) {
+    margin-left: 270px;
+  }
+
+  @media all and (max-width: 1280px) {
+    margin-right: 20px;
+  }
+
+  @media all and (max-width: 650px) {
+    margin-right: 20px;
+    margin-left: 20px;
+  }
+}
+
+.-text-center- {
+  text-align: center;
+}
+
+input[type='text'] {
+  outline: none;
+  height: 32px;
+  border: 1px solid #b5b5b5;
+  padding: 0 8px;
+  margin: 0 0 14px;
+  color: #444;
+  font-family: $fontFamily;
+  transition: all .2s;
+  width: 250px;
+
+  &:focus {
+    border-color: #ffd75c;
+  }
+}
+
+ul {
+  margin: 0 0 16px;
+  li {
+    list-style: none;
+    margin-bottom: 8px;
+  }
+}
+
+/*  Example
+   ------------------------------------------------- */
+
+%example-label {
+  background: #ececec;
+  border-radius: 0 0 4px 4px;
+  position: absolute;
+  padding: 4px 12px;
+  right: 8px;
+  top: 0;
+}
+
+$exampleBorderRadius: 4px;
+
+.hljs {
+  font-family: Consolas, monospace;
+  line-height: 1.2;
+  tab-size: 4;
+}
+
+.example {
+  border: 1px solid #ececec;
+  border-radius: $exampleBorderRadius;
+  position: relative;
+  margin: 16px 0;
+
+  .example-code {
+    border: none;
+    border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius;
+    border-top: 1px solid #ececec;
+    margin: 0;
+  }
+}
+
+.example-inline {
+  background: red;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 4px;
+
+  .hljs {
+    padding: 0 4px;
+  }
+}
+
+.example--label {
+  @extend %example-label;
+}
+
+.example-content {
+  padding: 32px;
+
+  h1, h2, h3 {
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  >*:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
+a {
+  color: #47A6EC;
+
+  &:hover {
+    color: #ff767e;
+  }
+}
+
+.example-code  {
+  border: 1px solid #ddd;
+  border-radius: $exampleBorderRadius;
+  overflow: hidden;
+  margin: 16px 0;
+  font-size: 13px;
+
+  code {
+    padding: 16px 32px;
+  }
+}
+
+//  Param
+// -------------------------------------------------
+
+
+.param-inline {
+  font-family: Consolas, monospace;
+  strong {
+    background: #efefef;
+    color: #333;
+    border-radius: $exampleBorderRadius;
+    font-weight: normal;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 3px 6px 4px;
+    margin-right: 4px;
+  }
+
+  i {
+    color: #838383;
+    font-size: .95em;
+    font-style: normal;
+    font-weight: 100;
+    font-family: 'Fira Sans', sans-serif;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 4px;
+  }
+}
+
+//  Promo block
+// -------------------------------------------------
+
+.promo-header {
+  font-size: 48px;
+  font-weight: 100;
+  text-align: center;
+
+  span {
+    display: block;
+    font-size: .5em;
+  }
+}
+
+.datepicker-promo {
+  text-align: center;
+
+  .datepicker-inline {
+    display: inline-block;
+  }
+}
+
+//  Range example
+// -------------------------------------------------
+
+.range-example {
+  input[type='text'] {
+    width: 150px;
+  }
+  span {
+    display: inline-block;
+    margin: 0 8px;
+  }
+}
+
+//  Param header
+// -------------------------------------------------
+
+.param-header {
+  margin-bottom: 8px;
+  h3 {
+    margin-bottom: 2px;
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+  }
+}
+
+.param-header--row {
+
+}
+
+.param {
+  margin-bottom: 32px;
+}
+
+.param-header--label {
+  color: #707070;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+//  Navigation
+// -------------------------------------------------
+
+.nav-wrap {
+  background: #fff;
+  position: fixed;
+  overflow: hidden;
+  width: 250px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
+
+  @media all and (max-width: 650px) {
+    display: none;
+  }
+
+  &:after, &:before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 28px;
+  }
+
+  &:after {
+    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
+    bottom: 0;
+  }
+}
+
+.nav {
+  position: absolute;
+  padding: 18px;
+  right: -20px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  overflow: auto;
+}
+
+.nav--section {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.nav--section-title {
+  line-height: 1;
+  font-size: 22px;
+  margin: 0 0 8px;
+
+  a {
+    color: #000;
+    text-decoration: none;
+
+    &:hover {
+      color: #ff767e;
+    }
+  }
+}
+.nav--subsection {
+  margin-left: 2px;
+}
+
+.nav--subsection-title {
+  font-size: 13px;
+  margin: 0 0 8px;
+  font-weight: normal;
+  font-family: Tahoma, sans-serif;
+
+
+  a {
+    color: #787878;
+    text-decoration: none;
+
+    &:hover {
+      color: #ff767e;
+    }
+  }
+}

docs/sass/_reset.scss

@@ -0,0 +1,82 @@
+/* -------------------------------------------------
+    Reset
+   ------------------------------------------------- */
+
+applet, object, iframe, p,
+blockquote, pre, a, abbr, acronym, address, big,
+cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, sub, sup, tt, var, u, i, center, dl,
+dt, dd, ol, ul, li, fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, figure, figcaption,
+footer, header, menu, nav, output, ruby, section,
+summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+body {
+  margin: 0;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*:after, *:before {
+  box-sizing: border-box;
+}
+
+//  HTML 5 roles for ie8/eie9
+// -------------------------------------------------
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//  Default font weight
+// -------------------------------------------------
+
+b, strong {
+  font-weight: bold;
+}
+
+//  Default font style
+// -------------------------------------------------
+
+i {
+  font-style: italic;
+}
+
+//  Remove link outline
+// -------------------------------------------------
+
+a {
+  outline: none;
+}
+
+//  Remove scroll in ie
+// -------------------------------------------------
+
+textarea {
+  overflow: auto;
+}

docs/sass/init.scss

@@ -0,0 +1,2 @@
+@import "reset";
+@import "docs";