add examples, begin options section, fix localization option

dist/js/datepicker.js

@@ -145,10 +145,12 @@ var Datepicker;
                 this.loc = Datepicker.language[lang];
                 if (!this.loc) {
                     console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
-                    this.loc = Datepicker.language.ru
+                    this.loc = $.extend(true, {}, Datepicker.language.ru)
                 }
+
+                this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
             } else {
-                this.loc = $.extend({}, Datepicker.language.ru, lang)
+                this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
             }
 
             if (this.opts.dateFormat) {
@@ -418,7 +420,7 @@ var Datepicker;
                     return _this.formatDate(format, date)
                 });
 
-            value.join(this.opts.multipleDatesSeparator);
+            value = value.join(this.opts.multipleDatesSeparator);
 
             this.$el.val(value)
         },

index-ru.html

@@ -3,7 +3,80 @@ $('#my-element').datepicker([options])
 
 // Доступ к экземпляру объекта
 $('#my-element').data('datepicker')
-</code></pre><h2>Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type='text' class='datepicker-here' /&gt;</code></pre></div></div></main></div><script>var $code = $('code');
+</code></pre><h2>Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type='text' class='datepicker-here' /&gt;
+</code></pre></div><h3>Выбор нескольких дат</h3><p>Передайте параметр<span class="example-inline"><code class="js">{multipleDates: true}</code></span>для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число<span class="example-inline"><code class="js">{multipleDates: 3}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-multiple-dates="3" data-multiple-dates-separator=", " class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
+	class=&quot;datepicker-here&quot;
+	data-multiple-dates=&quot;3&quot;
+	data-multiple-dates-separator=&quot;, &quot; /&gt;
+</code></pre></div><h3>Постоянно видимый календарь</h3><p>Проинициализируйте плагин на элементе, который не является текстовым полем, например на<span class="example-inline"><code class="html">&lt;div&gt; …  &lt;/div&gt;</code></span>, либо передайте параметр<span class="example-inline"><code class="js">{inline: true}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="datepicker-here"></div></div><pre class="example-code"><code class="html">&lt;div class=&quot;datepicker-here&quot;&gt;&lt;/div&gt;
+</code></pre></div><h3>Выбор месяца</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-min-view="months" data-view="months" data-date-format="MM yyyy" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
+	class=&quot;datepicker-here&quot;
+	data-min-view=&quot;months&quot;
+	data-view=&quot;months&quot;
+	data-date-format=&quot;MM yyyy&quot; /&gt;
+</code></pre></div><h3>Минимальная и максимальные даты</h3><p>Чтобы ограничить выбор даты, используйте<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span>, которым нужно передать объект даты.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input id="minMaxExample" type="text"><script>$('#minMaxExample').datepicker({
+	minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
+})</script></div><pre class="example-code"><code class="js">$('#minMaxExample').datepicker({
+	minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
+})
+</code></pre></div><h3>Диапозон дат</h3><p>По умолчанию в плагине нет встроенного механизма выбора диапозона дат для нескольких текстовых полей.
+Тем не менее это можно сделть вручную.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="range-example"><input type="text" placeholder="Начало" id="start"><span>&ndash;</span><input type="text" placeholder="Конец" id="end"></div><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)
+	}
+})
+</script></div><pre class="example-code"><code class="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)
+		}
+	})
+</code></pre></div><article><h2>Локализация</h2><p>Вы можете добавить свою локализацию в объект<span class="example-inline"><code class="js">Datepicker.language[&quot;my-lang&quot;]</code></span>и при вызове календаря передать название языка в параметр<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">Datepicker.language['my-lang'] = {...}
+
+$('.my-datepicker').datepicker({
+	language: 'my-lang'
+})
+</code></pre><p>Также объект локализации можно передавать непосредственно в<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">$('.my-datepicker').datepicker({
+	language: {
+		days: [...]
+		...
+	}
+})
+</code></pre><p>Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию.</p><h3>Пример объекта локализации</h3><pre class="example-code"><code class="js">Datepicker.language['ru'] =  {
+	days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
+	daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+	daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+	months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
+	monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+	today: 'Сегодня',
+	clear: 'Очистить',
+	dateFormat: 'dd.mm.yyyy',
+	firstDay: 1
+};
+</code></pre><article><h2>Опции</h2><div class="param"><header class="param-header"><h3>inline</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">false</code></span></p></header><p>Если true, то календарь будет виден постоянно.</p></div><div class="param"><header class="param-header"><h3>language</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string|object</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">&quot;ru&quot;</code></span></p></header><p>Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте<span class="example-inline"><code class="js">Datepicker.language</code></span>Если передан объект, то данные будут браться из него.</p><p>Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.</p></div><div class="param"><header class="param-header"><h3>startDate</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">new Date()</code></span></p></header><p>Какую дату нужно показывать при инициализации календаря.</p></div><div class="param"><header class="param-header"><h3>firstDay</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">&quot;&quot;</code></span></p></header><p>Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
+По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
+</p></div><div class="param"><header class="param-header"><h3>weekends</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">array</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">[6, 0]</code></span></p></header><p>Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс<span class="example-inline"><code class="css">.-weekend-</code></span>. По умолчанию это суббота и воскресенье.</p></div><div class="param"><header class="param-header"><h3>dateFormat</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">&quot;&quot;</code></span></p></header><p>Формат даты, кобминация из d, m, yyyy, D, M, и т.д.  По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.</p><ul><li><span class="param"><strong>d</strong></span>- дата</li><li><span class="param"><strong>dd</strong></span>- дата с лидирующем нулем</li><li><span class="param"><strong>D</strong></span>- сокращенное наименование дня</li><li><span class="param"><strong>DD</strong></span>- полное наименование дня</li><li><span class="param"><strong>m</strong></span>- номер мясяца</li><li><span class="param"><strong>mm</strong></span>- номер месяца с лидирующем нулем</li><li><span class="param"><strong>M</strong></span>- сокращенное наименовение месяца</li><li><span class="param"><strong>MM</strong></span>- полное наименовение месяца</li><li><span class="param"><strong>yy</strong></span>- сокращенный номер года</li><li><span class="param"><strong>yyyy</strong></span>- полный номер года</li><li><span class="param"><strong>yyyy1</strong></span>- первый год декады, в которую входит текущий год</li><li><span class="param"><strong>yyyy2</strong></span>- последний год декады, в которую входит текущий год</li></ul></div><div class="param"><header class="param-header"><h3>toggleSelected</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то клик на выделенной дате снимет выделение.</p></div></article></article></div></main></div><script>var $code = $('code');
 $code.each(function (i, el) {
 	hljs.highlightBlock(el);
 })</script></body></html>

