begin English timepicker docs

2026-01-14 11:01:22 +08:00 · 2016-03-23 11:39:15 +03:00 · 2016-03-23 11:39:15 +03:00 · c9b7cc4b7e
commit c9b7cc4b7e
parent 9e376d4b4c
6 changed files with 233 additions and 6 deletions
--- a/dist/js/i18n/datepicker.en.js
+++ b/dist/js/i18n/datepicker.en.js
@ -6,6 +6,7 @@ Datepicker.language['en'] = {
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    today: 'Today',
    clear: 'Clear',
-    dateFormat: 'mm/dd/yy',
+    dateFormat: 'mm/dd/yyyy',
+    timeFormat: 'hh:ii aa',
    firstDay: 0
 };
--- a/docs/index-ru.html
+++ b/docs/index-ru.html
@ -125,7 +125,7 @@ $picker.datepicker({
 // Сразу выберем какую-ниудь дату из `eventDates`
 var currentDate = currentDate = new Date();
 $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
-</code></pre></div></article><article><h2 id="timepicker">Выбор времени</h2><p>Для выбора времени используйте опцию<span class="example-inline"><code class="js">{timepicker: true}</code></span>- она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.</p><p>По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром<span class="example-inline"><code class="js">startDate</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div data-timepicker="true" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot;&gt;&lt;/div&gt;</code></pre></div><p><i>Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker'>Опциях</a>.</i></p><h3 id="timepicker-format">Формат времени</h3><p>Формат времени задается в объекте локализации, либо в парамтре<span class="example-inline"><code class="js">timeFormat</code></span>. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в<span class="example-inline"><code class="js">timeFormat</code></span>нужно добавить символ<span class="example-inline"><code class="js">aa</code></span>или<span class="example-inline"><code class="js">AA</code></span>. После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
+</code></pre></div></article><article><h2 id="timepicker">Выбор времени</h2><p>Для выбора времени используйте опцию<span class="example-inline"><code class="js">{timepicker: true}</code></span>- она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.</p><p>По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром<span class="example-inline"><code class="js">startDate</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div data-timepicker="true" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot;&gt;&lt;/div&gt;</code></pre></div><p><i>Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker' class='nav-link'>Опциях</a>.</i></p><h3 id="timepicker-format">Формат времени</h3><p>Формат времени задается в объекте локализации, либо в парамтре<span class="example-inline"><code class="js">timeFormat</code></span>. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в<span class="example-inline"><code class="js">timeFormat</code></span>нужно добавить символ<span class="example-inline"><code class="js">aa</code></span>или<span class="example-inline"><code class="js">AA</code></span>. После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
 </code></pre></div><h3 id="timeformat-actions">Действия со временем</h3><p>Для задания максимально/минимально возможных значений часов или минут используйте параметры<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. Также время можно указывать в парамтерах<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span></p><p>Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Зададим стартовую дату
 var start = new Date(),
 	startHours = 9;
--- a/docs/index.html
+++ b/docs/index.html
@ -128,6 +128,87 @@ $picker.datepicker({
 // Select initial date from `eventDates`
 var currentDate = currentDate = new Date();
 $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+</code></pre></div></article><article><h2 id="timepicker">Timepicker</h2><p>To enable timepicker use option<span class="example-inline"><code class="js">{timepicker: true}</code></span>- it will add current time and a couple of range sliders by which one can pick time.</p><p>By default current user time will be set. This value can be changed by<span class="example-inline"><code class="js">startDate</code></span>parameter.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-timepicker="true" data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><p><i>More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.</i></p><h3 id="timepicker-format">Time format</h3><p>Time format is defined in localization object or in<span class="example-inline"><code class="js">timeFormat</code></span>parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add<span class="example-inline"><code class="js">aa</code></span>or<span class="example-inline"><code class="js">AA</code></span>symbol in<span class="example-inline"><code class="js">timeFormat</code></span>. After what 'AM' and 'PM' sings will appear in timepicker widget.</p><p>Lets use 12 hours mode in Russian language:</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
+</code></pre></div><h3 id="timeformat-actions">Действия со временем</h3><p>Для задания максимально/минимально возможных значений часов или минут используйте параметры<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. Также время можно указывать в парамтерах<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span></p><p>Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Зададим стартовую дату
+var start = new Date(),
+		startHours = 9;
+
+// 09:00
+start.setHours(9);
+start.setMinutes(0);
+
+// Если сегодня суббота или воскресенье - 10:00
+if ([6, 0].indexOf(start.getDay()) != -1) {
+	start.setHours(10);
+	startHours = 10
+}
+
+$('#timepicker-actions-exmpl').datepicker({
+	timepicker: true,
+	startDate: start,
+	minHours: startHours,
+	maxHours: 18,
+	onSelect: function (fd, d, picker) {
+		// Ничего не делаем если выделение было снято
+		if (!d) return;
+
+		var day = d.getDay();
+		// Если выбранный день суббота или воскресенье, то устанавливаем
+		// часы для выходных, в противном случае восстанавливаем начальные значения
+		if (day == 6 || day == 0) {
+			picker.update({
+				minHours: 10,
+				maxHours: 16
+			})
+		} else {
+			picker.update({
+				minHours: 9,
+				maxHours: 18
+			})
+		}
+	}
+})</script></div><pre class="example-code"><code>&lt;input type='text' id='timepicker-actions-exmpl' /&gt;
+&lt;script&gt;
+	// Зададим стартовую дату
+	var start = new Date(),
+		startHours = 9;
+
+	// 09:00
+	start.setHours(9);
+	start.setMinutes(0);
+
+	// Если сегодня суббота или воскресенье - 10:00
+	if ([6,0].indexOf(start.getDay()) != -1) {
+		start.setHours(10);
+		startHours = 10
+	}
+
+	$('&#35;timepicker-actions-exmpl').datepicker({
+		timepicker: true,
+		startDate: start,
+		minHours: startHours,
+		maxHours: 18,
+		onSelect: function(fd, d, picker) {
+			// Ничего не делаем если выделение было снято
+			if (!d) return;
+
+			var day = d.getDay();
+			// Если выбранный день суббота или воскресенье, то устанавливаем
+			// часы для выходных, в противном случае восстанавливаем начальные значения
+			if (day == 6 || day == 0) {
+				picker.update({
+					minHours: 10,
+					maxHours: 16
+				})
+			} else {
+				picker.update({
+					minHours: 9,
+					maxHours: 18
+				})
+			}
+		}
+	})
+&lt;/script&gt;
 </code></pre></div></article><article><h2 id="localization">Localization</h2><p>You can add your localization to object<span class="example-inline"><code class="js">Datepicker.language[&quot;my-lang&quot;]</code></span>and pass it name to parameter<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">// Add custom localization
 Datepicker.language['my-lang'] = {...}

@ -147,7 +228,8 @@ $('.my-datepicker').datepicker({
 	monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
 	today: 'Today',
 	clear: 'Clear',
-	dateFormat: 'mm/dd/yy',
+	dateFormat: 'mm/dd/yyyy',
+	timeFormat: 'hh:ii aa'
 	firstDay: 0
 };</code></pre><p>Available localizations located in<span class="example-inline"><code class="js">dist/js/i18n</code></span>directory.</p></article><article><h2 id="options">Options</h2><div class="param"><header class="param-header"><h3>classes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;&quot;</code></span></p></header><p>Extra css classes for datepicker.</p></div><div class="param"><header class="param-header"><h3>inline</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If true, then datepicker will be always visible.</p></div><div class="param"><header class="param-header"><h3>language</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string|object</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;ru&quot;</code></span></p></header><p>Datepicker's language. If string is passed, then language will be searched in<span class="example-inline"><code class="js">Datepicker.language</code></span>object.
 If object is passed, then data will be taken from this object directly.</p><p>If some fields are missing, they will be taken from default localization object ('Russian').</p></div><div class="param"><header class="param-header"><h3>startDate</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">new Date()</code></span></p></header><p>This date will be shown at first initialization.</p></div><div class="param"><header class="param-header"><h3>firstDay</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;&quot;</code></span></p></header><p>Day index from which week will be started. Possible values are from 0 to 6, where 0 - Sunday and 6 - Saturday.
--- a/docs/jade/pages/index-ru.jade
+++ b/docs/jade/pages/index-ru.jade
@ -293,7 +293,7 @@ block content
 				:code
 					<div class="datepicker-here" data-timepicker="true"></div>
 		p
-			i Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker'>Опциях</a>.
+			i Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker' class='nav-link'>Опциях</a>.


 		h3#timepicker-format Формат времени
--- a/docs/jade/pages/index.jade
+++ b/docs/jade/pages/index.jade
@ -270,6 +270,148 @@ block content
 					var currentDate = currentDate = new Date();
 					$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

+	article
+		h2#timepicker Timepicker
+		p To enable timepicker use option
+			+example-inline('{timepicker: true}', 'js')
+			| - it will add current time and a couple of range sliders by which one can pick time.
+		p By default current user time will be set. This value can be changed by
+			+example-inline('startDate', 'js')
+			| parameter.
+
+		+example
+			+example-content
+				div.datepicker-here(data-timepicker='true', data-language='en')
+			+example-code
+				:code
+					<div class="datepicker-here" data-timepicker="true" data-language='en'></div>
+		p
+			i More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.
+
+
+		h3#timepicker-format Time format
+		p Time format is defined in localization object or in
+			+example-inline('timeFormat', 'js')
+			| parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add
+			+example-inline('aa', 'js')
+			| or
+			+example-inline('AA', 'js')
+			| symbol in
+			+example-inline('timeFormat', 'js')
+			|. After what 'AM' and 'PM' sings will appear in timepicker widget.
+
+		p Lets use 12 hours mode in Russian language:
+
+		+example
+			+example-content
+				input.datepicker-here(type='text' data-timepicker='true', data-time-format='hh:ii aa')
+			+example-code
+				:code
+					<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
+
+		h3#timeformat-actions Действия со временем
+		p Для задания максимально/минимально возможных значений часов или минут используйте параметры
+			+example-inline('maxHours','js')
+			| ,
+			+example-inline('minHours','js')
+			| ,
+			+example-inline('maxMinutes','js')
+			| ,
+			+example-inline('minMinutes','js')
+			| . Также время можно указывать в парамтерах
+			+example-inline('minDate','js')
+			| и
+			+example-inline('maxDate','js')
+		p Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.
+
+		+example
+			+example-content
+				input(type='text')#timepicker-actions-exmpl
+				script.
+					// Зададим стартовую дату
+					var start = new Date(),
+							startHours = 9;
+
+					// 09:00
+					start.setHours(9);
+					start.setMinutes(0);
+
+					// Если сегодня суббота или воскресенье - 10:00
+					if ([6, 0].indexOf(start.getDay()) != -1) {
+						start.setHours(10);
+						startHours = 10
+					}
+
+					$('#timepicker-actions-exmpl').datepicker({
+						timepicker: true,
+						startDate: start,
+						minHours: startHours,
+						maxHours: 18,
+						onSelect: function (fd, d, picker) {
+							// Ничего не делаем если выделение было снято
+							if (!d) return;
+
+							var day = d.getDay();
+							// Если выбранный день суббота или воскресенье, то устанавливаем
+							// часы для выходных, в противном случае восстанавливаем начальные значения
+							if (day == 6 || day == 0) {
+								picker.update({
+									minHours: 10,
+									maxHours: 16
+								})
+							} else {
+								picker.update({
+									minHours: 9,
+									maxHours: 18
+								})
+							}
+						}
+					})
+			+example-code
+				:code
+					<input type='text' id='timepicker-actions-exmpl' />
+					<script>
+						// Зададим стартовую дату
+						var start = new Date(),
+							startHours = 9;
+
+						// 09:00
+						start.setHours(9);
+						start.setMinutes(0);
+
+						// Если сегодня суббота или воскресенье - 10:00
+						if ([6,0].indexOf(start.getDay()) != -1) {
+							start.setHours(10);
+							startHours = 10
+						}
+
+						$('#timepicker-actions-exmpl').datepicker({
+							timepicker: true,
+							startDate: start,
+							minHours: startHours,
+							maxHours: 18,
+							onSelect: function(fd, d, picker) {
+								// Ничего не делаем если выделение было снято
+								if (!d) return;
+
+								var day = d.getDay();
+								// Если выбранный день суббота или воскресенье, то устанавливаем
+								// часы для выходных, в противном случае восстанавливаем начальные значения
+								if (day == 6 || day == 0) {
+									picker.update({
+										minHours: 10,
+										maxHours: 16
+									})
+								} else {
+									picker.update({
+										minHours: 9,
+										maxHours: 18
+									})
+								}
+							}
+						})
+					</script>
+
 	article
 		h2#localization Localization
 		p
@ -306,7 +448,8 @@ block content
 				monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
 				today: 'Today',
 				clear: 'Clear',
-				dateFormat: 'mm/dd/yy',
+				dateFormat: 'mm/dd/yyyy',
+				timeFormat: 'hh:ii aa'
 				firstDay: 0
 			};
 		p Available localizations located in
--- a/src/js/i18n/datepicker.en.js
+++ b/src/js/i18n/datepicker.en.js
@ -6,6 +6,7 @@ Datepicker.language['en'] = {
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    today: 'Today',
    clear: 'Clear',
-    dateFormat: 'mm/dd/yy',
+    dateFormat: 'mm/dd/yyyy',
+    timeFormat: 'hh:ii aa',
    firstDay: 0
 };