begin timepicker

dist/css/datepicker.css

@@ -18,26 +18,6 @@
     background: none;
     border: none; }
 
-.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
-  color: #dedede; }
-  .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
-    color: #c5c5c5; }
-  .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
-    color: #dedede; }
-  .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
-    color: #fff;
-    background: #a2ddf6; }
-    .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
-      background: #8ad5f4; }
-  .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
-    background-color: rgba(92, 196, 239, 0.1);
-    color: #cccccc; }
-    .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
-      background-color: rgba(92, 196, 239, 0.2); }
-  .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
-    background: none;
-    border: none; }
-
 /* -------------------------------------------------
     Datepicker cells
    ------------------------------------------------- */
@@ -387,3 +367,68 @@
   .datepicker--button:hover {
     color: #4a4a4a;
     background: #f0f0f0; }
+
+.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
+  color: #dedede; }
+  .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
+    color: #c5c5c5; }
+  .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
+    color: #dedede; }
+  .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
+    color: #fff;
+    background: #a2ddf6; }
+    .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
+      background: #8ad5f4; }
+  .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
+    background-color: rgba(92, 196, 239, 0.1);
+    color: #cccccc; }
+    .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
+      background-color: rgba(92, 196, 239, 0.2); }
+  .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
+    background: none;
+    border: none; }
+
+/* -------------------------------------------------
+    Timepicker
+   ------------------------------------------------- */
+.datepicker--time {
+  padding: 4px; }
+
+.datepicker--time-label {
+  display: block;
+  font-size: 12px; }
+
+.datepicker--time-row {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 11px; }
+  .datepicker--time-row input[type='range'] {
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1; }
+  .datepicker--time-row span {
+    padding: 0 12px; }
+
+.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
+  color: #dedede; }
+  .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
+    color: #c5c5c5; }
+  .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
+    color: #dedede; }
+  .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
+    color: #fff;
+    background: #a2ddf6; }
+    .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
+      background: #8ad5f4; }
+  .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
+    background-color: rgba(92, 196, 239, 0.1);
+    color: #cccccc; }
+    .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
+      background-color: rgba(92, 196, 239, 0.2); }
+  .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
+    background: none;
+    border: none; }

dist/js/datepicker.js

@@ -62,6 +62,10 @@ var Datepicker;
                 years: 'yyyy1 - yyyy2'
             },
 
+            // timepicker
+            timepicker: false,
+            timeFormat: 'hh:ii',
+
             // events
             onSelect: '',
             onChangeMonth: '',
@@ -160,6 +164,11 @@ var Datepicker;
             this.nav = new Datepicker.Navigation(this, this.opts);
             this.view = this.currentView;
 
+            if (this.opts.timepicker) {
+                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));
 
@@ -184,6 +193,10 @@ var Datepicker;
             this.$el.on('hotKey.adp', this._onHotKey.bind(this));
         },
 
+        _bindTimepickerEvents: function () {
+            this.$el.on('timeChange.adp', this._onTimeChange.bind(this));
+        },
+
         isWeekend: function (day) {
             return this.opts.weekends.indexOf(day) !== -1;
         },
@@ -325,6 +338,14 @@ var Datepicker;
                     result = result.replace(/\bMM\b/, this.loc.months[d.month]);
                 case /M/.test(result):
                     result = result.replace(/\bM\b/, locale.monthsShort[d.month]);
+                case /ii/.test(result):
+                    result = result.replace(/\bii\b/, d.fullMinutes);
+                case /i/.test(result):
+                    result = result.replace(/\bi(?!>)\b/, d.minutes);
+                case /hh/.test(result):
+                    result = result.replace(/\bhh\b/, d.fullHours);
+                case /h/.test(result):
+                    result = result.replace(/\bh\b/, d.hours);
                 case /yyyy/.test(result):
                     result = result.replace(/\byyyy\b/, d.year);
                 case /yyyy1/.test(result):
@@ -348,6 +369,11 @@ var Datepicker;
 
             if (!(date instanceof Date)) return;
 