package.json

@@ -9,6 +9,7 @@
     "gulp-jade": "^1.1.0",
     "gulp-livereload": "^3.8.0",
     "gulp-minify-css": "^1.2.1",
+    "gulp-plumber": "^1.0.1",
     "gulp-postcss": "^6.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.0.4",

page/css/style.css

@@ -1 +1 @@
-.-text-center-,.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{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}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{border-radius:4px;outline:0;height:32px;border:1px solid silver;padding:0 8px;margin:0 0 14px;font-family:Tahoma,sans-serif;transition:all .2s}input[type=text]:focus{border-color:gold;box-shadow:0 0 8px rgba(0,0,0,.1)}.example--label{background:#f4f4f4;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{font-family:Consolas,monospace;line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ddd;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #eee;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding: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:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.example-code code{padding:16px 32px}.promo-header{font-size:48px;font-weight:100}.promo-header span{display:block;font-size:.5em}.promo-input{height:40px;margin:26px 0;width:300px}
+.-text-center-,.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{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}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{border-radius:4px;outline:0;height:32px;border:1px solid silver;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}input[type=text]:focus{border-color:gold;box-shadow:0 0 8px rgba(0,0,0,.1)}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#f4f4f4;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{font-family:Consolas,monospace;line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ddd;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #eee;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:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param i,.param strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param 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}.promo-input{height:40px;margin:26px 0;width:300px}.range-example input[type=text]{width:150px}.range-example span{display:inline-block;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;display:inline-block;vertical-align:middle}

page/jade/layout.jade

@@ -3,6 +3,7 @@ include mixins/example-content
 include mixins/example-code
 include mixins/example-inline
 include mixins/param
+include mixins/param-header
 
 doctype html
 html

page/jade/mixins/example-inline.jade

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

page/jade/mixins/param-header.jade

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

page/jade/pages/index-ru.jade

@@ -14,9 +14,9 @@ block content
 
 	h2 Использование
 	p
-		|Календарь автоматически проинициализируется на элементах с классом
+		| Календарь автоматически проинициализируется на элементах с классом
 		+example-inline('.datepicker-here', 'css')
-		|, при этом опции можно передать через
+		| , при этом опции можно передать через
 		+example-inline('data', 'html')
 		| атрибуты.
 	+example-code('html')
@@ -38,3 +38,233 @@ block content
 		+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=', ').datepicker-here
