update input value then call update(), begin timepicker docs

dist/js/datepicker.js

@@ -160,23 +160,23 @@ var Datepicker;
                 }
                 this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
                 this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
-                this.$el.on('clickCell.adp', this._onClickCell.bind(this));
             }
 
             if (this.opts.classes) {
                 this.$datepicker.addClass(this.opts.classes)
             }
 
+            if (this.opts.timepicker) {
+                this.timepicker = new Datepicker.Timepicker(this, this.opts);
+                this._bindTimepickerEvents();
+            }
+
             this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
             this.nav = new Datepicker.Navigation(this, this.opts);
             this.view = this.currentView;
 
-            if (this.opts.timepicker) {
+            this.$el.on('clickCell.adp', this._onClickCell.bind(this));
-                this.timepicker = new Datepicker.Timepicker(this, this.opts);
-                this._bindTimepickerEvents();
-            }
-
             this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
             this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
 
@@ -564,6 +564,7 @@ var Datepicker;
          */
         update: function (param, value) {
             var len = arguments.length;
+
             if (len == 2) {
                 this.opts[param] = value;
             } else if (len == 1 && typeof param == 'object') {
@@ -591,9 +592,16 @@ var Datepicker;
             if (this.opts.timepicker) {
                 this.timepicker._handleDate(this.lastSelectedDate);
                 this.timepicker._updateRanges();
-                this.timepicker._updateCurrentTime()
+                this.timepicker._updateCurrentTime();
+                // Change hours and minutes if it's values have been changed through min/max hours/minutes
+                if (this.lastSelectedDate) {
+                    this.lastSelectedDate.setHours(this.timepicker.hours);
+                    this.lastSelectedDate.setMinutes(this.timepicker.minutes);
+                }
             }
 
+            this._setInputValue();
+
             return this;
         },
 
@@ -1158,7 +1166,9 @@ var Datepicker;
                 this.selectDate(date);
             } else {
                 this._setInputValue();
-                this._triggerOnChange();
+                if (this.opts.onSelect) {
+                    this._triggerOnChange();
+                }
             }
         },
 
@@ -1912,7 +1922,7 @@ var Datepicker;
                     hourMin: this.minHours,
                     hourMax: lz(this.maxHours),
                     hourStep: this.opts.hoursStep,
-                    hourValue: lz(this.hours),
+                    hourValue: lz(this.displayHours),
                     minMin: this.minMinutes,
                     minMax: lz(this.maxMinutes),
                     minStep: this.opts.minutesStep,
@@ -1929,7 +1939,8 @@ var Datepicker;
 
             if (this.d.ampm) {
                 this.$ampm = $('<span class="datepicker--time-current-ampm">')
-                    .appendTo($('.datepicker--time-current', this.$timepicker));
+                    .appendTo($('.datepicker--time-current', this.$timepicker))
+                    .html(this.dayPeriod)
             }
         },
 

docs/jade/mixins/param-header.jade

@@ -1,10 +1,10 @@
-mixin param-header(name, type, defaults)
+mixin param-header(name, type, defaults, id)
 	-var typeLabel = 'Тип';
 	-var defaultLabel = 'Значение по умолчанию';
 	-if (lang == 'en') {typeLabel = 'Type'; defaultLabel = 'Defaults'};
 
 	header.param-header
-			h3= name
+			h3(id = id)= name
 			if type
 				p.param-header--row
 					span.param-header--label= typeLabel

docs/jade/pages/index-ru.jade

@@ -277,6 +277,143 @@ block content
 					var currentDate = currentDate = new Date();
 					$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
 
+	article
+		h2#timepicker Выбор времени
+		p Для выбора времени используйте опцию
+			+example-inline('{timepicker: true}', 'js')
+			| - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
+		+example
+			+example-content
+				div.datepicker-here(data-timepicker='true')
+			+example-code
+				:code
+					<div class="datepicker-here" data-timepicker="true"></div>
+		p
+			i Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker'>Опциях</a>.
+
+
+		h3#timepicker-format Формат времени
+		p Формат времени задается в объекте локализации, либо в парамтре
+			+example-inline('timeFormat', 'js')
+			|. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в
+			+example-inline('timeFormat', 'js')
+			| нужно добавить символ
+			+example-inline('aa', 'js')
+			| или
+			+example-inline('AA', 'js')
+			| . После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.
+
+		+example
+			+example-content
+				input(type='text').datepicker-here(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 Локализация
 		p
@@ -317,6 +454,7 @@ block content
 				today: 'Сегодня',
 				clear: 'Очистить',
 				dateFormat: 'dd.mm.yyyy',
+				timeFormat: 'hh:ii',
 				firstDay: 1
 			};
 