+            if (this.timepicker) {
+                date.setHours(this.timepicker.hours);
+                date.setMinutes(this.timepicker.minutes);
+            }
+
             if (_this.view == 'days') {
                 if (date.getMonth() != d.month && opts.moveToOtherMonthsOnSelect) {
                     newDate = new Date(date.getFullYear(), date.getMonth(), 1);
@@ -1021,6 +1047,19 @@ var Datepicker;
             this.silent = false;
         },
 
+        _onTimeChange: function (e, h, m) {
+            var date = new Date();
+
+            if (this.selectedDates.length) {
+                date = this.selectedDates[this.selectedDates.length - 1]
+            }
+
+            date.setHours(h);
+            date.setMinutes(m);
+
+            this.selectDate(date);
+        },
+
         set focused(val) {
             if (!val && this.focused) {
                 var $cell = this._getCell(this.focused);
@@ -1136,7 +1175,11 @@ var Datepicker;
             fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
             date: date.getDate(),
             fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
-            day: date.getDay()
+            day: date.getDay(),
+            hours: date.getHours(),
+            fullHours:  date.getHours() < 10 ? '0' + date.getHours() :  date.getHours() ,
+            minutes: date.getMinutes(),
+            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes()
         }
     };
 
@@ -1661,3 +1704,67 @@ var Datepicker;
     }
 
 })();
+
+(function (window, $, datepicker) {
+    var template = '<div class="datepicker--time">' +
+    '   <label class="datepicker--time-label">#{hourLabel}</label>' +
+        '<div class="datepicker--time-row">' +
+        '   <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
+        '</div>' +
+    '   <label class="datepicker--time-label">#{minLabel}</label>' +
+        '<div class="datepicker--time-row">' +
+        '   <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
+        '</div>' +
+        '</div>';
+    datepicker.Timepicker = function (inst, opts) {
+        this.d = inst;
+        this.opts = opts;
+
+        var date = this.d.parsedDate;
+        this.minutes = date.minutes;
+        this.hours = date.hours;
+
+        this.init();
+    };
+
+    datepicker.Timepicker.prototype = {
+        init: function () {
+            this._buildHTML();
+
+            this.$ranges.on('input', this._onChangeRange.bind(this));
+        },
+
+        _buildHTML: function () {
+            var date = this.d.parsedDate,
+                data = {
+                    hourMin: '00',
+                    hourMax: '23',
+                    hourStep: '1',
+                    hourValue: date.hours,
+                    hourLabel: 'Часы',
+                    minMin: '00',
+                    minMax: '59',
+                    minStep: '1',
+                    minValue: date.minutes,
+                    minLabel: 'Минуты'
+                },
+                _template = datepicker.template(template, data);
+
+            this.$timepicker = $(_template).appendTo(this.d.$datepicker);
+            this.$ranges = $('[type="range"]', this.$timepicker);
+        },
+
+        _render: function () {
+
+        },
+
+        _onChangeRange: function (e) {
+            var $target = $(e.target),
+                value = $target.val(),
+                name = $target.attr('name');
+
+            this[name] = value;
+            this.d._trigger('timeChange', [this.hours, this.minutes])
+        }
+    };
+})(window, jQuery, Datepicker);

src/js/datepicker.js

@@ -62,6 +62,10 @@ var Datepicker;
                 years: 'yyyy1 - yyyy2'
             },
 
+            // timepicker
+            timepicker: false,
+            timeFormat: 'hh:ii',
+
             // events
             onSelect: '',
             onChangeMonth: '',
@@ -160,6 +164,11 @@ var Datepicker;
             this.nav = new Datepicker.Navigation(this, this.opts);
             this.view = this.currentView;
 
+            if (this.opts.timepicker) {
+                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));
 
@@ -184,6 +193,10 @@ var Datepicker;
             this.$el.on('hotKey.adp', this._onHotKey.bind(this));
         },
 
+        _bindTimepickerEvents: function () {
+            this.$el.on('timeChange.adp', this._onTimeChange.bind(this));
+        },
+
         isWeekend: function (day) {
             return this.opts.weekends.indexOf(day) !== -1;
         },
@@ -325,6 +338,14 @@ var Datepicker;
                     result = result.replace(/\bMM\b/, this.loc.months[d.month]);
                 case /M/.test(result):
                     result = result.replace(/\bM\b/, locale.monthsShort[d.month]);
+                case /ii/.test(result):
+                    result = result.replace(/\bii\b/, d.fullMinutes);
+                case /i/.test(result):
+                    result = result.replace(/\bi(?!>)\b/, d.minutes);
+                case /hh/.test(result):
+                    result = result.replace(/\bhh\b/, d.fullHours);
+                case /h/.test(result):
+                    result = result.replace(/\bh\b/, d.hours);
                 case /yyyy/.test(result):
                     result = result.replace(/\byyyy\b/, d.year);
                 case /yyyy1/.test(result):