+		+example-code('html')
+			:code
+				<input type="text"
+					class="datepicker-here"
+					data-multiple-dates="3"
+					data-multiple-dates-separator=", " />
+
+	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 Локализация
+		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 Опции
+
+			.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, то клик на выделенной дате снимет выделение.
+

page/sass/_page.scss

@@ -54,8 +54,10 @@ input[type='text'] {
   border: 1px solid #c0c0c0;
   padding: 0 8px;
   margin: 0 0 14px;
+  color: #444;
   font-family: $fontFamily;
   transition: all .2s;
+  width: 250px;
 
   &:focus {
     border-color: gold;
@@ -63,6 +65,14 @@ input[type='text'] {
   }
 }
 
+ul {
+  margin: 0 0 16px;
+  li {
+    list-style: none;
+    margin-bottom: 8px;
+  }
+}
+
 /*  Example
    ------------------------------------------------- */
 
@@ -104,7 +114,7 @@ $exampleBorderRadius: 4px;
   margin: 0 4px;
 
   .hljs {
-    padding: 4px;
+    padding: 0 4px;
   }
 }
 
@@ -146,6 +156,34 @@ a {
   }
 }
 
+//  Param
+// -------------------------------------------------
+
+
+.param {
+  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
 // -------------------------------------------------
 
@@ -165,3 +203,45 @@ a {
   margin: 26px 0;
   width: 300px;
 }
+
+//  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;
+}

src/js/datepicker.js

@@ -145,10 +145,12 @@ var Datepicker;
                 this.loc = Datepicker.language[lang];
                 if (!this.loc) {
                     console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
-                    this.loc = Datepicker.language.ru
+                    this.loc = $.extend(true, {}, Datepicker.language.ru)
                 }
+
+                this.loc = $.extend(true, {}, Datepicker.language[lang], Datepicker.language.ru)
             } else {
-                this.loc = $.extend({}, Datepicker.language.ru, lang)
+                this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
             }
 
             if (this.opts.dateFormat) {
@@ -418,7 +420,7 @@ var Datepicker;
                     return _this.formatDate(format, date)
                 });
 
-            value.join(this.opts.multipleDatesSeparator);
+            value = value.join(this.opts.multipleDatesSeparator);
 
             this.$el.val(value)
         },

tasks/jade.js

@@ -1,9 +1,11 @@
 var gulp = require('gulp'),
+    plumber = require('gulp-plumber'),
     _jade =  require('gulp-jade/node_modules/jade'),
     jade = require('gulp-jade');
 
 _jade.filters.code = function( block ) {
     return block
+        .replace( /\…/g, '…'  )
         .replace( /&/g, '&'  )
         .replace( /</g, '&lt;'   )
         .replace( />/g, '&gt;'   )
@@ -14,6 +16,7 @@ _jade.filters.code = function( block ) {
 
 module.exports = function () {
     gulp.src('page/jade/pages/*.jade')
+        .pipe(plumber())
         .pipe(jade())
         .pipe(gulp.dest('./'))
 };