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