@@ -348,6 +369,11 @@ var Datepicker;
 
             if (!(date instanceof Date)) return;
 
+            if (this.timepicker) {
+                date.setHours(this.timepicker.hours);
+                date.setMinutes(this.timepicker.minutes);
+            }
+
             if (_this.view == 'days') {
                 if (date.getMonth() != d.month && opts.moveToOtherMonthsOnSelect) {
                     newDate = new Date(date.getFullYear(), date.getMonth(), 1);
@@ -1021,6 +1047,19 @@ var Datepicker;
             this.silent = false;
         },
 
+        _onTimeChange: function (e, h, m) {
+            var date = new Date();
+
+            if (this.selectedDates.length) {
+                date = this.selectedDates[this.selectedDates.length - 1]
+            }
+
+            date.setHours(h);
+            date.setMinutes(m);
+
+            this.selectDate(date);
+        },
+
         set focused(val) {
             if (!val && this.focused) {
                 var $cell = this._getCell(this.focused);
@@ -1136,7 +1175,11 @@ var Datepicker;
             fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
             date: date.getDate(),
             fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
-            day: date.getDay()
+            day: date.getDay(),
+            hours: date.getHours(),
+            fullHours:  date.getHours() < 10 ? '0' + date.getHours() :  date.getHours() ,
+            minutes: date.getMinutes(),
+            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes()
         }
     };
 

src/js/timepicker.js

@@ -0,0 +1,63 @@
+(function (window, $, datepicker) {
+    var template = '<div class="datepicker--time">' +
+    '   <label class="datepicker--time-label">#{hourLabel}</label>' +
+        '<div class="datepicker--time-row">' +
+        '   <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
+        '</div>' +
+    '   <label class="datepicker--time-label">#{minLabel}</label>' +
+        '<div class="datepicker--time-row">' +
+        '   <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
+        '</div>' +
+        '</div>';
+    datepicker.Timepicker = function (inst, opts) {
+        this.d = inst;
+        this.opts = opts;
+
+        var date = this.d.parsedDate;
+        this.minutes = date.minutes;
+        this.hours = date.hours;
+
+        this.init();
+    };
+
+    datepicker.Timepicker.prototype = {
+        init: function () {
+            this._buildHTML();
+
+            this.$ranges.on('input', this._onChangeRange.bind(this));
+        },
+
+        _buildHTML: function () {
+            var date = this.d.parsedDate,
+                data = {
+                    hourMin: '00',
+                    hourMax: '23',
+                    hourStep: '1',
+                    hourValue: date.hours,
+                    hourLabel: 'Часы',
+                    minMin: '00',
+                    minMax: '59',
+                    minStep: '1',
+                    minValue: date.minutes,
+                    minLabel: 'Минуты'
+                },
+                _template = datepicker.template(template, data);
+
+            this.$timepicker = $(_template).appendTo(this.d.$datepicker);
+            this.$ranges = $('[type="range"]', this.$timepicker);
+        },
+
+        _render: function () {
+
+        },
+
+        _onChangeRange: function (e) {
+            var $target = $(e.target),
+                value = $target.val(),
+                name = $target.attr('name');
+
+            this[name] = value;
+            this.d._trigger('timeChange', [this.hours, this.minutes])
+        }
+    };
+})(window, jQuery, Datepicker);

src/sass/timepicker.scss

@@ -0,0 +1,28 @@
+@import "datepicker-config";
+
+/* -------------------------------------------------
+    Timepicker
+   ------------------------------------------------- */
+
+.datepicker--time {
+  padding: $datepickerPadding;
+}
+
+.datepicker--time-label {
+  display: block;
+  font-size: 12px;
+}
+
+.datepicker--time-row {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+
+  input[type='range'] {
+    flex: 1;
+  }
+
+  span {
+    padding: 0 12px;
+  }
+}

tasks/js.js

@@ -9,7 +9,8 @@ module.exports = function () {
     var stream = gulp.src([
         'src/js/datepicker.js',
         'src/js/body.js',
-        'src/js/navigation.js'
+        'src/js/navigation.js',
+        'src/js/timepicker.js'
     ])
         .pipe(concat('datepicker.js'));