From c9b7cc4b7ecce4c41161a93de62359df3fc429e9 Mon Sep 17 00:00:00 2001 From: t1m0n Date: Wed, 23 Mar 2016 11:39:15 +0300 Subject: [PATCH] begin English timepicker docs --- dist/js/i18n/datepicker.en.js | 3 +- docs/index-ru.html | 2 +- docs/index.html | 84 +++++++++++++++++++- docs/jade/pages/index-ru.jade | 2 +- docs/jade/pages/index.jade | 145 +++++++++++++++++++++++++++++++++- src/js/i18n/datepicker.en.js | 3 +- 6 files changed, 233 insertions(+), 6 deletions(-) diff --git a/dist/js/i18n/datepicker.en.js b/dist/js/i18n/datepicker.en.js index 38dcdd0..ffa6701 100644 --- 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 }; \ No newline at end of file diff --git a/docs/index-ru.html b/docs/index-ru.html index 1aa72e0..165e166 100644 --- 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)) -

Выбор времени

Для выбора времени используйте опцию{timepicker: true}- она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.

По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметромstartDate.

Пример
<div class="datepicker-here" data-timepicker="true"></div>

Подробнее о параметрах выбора времени можно почитать в Опциях.

Формат времени

Формат времени задается в объекте локализации, либо в парамтреtimeFormat. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата вtimeFormatнужно добавить символaaилиAA. После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.

Пример
<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
+

Выбор времени

Для выбора времени используйте опцию{timepicker: true}- она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.

По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметромstartDate.

Пример
<div class="datepicker-here" data-timepicker="true"></div>

Подробнее о параметрах выбора времени можно почитать в Опциях.

Формат времени

Формат времени задается в объекте локализации, либо в парамтреtimeFormat. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата вtimeFormatнужно добавить символaaилиAA. После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.

Пример
<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>

Действия со временем

Для задания максимально/минимально возможных значений часов или минут используйте параметрыmaxHours,minHours,maxMinutes,minMinutes. Также время можно указывать в парамтерахminDateиmaxDate

Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.

Пример
<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>

Localization

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

// 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
 };

Available localizations located indist/js/i18ndirectory.

Options

classes

Typestring

Defaults""

Extra css classes for datepicker.

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

This date will 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 and 6 - Saturday. diff --git a/docs/jade/pages/index-ru.jade b/docs/jade/pages/index-ru.jade index 6e0a88b..1fa624a 100644 --- a/docs/jade/pages/index-ru.jade +++ b/docs/jade/pages/index-ru.jade @@ -293,7 +293,7 @@ block content :code

p - i Подробнее о параметрах выбора времени можно почитать в Опциях. + i Подробнее о параметрах выбора времени можно почитать в Опциях. h3#timepicker-format Формат времени diff --git a/docs/jade/pages/index.jade b/docs/jade/pages/index.jade index edd8b72..5b93123 100644 --- 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 +
+ p + i More detailed info about timepicker parameters you can find in Options. + + + 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 +
+ + 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 + + + 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 diff --git a/src/js/i18n/datepicker.en.js b/src/js/i18n/datepicker.en.js index 38dcdd0..ffa6701 100644 --- 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 }; \ No newline at end of file