@@ -363,6 +501,24 @@ block content
 				li
 					+param('@')
 					| - время в миллесекундах
+				li
+					+param('h')
+					| - часы
+				li
+					+param('hh')
+					| - часы, с лидирующим нулем
+				li
+					+param('i')
+					| - минуты
+				li
+					+param('ii')
+					| - минуты, с лидирующим нулем
+				li
+					+param('aa')
+					| - период дня - 'am' или 'pm'
+				li
+					+param('AA')
+					| - период дня заглавными буквами
 				li
 					+param('d')
 					| - дата
@@ -575,6 +731,12 @@ block content
 				+example-inline('view = "months"', 'js')
 				| .
 
+		.param
+			+param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
+			p Если
+				+example-inline('true')
+				| , то будет добавлена возомжность выбора времени.
+
 	article
 		h2#events События
 		.param

src/js/datepicker.js

@@ -160,23 +160,23 @@ var Datepicker;
                 }
                 this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
                 this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
-                this.$el.on('clickCell.adp', this._onClickCell.bind(this));
             }
 
             if (this.opts.classes) {
                 this.$datepicker.addClass(this.opts.classes)
             }
 
+            if (this.opts.timepicker) {
+                this.timepicker = new Datepicker.Timepicker(this, this.opts);
+                this._bindTimepickerEvents();
+            }
+
             this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
             this.nav = new Datepicker.Navigation(this, this.opts);
             this.view = this.currentView;
 
-            if (this.opts.timepicker) {
+            this.$el.on('clickCell.adp', this._onClickCell.bind(this));
-                this.timepicker = new Datepicker.Timepicker(this, this.opts);
-                this._bindTimepickerEvents();
-            }
-
             this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
             this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
 
@@ -564,6 +564,7 @@ var Datepicker;
          */
         update: function (param, value) {
             var len = arguments.length;
+
             if (len == 2) {
                 this.opts[param] = value;
             } else if (len == 1 && typeof param == 'object') {
@@ -591,9 +592,16 @@ var Datepicker;
             if (this.opts.timepicker) {
                 this.timepicker._handleDate(this.lastSelectedDate);
                 this.timepicker._updateRanges();
-                this.timepicker._updateCurrentTime()
+                this.timepicker._updateCurrentTime();
+                // Change hours and minutes if it's values have been changed through min/max hours/minutes
+                if (this.lastSelectedDate) {
+                    this.lastSelectedDate.setHours(this.timepicker.hours);
+                    this.lastSelectedDate.setMinutes(this.timepicker.minutes);
+                }
             }
 
+            this._setInputValue();
+
             return this;
         },
 
@@ -1158,7 +1166,9 @@ var Datepicker;
                 this.selectDate(date);
             } else {
                 this._setInputValue();
-                this._triggerOnChange();
+                if (this.opts.onSelect) {
+                    this._triggerOnChange();
+                }
             }
         },
 

src/js/timepicker.js

@@ -90,7 +90,7 @@
                     hourMin: this.minHours,
                     hourMax: lz(this.maxHours),
                     hourStep: this.opts.hoursStep,
-                    hourValue: lz(this.hours),
+                    hourValue: lz(this.displayHours),
                     minMin: this.minMinutes,
                     minMax: lz(this.maxMinutes),
                     minStep: this.opts.minutesStep,
@@ -107,7 +107,8 @@
 
             if (this.d.ampm) {
                 this.$ampm = $('<span class="datepicker--time-current-ampm">')
-                    .appendTo($('.datepicker--time-current', this.$timepicker));
+                    .appendTo($('.datepicker--time-current', this.$timepicker))
+                    .html(this.dayPeriod)
             }
         },