Merge branch 'develop'

Conflicts:
	bower.json

.npmignore

@@ -0,0 +1,7 @@
+.idea
+tests
+docs
+bower_components
+bower.json
+static-server.js
+visual-tests.html

README.md

@@ -1,12 +1,19 @@
 # Air Datepicker
 
-Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+)
+Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+).
+
 ![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img.png)
 
 ## Install
+
+### bower
 ```
 bower i --save air-datepicker
 ```
+### npm
+```
+npm i --save air-datepicker
+```
 
 ## Usage
 ```javascript
@@ -19,6 +26,21 @@ $('.my-datepicker').datepicker([options])
 
 ## Change log
 
+### v2.0.0
+* added timepicker (see [docs](http://t1m0n.name/air-datepicker/docs#timepicker) for more info)
+* added possibility to set `Date` in `todayButton` 
+* global variable `Datepicker` has been removed, now all placed in `$.fn.datepicker`
+* improved `selectDate` method, now one can pass an array of dates to select
+* added `npm` package
+* fixed issue caused by `placeholder` on `readonly` inputs in IE
+* fixed issue when `range` is true and first selected date is bigger than second
+* added new languages:
+    - `da`  thanks to [bjarnef](https://github.com/bjarnef)
+    - `nl`  thanks to [JaZo](https://github.com/JaZo)
+    - `pt`  thanks to [cmpscabral](https://github.com/cmpscabral)
+    - `pt-BR`  thanks to [dowglaz](https://github.com/dowglaz)
+    - `ro`  thanks to [tourniquet](https://github.com/tourniquet)
+
 ### v1.2.4
 * fixed '$ is not defined' problem. 
 

bower.json

@@ -1,18 +1,20 @@
 {
   "name": "air-datepicker",
-  "version": "1.2.4",
+  "version": "2.0.0",
   "authors": [
     "t1m0n <t1m0n.tr@gmail.com>"
   ],
-  "description": "A lightweight jQuery datepicker",
+  "description": "A lightweight, customizable, powerful jQuery datepicker",
   "main": [
-    "dist/js/datepicker.js",
+    "dist/js/datepicker.min.js",
-    "dist/css/datepicker.css"
+    "dist/css/datepicker.min.css"
   ],
   "keywords": [
     "datepicker",
-    "calendar",
+    "timepicker",
-    "lightweight"
+    "plugin",
+    "customizable",
+    "powerful"
   ],
   "license": "MIT",
   "ignore": [
@@ -28,6 +30,6 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "~2.1.4"
+    "jquery": "^2.2.3"
   }
 }

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
    ------------------------------------------------- */
@@ -184,6 +164,9 @@
   position: absolute;
   left: 0;
   top: 0; }
+  @media print {
+    .datepickers-container {
+      display: none; } }
 
 .datepicker {
   background: #fff;
@@ -387,3 +370,247 @@
   .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 {
+  border-top: 1px solid #efefef;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 4px;
+  position: relative; }
+  .datepicker--time.-am-pm- .datepicker--time-sliders {
+    -webkit-flex: 0 1 138px;
+        -ms-flex: 0 1 138px;
+            flex: 0 1 138px;
+    max-width: 138px; }
+
+.datepicker--time-sliders {
+  -webkit-flex: 0 1 153px;
+      -ms-flex: 0 1 153px;
+          flex: 0 1 153px;
+  margin-right: 10px;
+  max-width: 153px; }
+
+.datepicker--time-label {
+  display: none;
+  font-size: 12px; }
+
+.datepicker--time-current {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-size: 14px;
+  text-align: center;
+  margin: 0 0 0 10px; }
+
+.datepicker--time-current-colon {
+  margin: 0 2px 3px;
+  line-height: 1; }
+
+.datepicker--time-current-hours,
+.datepicker--time-current-minutes {
+  line-height: 1;
+  font-size: 19px;
+  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+  position: relative;
+  z-index: 1; }
+  .datepicker--time-current-hours:after,
+  .datepicker--time-current-minutes:after {
+    content: '';
+    background: #f0f0f0;
+    border-radius: 4px;
+    position: absolute;
+    left: -2px;
+    top: -3px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    opacity: 0; }
+  .datepicker--time-current-hours.-focus-:after,
+  .datepicker--time-current-minutes.-focus-:after {
+    opacity: 1; }
+
+.datepicker--time-current-ampm {
+  text-transform: uppercase;
+  -webkit-align-self: flex-end;
+      -ms-flex-item-align: end;
+          align-self: flex-end;
+  color: #9c9c9c;
+  margin-left: 6px;
+  font-size: 11px;
+  margin-bottom: 1px; }
+
+.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;
+  height: 17px;
+  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
+  .datepicker--time-row:first-child {
+    margin-bottom: 4px; }
+  .datepicker--time-row input[type='range'] {
+    background: none;
+    cursor: pointer;
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none; }
+    .datepicker--time-row input[type='range']::-ms-tooltip {
+      display: none; }
+    .datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
+      border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:hover::-moz-range-thumb {
+      border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:hover::-ms-thumb {
+      border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:focus {
+      outline: none; }
+      .datepicker--time-row input[type='range']:focus::-webkit-slider-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
+      .datepicker--time-row input[type='range']:focus::-moz-range-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
+      .datepicker--time-row input[type='range']:focus::-ms-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s; }
+    .datepicker--time-row input[type='range']::-moz-range-thumb {
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s; }
+    .datepicker--time-row input[type='range']::-ms-thumb {
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      margin-top: -6px; }
+    .datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
+      border: none;
+      height: 1px;
+      cursor: pointer;
+      color: transparent;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-moz-range-track {
+      border: none;
+      height: 1px;
+      cursor: pointer;
+      color: transparent;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-track {
+      border: none;
+      height: 1px;
+      cursor: pointer;
+      color: transparent;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-fill-lower {
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-fill-upper {
+      background: transparent; }
+  .datepicker--time-row span {
+    padding: 0 12px; }
+
+.datepicker--time-icon {
+  color: #9c9c9c;
+  border: 1px solid;
+  border-radius: 50%;
+  font-size: 16px;
+  position: relative;
+  margin: 0 5px -1px 0;
+  width: 1em;
+  height: 1em; }
+  .datepicker--time-icon:after, .datepicker--time-icon:before {
+    content: '';
+    background: currentColor;
+    position: absolute; }
+  .datepicker--time-icon:after {
+    height: .4em;
+    width: 1px;
+    left: calc(50% - 1px);
+    top: calc(50% + 1px);
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%); }
+  .datepicker--time-icon:before {
+    width: .4em;
+    height: 1px;
+    top: calc(50% + 1px);
+    left: calc(50% - 1px); }
+
+.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

@@ -1,6 +1,4 @@
-;(function (window, $, undefined) { window.Datepicker = '';
+;(function (window, $, undefined) { ;(function () {
-
-(function () {
     var pluginName = 'datepicker',
         autoInitSelector = '.datepicker-here',
         $body, $datepickersContainer,
@@ -62,6 +60,17 @@
                 years: 'yyyy1 - yyyy2'
             },
 
+            // timepicker
+            timepicker: false,
+            dateTimeSeparator: ' ',
+            timeFormat: '',
+            minHours: 0,
+            maxHours: 24,
+            minMinutes: 0,
+            maxMinutes: 59,
+            hoursStep: 1,
+            minutesStep: 1,
+
             // events
             onSelect: '',
             onChangeMonth: '',
@@ -87,7 +96,7 @@
         },
         datepicker;
 
-    Datepicker  = function (el, options) {
+    var Datepicker  = function (el, options) {
         this.el = el;
         this.$el = $(el);
 
@@ -121,6 +130,7 @@
         this.keys = [];
         this.minRange = '';
         this.maxRange = '';
+        this._prevOnSelectValue = '';
 
         this.init()
     };
@@ -155,11 +165,17 @@
                 this.$datepicker.addClass(this.opts.classes)
             }
 
-            this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
+            if (this.opts.timepicker) {
+                this.timepicker = new $.fn.datepicker.Timepicker(this, this.opts);
+                this._bindTimepickerEvents();
+            }
+
+            this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
-            this.nav = new Datepicker.Navigation(this, this.opts);
+            this.nav = new $.fn.datepicker.Navigation(this, this.opts);
             this.view = this.currentView;
 
+            this.$el.on('clickCell.adp', this._onClickCell.bind(this));
             this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
             this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
 
@@ -173,9 +189,11 @@
 
         _bindEvents : function () {
             this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
+            this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
             this.$el.on('blur.adp', this._onBlur.bind(this));
-            this.$el.on('input.adp', this._onInput.bind(this));
+            this.$el.on('keyup.adp', this._onKeyUpGeneral.bind(this));
             $(window).on('resize.adp', this._onResize.bind(this));
+            $('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
         },
 
         _bindKeyboardEvents: function () {
@@ -184,30 +202,49 @@
             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;
         },
 
         _defineLocale: function (lang) {
             if (typeof lang == 'string') {
-                this.loc = Datepicker.language[lang];
+                this.loc = $.fn.datepicker.language[lang];
                 if (!this.loc) {
                     console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
-                    this.loc = $.extend(true, {}, Datepicker.language.ru)
+                    this.loc = $.extend(true, {}, $.fn.datepicker.language.ru)
                 }
 
-                this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
+                this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, $.fn.datepicker.language[lang])
             } else {
-                this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
+                this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, lang)
             }
 
             if (this.opts.dateFormat) {
                 this.loc.dateFormat = this.opts.dateFormat
             }
 
+            if (this.opts.timeFormat) {
+                this.loc.timeFormat = this.opts.timeFormat
+            }
+
             if (this.opts.firstDay !== '') {
                 this.loc.firstDay = this.opts.firstDay
             }
+
+            if (this.opts.timepicker) {
+                this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
+            }
+
+            var boundary = this._getWordBoundaryRegExp;
+            if (this.loc.timeFormat.match(boundary('aa')) ||
+                this.loc.timeFormat.match(boundary('AA'))
+            ) {
+               this.ampm = true;
+            }
         },
 
         _buildDatepickersContainer: function () {
@@ -237,6 +274,9 @@
 
         _triggerOnChange: function () {
             if (!this.selectedDates.length) {
+                // Prevent from triggering multiple onSelect callback with same argument (empty string) in IE10-11
+                if (this._prevOnSelectValue === '') return;
+                this._prevOnSelectValue = '';
                 return this.opts.onSelect('', '', this);
             }
 
@@ -244,7 +284,13 @@
                 parsedSelected = datepicker.getParsedDate(selectedDates[0]),
                 formattedDates,
                 _this = this,
-                dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
+                dates = new Date(
+                    parsedSelected.year,
+                    parsedSelected.month,
+                    parsedSelected.date,
+                    parsedSelected.hours,
+                    parsedSelected.minutes
+                );
 
                 formattedDates = selectedDates.map(function (date) {
                     return _this.formatDate(_this.loc.dateFormat, date)
@@ -254,10 +300,17 @@
             if (this.opts.multipleDates || this.opts.range) {
                 dates = selectedDates.map(function(date) {
                     var parsedDate = datepicker.getParsedDate(date);
-                    return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
+                    return new Date(
+                        parsedSelected.year,
+                        parsedSelected.month,
+                        parsedSelected.date,
+                        parsedSelected.hours,
+                        parsedSelected.minutes
+                    );
                 })
             }
 
+            this._prevOnSelectValue = formattedDates;
             this.opts.onSelect(formattedDates, dates, this);
         },
 
@@ -304,12 +357,28 @@
             var result = string,
                 boundary = this._getWordBoundaryRegExp,
                 locale = this.loc,
+                leadingZero = datepicker.getLeadingZeroNum,
                 decade = datepicker.getDecade(date),
-                d = datepicker.getParsedDate(date);
+                d = datepicker.getParsedDate(date),
+                fullHours = d.fullHours,
+                hours = d.hours,
+                dayPeriod = 'am',
+                validHours;
+
+            if (this.opts.timepicker && this.timepicker && this.ampm) {
+                validHours = this.timepicker._getValidHoursFromDate(date);
+                fullHours = leadingZero(validHours.hours);
+                hours = validHours.hours;
+                dayPeriod = validHours.dayPeriod;
+            }
 
             switch (true) {
                 case /@/.test(result):
                     result = result.replace(/@/, date.getTime());
+                case /aa/.test(result):
+                    result = result.replace(boundary('aa'), dayPeriod);
+                case /AA/.test(result):
+                    result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
                 case /dd/.test(result):
                     result = result.replace(boundary('dd'), d.fullDate);
                 case /d/.test(result):
@@ -326,6 +395,14 @@
                     result = result.replace(boundary('MM'), this.loc.months[d.month]);
                 case /M/.test(result):
                     result = result.replace(boundary('M'), locale.monthsShort[d.month]);
+                case /ii/.test(result):
+                    result = result.replace(boundary('ii'), d.fullMinutes);
+                case /i/.test(result):
+                    result = result.replace(boundary('i'), d.minutes);
+                case /hh/.test(result):
+                    result = result.replace(boundary('hh'), fullHours);
+                case /h/.test(result):
+                    result = result.replace(boundary('h'), hours);
                 case /yyyy/.test(result):
                     result = result.replace(boundary('yyyy'), d.year);
                 case /yyyy1/.test(result):
@@ -351,8 +428,33 @@
                 len = selectedDates.length,
                 newDate = '';
 
+            if (Array.isArray(date)) {
+                date.forEach(function (d) {
+                    _this.selectDate(d)
+                });
+                return;
+            }
+
             if (!(date instanceof Date)) return;
 
+            this.lastSelectedDate = date;
+
+            // Set new time values from Date
+            if (this.timepicker) {
+                this.timepicker._setTime(date);
+            }
+
+            // On this step timepicker will set valid values in it's instance
+            _this._trigger('selectDate', date);
+
+            // Set correct time values after timepicker's validation
+            // Prevent from setting hours or minutes which values are lesser then `min` value or
+            // greater then `max` value
+            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);
@@ -389,6 +491,11 @@
                     } else {
                         _this.minRange = date;
                     }
+                    // Swap dates if they were selected via dp.selectDate() and second date was smaller then first
+                    if (datepicker.bigger(_this.maxRange, _this.minRange)) {
+                        _this.maxRange = _this.minRange;
+                        _this.minRange = date;
+                    }
                     _this.selectedDates = [_this.minRange, _this.maxRange]
 
                 } else {
@@ -405,7 +512,7 @@
                 _this._triggerOnChange();
             }
 
-            if (opts.autoClose) {
+            if (opts.autoClose && !this.timepickerIsActive) {
                 if (!opts.multipleDates && !opts.range) {
                     _this.hide();
                 } else if (opts.range && _this.selectedDates.length == 2) {
@@ -429,6 +536,9 @@
                     if (!_this.selectedDates.length) {
                         _this.minRange = '';
                         _this.maxRange = '';
+                        _this.lastSelectedDate = '';
+                    } else {
+                        _this.lastSelectedDate = _this.selectedDates[_this.selectedDates.length - 1];
                     }
 
                     _this.views[_this.currentView]._render();
@@ -448,6 +558,10 @@
             this.view = this.opts.minView;
             this.silent = false;
             this.date = new Date();
+
+            if (this.opts.todayButton instanceof Date) {
+                this.selectDate(this.opts.todayButton)
+            }
         },
 
         clear: function () {
@@ -468,6 +582,7 @@
          */
         update: function (param, value) {
             var len = arguments.length;
+
             if (len == 2) {
                 this.opts[param] = value;
             } else if (len == 1 && typeof param == 'object') {
@@ -492,6 +607,19 @@
                 this.$datepicker.addClass(this.opts.classes)
             }
 
+            if (this.opts.timepicker) {
+                this.timepicker._handleDate(this.lastSelectedDate);
+                this.timepicker._updateRanges();
+                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;
         },
 
@@ -509,9 +637,14 @@
         },
 
         _isSelected: function (checkDate, cellType) {
-            return this.selectedDates.some(function (date) {
+            var res = false;
-                return datepicker.isSame(date, checkDate, cellType)
+            this.selectedDates.some(function (date) {
-            })
+                if (datepicker.isSame(date, checkDate, cellType)) {
+                    res = date;
+                    return true;
+                }
+            });
+            return res;
         },
 
         _setInputValue: function () {
@@ -911,7 +1044,7 @@
             }
         },
 
-        _onShowEvent: function () {
+        _onShowEvent: function (e) {
             if (!this.visible) {
                 this.show();
             }
@@ -929,10 +1062,11 @@
 
         _onMouseUpDatepicker: function (e) {
             this.inFocus = false;
-            this.$el.focus()
+            e.originalEvent.inFocus = true;
+            if (!e.originalEvent.timepickerFocus) this.$el.focus();
         },
 
-        _onInput: function () {
+        _onKeyUpGeneral: function (e) {
             var val = this.$el.val();
 
             if (!val) {
@@ -946,6 +1080,19 @@
             }
         },
 
+        _onMouseUpBody: function (e) {
+            if (e.originalEvent.inFocus) return;
+
+            if (this.visible && !this.inFocus) {
+                this.hide();
+            }
+        },
+
+        _onMouseUpEl: function (e) {
+            e.originalEvent.inFocus = true;
+            setTimeout(this._onKeyUpGeneral.bind(this),4);
+        },
+
         _onKeyDown: function (e) {
             var code = e.which;
             this._registerKey(code);
@@ -966,6 +1113,10 @@
                         var alreadySelected = this._isSelected(this.focused, this.cellType);
 
                         if (!alreadySelected) {
+                            if (this.timepicker) {
+                                this.focused.setHours(this.timepicker.hours);
+                                this.focused.setMinutes(this.timepicker.minutes);
+                            }
                             this.selectDate(this.focused);
                         } else if (alreadySelected && this.opts.toggleSelected){
                             this.removeDate(this.focused);
@@ -1026,6 +1177,37 @@
             this.silent = false;
         },
 
+        _onTimeChange: function (e, h, m) {
+            var date = new Date(),
+                selectedDates = this.selectedDates,
+                selected = false;
+
+            if (selectedDates.length) {
+                selected = true;
+                date = this.lastSelectedDate;
+            }
+
+            date.setHours(h);
+            date.setMinutes(m);
+
+            if (!selected && !this._getCell(date).hasClass('-disabled-')) {
+                this.selectDate(date);
+            } else {
+                this._setInputValue();
+                if (this.opts.onSelect) {
+                    this._triggerOnChange();
+                }
+            }
+        },
+
+        _onClickCell: function (e, date) {
+            if (this.timepicker) {
+                date.setHours(this.timepicker.hours);
+                date.setMinutes(this.timepicker.minutes);
+            }
+            this.selectDate(date);
+        },
+
         set focused(val) {
             if (!val && this.focused) {
                 var $cell = this._getCell(this.focused);
@@ -1086,7 +1268,7 @@
 
             if (this.inited) {
                 if (!this.views[val]) {
-                    this.views[val] = new Datepicker.Body(this, val, this.opts)
+                    this.views[val] = new  $.fn.datepicker.Body(this, val, this.opts)
                 } else {
                     this.views[val]._render();
                 }
@@ -1141,7 +1323,11 @@
             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()
         }
     };
 
@@ -1184,21 +1370,11 @@
         return date.getTime() > dateCompareTo.getTime();
     };
 
-    Datepicker.language = {
+    datepicker.getLeadingZeroNum = function (num) {
-        ru: {
+        return parseInt(num) < 10 ? '0' + num : num;
-            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
-            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
-            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
-            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
-            today: 'Сегодня',
-            clear: 'Очистить',
-            dateFormat: 'dd.mm.yyyy',
-            firstDay: 1
-        }
     };
 
-    $.fn[pluginName] = function ( options ) {
+    $.fn.datepicker = function ( options ) {
         return this.each(function () {
             if (!$.data(this, pluginName)) {
                 $.data(this,  pluginName,
@@ -1212,11 +1388,29 @@
         });
     };
 
+    $.fn.datepicker.Constructor = Datepicker;
+
+    $.fn.datepicker.language = {
+        ru: {
+            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
+            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+            today: 'Сегодня',
+            clear: 'Очистить',
+            dateFormat: 'dd.mm.yyyy',
+            timeFormat: 'hh:ii',
+            firstDay: 1
+        }
+    };
+
     $(function () {
         $(autoInitSelector).datepicker();
     })
 
 })();
+
 ;(function () {
     var templates = {
         days:'' +
@@ -1233,9 +1427,10 @@
         '<div class="datepicker--cells datepicker--cells-years"></div>' +
         '</div>'
         },
-        D = Datepicker;
+        datepicker = $.fn.datepicker,
+        dp = datepicker.Constructor;
 
-    D.Body = function (d, type, opts) {
+    datepicker.Body = function (d, type, opts) {
         this.d = d;
         this.type = type;
         this.opts = opts;
@@ -1243,7 +1438,7 @@
         this.init();
     };
 
-    D.Body.prototype = {
+    datepicker.Body.prototype = {
         init: function () {
             this._buildBaseHtml();
             this._render();
@@ -1279,7 +1474,7 @@
                 currentDate = new Date(),
                 parent = this.d,
                 opts = parent.opts,
-                d = D.getParsedDate(date),
+                d = dp.getParsedDate(date),
                 render = {},
                 html = d.date;
 
@@ -1323,34 +1518,34 @@
             }
 
             if (opts.range) {
-                if (D.isSame(parent.minRange, date, type)) classes += ' -range-from-';
+                if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
-                if (D.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
+                if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
 
                 if (parent.selectedDates.length == 1 && parent.focused) {
                     if (
-                        (D.bigger(parent.minRange, date) && D.less(parent.focused, date)) ||
+                        (dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
-                        (D.less(parent.maxRange, date) && D.bigger(parent.focused, date)))
+                        (dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
                     {
                         classes += ' -in-range-'
                     }
 
-                    if (D.less(parent.maxRange, date) && D.isSame(parent.focused, date)) {
+                    if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-from-'
                     }
-                    if (D.bigger(parent.minRange, date) && D.isSame(parent.focused, date)) {
+                    if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-to-'
                     }
 
                 } else if (parent.selectedDates.length == 2) {
-                    if (D.bigger(parent.minRange, date) && D.less(parent.maxRange, date)) {
+                    if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
                         classes += ' -in-range-'
                     }
                 }
             }
 
 
-            if (D.isSame(currentDate, date, type)) classes += ' -current-';
+            if (dp.isSame(currentDate, date, type)) classes += ' -current-';
-            if (parent.focused && D.isSame(date, parent.focused, type)) classes += ' -focus-';
+            if (parent.focused && dp.isSame(date, parent.focused, type)) classes += ' -focus-';
             if (parent._isSelected(date, type)) classes += ' -selected-';
             if (!parent._isInRange(date, type) || render.disabled) classes += ' -disabled-';
 
@@ -1367,7 +1562,7 @@
          * @private
          */
         _getDaysHtml: function (date) {
-            var totalMonthDays = D.getDaysCount(date),
+            var totalMonthDays = dp.getDaysCount(date),
                 firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
                 lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
                 daysFromPevMonth = firstMonthDay - this.d.loc.firstDay,
@@ -1407,7 +1602,7 @@
          */
         _getMonthsHtml: function (date) {
             var html = '',
-                d = D.getParsedDate(date),
+                d = dp.getParsedDate(date),
                 i = 0;
 
             while(i < 12) {
@@ -1425,8 +1620,8 @@
         },
 
         _getYearsHtml: function (date) {
-            var d = D.getParsedDate(date),
+            var d = dp.getParsedDate(date),
-                decade = D.getDecade(date),
+                decade = dp.getDecade(date),
                 firstYear = decade[0] - 1,
                 html = '',
                 i = firstYear;
@@ -1509,9 +1704,15 @@
                 alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
 
             if (!alreadySelected) {
-                this.d.selectDate(selectedDate);
+                this.d._trigger('clickCell', selectedDate);
             } else if (alreadySelected && this.opts.toggleSelected){
                 this.d.removeDate(selectedDate);
+            } else if (alreadySelected && !this.opts.toggleSelected) {
+                this.d.lastSelectedDate = alreadySelected;
+                if (this.d.opts.timepicker) {
+                    this.d.timepicker._setTime(alreadySelected);
+                    this.d.timepicker.update();
+                }
             }
 
         },
@@ -1532,9 +1733,11 @@
         '<div class="datepicker--nav-title">#{title}</div>' +
         '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
         buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
-        button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
+        button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>',
+        datepicker = $.fn.datepicker,
+        dp = datepicker.Constructor;
 
-    Datepicker.Navigation = function (d, opts) {
+    datepicker.Navigation = function (d, opts) {
         this.d = d;
         this.opts = opts;
 
@@ -1543,7 +1746,7 @@
         this.init();
     };
 
-    Datepicker.Navigation.prototype = {
+    datepicker.Navigation.prototype = {
         init: function () {
             this._buildBaseHtml();
             this._bindEvents();
@@ -1571,7 +1774,7 @@
 
         _render: function () {
             var title = this._getTitle(this.d.currentDate),
-                html = Datepicker.template(template, $.extend({title: title}, this.opts));
+                html = dp.template(template, $.extend({title: title}, this.opts));
             this.d.$nav.html(html);
             if (this.d.view == 'years') {
                 $('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
@@ -1592,7 +1795,7 @@
                     action: type,
                     label: this.d.loc[type]
                 },
-                html = Datepicker.template(button, data);
+                html = dp.template(button, data);
 
             if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
             this.$buttonsContainer.append(html);
@@ -1665,5 +1868,265 @@
         }
     }
 
+})();
+
+;(function () {
+    var template = '<div class="datepicker--time">' +
+        '<div class="datepicker--time-current">' +
+        '   <span class="datepicker--time-current-hours">#{hourValue}</span>' +
+        '   <span class="datepicker--time-current-colon">:</span>' +
+        '   <span class="datepicker--time-current-minutes">#{minValue}</span>' +
+        '</div>' +
+        '<div class="datepicker--time-sliders">' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
+        '   </div>' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
+        '   </div>' +
+        '</div>' +
+        '</div>',
+        datepicker = $.fn.datepicker,
+        dp = datepicker.Constructor;
+
+    datepicker.Timepicker = function (inst, opts) {
+        this.d = inst;
+        this.opts = opts;
+
+        this.init();
+    };
+
+    datepicker.Timepicker.prototype = {
+        init: function () {
+            var input = 'input';
+            this._setTime(this.d.date);
+            this._buildHTML();
+
+            if (navigator.userAgent.match(/trident/gi)) {
+                input = 'change';
+            }
+
+            this.d.$el.on('selectDate', this._onSelectDate.bind(this));
+            this.$ranges.on(input, this._onChangeRange.bind(this));
+            this.$ranges.on('mouseup', this._onMouseUpRange.bind(this));
+            this.$ranges.on('mousemove focus ', this._onMouseEnterRange.bind(this));
+            this.$ranges.on('mouseout blur', this._onMouseOutRange.bind(this));
+        },
+
+        _setTime: function (date) {
+            var _date = dp.getParsedDate(date);
+
+            this._handleDate(date);
+            this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
+            this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
+        },
+
+        _setMinTimeFromDate: function (date) {
+            this.minHours = date.getHours();
+            this.minMinutes = date.getMinutes();
+        },
+
+        _setMaxTimeFromDate: function (date) {
+            this.maxHours = date.getHours();
+            this.maxMinutes = date.getMinutes();
+        },
+
+        _setDefaultMinMaxTime: function () {
+            var maxHours = 23,
+                maxMinutes = 59,
+                opts = this.opts;
+
+            this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
+            this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
+            this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
+            this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes;
+        },
+
+        /**
+         * Looks for min/max hours/minutes and if current values
+         * are out of range sets valid values.
+         * @private
+         */
+        _validateHoursMinutes: function (date) {
+            if (this.hours < this.minHours) {
+                this.hours = this.minHours;
+            } else if (this.hours > this.maxHours) {
+                this.hours = this.maxHours;
+            }
+
+            if (this.minutes < this.minMinutes) {
+                this.minutes = this.minMinutes;
+            } else if (this.minutes > this.maxMinutes) {
+                this.minutes = this.maxMinutes;
+            }
+        },
+
+        _buildHTML: function () {
+            var lz = dp.getLeadingZeroNum,
+                data = {
+                    hourMin: this.minHours,
+                    hourMax: lz(this.maxHours),
+                    hourStep: this.opts.hoursStep,
+                    hourValue: lz(this.displayHours),
+                    minMin: this.minMinutes,
+                    minMax: lz(this.maxMinutes),
+                    minStep: this.opts.minutesStep,
+                    minValue: lz(this.minutes)
+                },
+                _template = dp.template(template, data);
+
+            this.$timepicker = $(_template).appendTo(this.d.$datepicker);
+            this.$ranges = $('[type="range"]', this.$timepicker);
+            this.$hours = $('[name="hours"]', this.$timepicker);
+            this.$minutes = $('[name="minutes"]', this.$timepicker);
+            this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
+            this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
+
+            if (this.d.ampm) {
+                this.$ampm = $('<span class="datepicker--time-current-ampm">')
+                    .appendTo($('.datepicker--time-current', this.$timepicker))
+                    .html(this.dayPeriod);
+
+                this.$timepicker.addClass('-am-pm-');
+            }
+        },
+
+        _updateCurrentTime: function () {
+            var h =  dp.getLeadingZeroNum(this.displayHours),
+                m = dp.getLeadingZeroNum(this.minutes);
+
+            this.$hoursText.html(h);
+            this.$minutesText.html(m);
+
+            if (this.d.ampm) {
+                this.$ampm.html(this.dayPeriod);
+            }
+        },
+
+        _updateRanges: function () {
+            this.$hours.attr({
+                min: this.minHours,
+                max: this.maxHours
+            }).val(this.hours);
+
+            this.$minutes.attr({
+                min: this.minMinutes,
+                max: this.maxMinutes
+            }).val(this.minutes)
+        },
+
+        /**
+         * Sets minHours, minMinutes etc. from date. If date is not passed, than sets
+         * values from options
+         * @param [date] {object} - Date object, to get values from
+         * @private
+         */
+        _handleDate: function (date) {
+            this._setDefaultMinMaxTime();
+
+            if (date) {
+                if (dp.isSame(date, this.d.opts.minDate)) {
+                    this._setMinTimeFromDate(this.d.opts.minDate);
+                } else if (dp.isSame(date, this.d.opts.maxDate)) {
+                    this._setMaxTimeFromDate(this.d.opts.maxDate);
+                }
+            }
+
+            this._validateHoursMinutes(date);
+        },
+
+        update: function () {
+            this._updateRanges();
+            this._updateCurrentTime();
+        },
+
+        /**
+         * Calculates valid hour value to display in text input and datepicker's body.
+         * @param date {Date|Number} - date or hours
+         * @returns {{hours: *, dayPeriod: string}}
+         * @private
+         */
+        _getValidHoursFromDate: function (date) {
+            var d = date,
+                hours = date;
+
+            if (date instanceof Date) {
+                d = dp.getParsedDate(date);
+                hours = d.hours;
+            }
+
+            var ampm = this.d.ampm,
+                dayPeriod = 'am';
+
+            if (ampm) {
+                switch(true) {
+                    case hours == 0:
+                        hours = 12;
+                        break;
+                    case hours == 12:
+                        dayPeriod = 'pm';
+                        break;
+                    case hours > 11:
+                        hours = hours - 12;
+                        dayPeriod = 'pm';
+                        break;
+                    default:
+                        break;
+                }
+            }
+
+            return {
+                hours: hours,
+                dayPeriod: dayPeriod
+            }
+        },
+
+        set hours (val) {
+            this._hours = val;
+
+            var displayHours = this._getValidHoursFromDate(val);
+
+            this.displayHours = displayHours.hours;
+            this.dayPeriod = displayHours.dayPeriod;
+        },
+
+        get hours() {
+            return this._hours;
+        },
+
+        //  Events
+        // -------------------------------------------------
+
+        _onChangeRange: function (e) {
+            var $target = $(e.target),
+                name = $target.attr('name');
+            
+            this.d.timepickerIsActive = true;
+
+            this[name] = $target.val();
+            this._updateCurrentTime();
+            this.d._trigger('timeChange', [this.hours, this.minutes])
+        },
+
+        _onSelectDate: function (e, data) {
+            this._handleDate(data);
+            this.update();
+        },
+
+        _onMouseEnterRange: function (e) {
+            var name = $(e.target).attr('name');
+            $('.datepicker--time-current-' + name, this.$timepicker).addClass('-focus-');
+        },
+
+        _onMouseOutRange: function (e) {
+            var name = $(e.target).attr('name');
+            if (this.d.inFocus) return; // Prevent removing focus when mouse out of range slider
+            $('.datepicker--time-current-' + name, this.$timepicker).removeClass('-focus-');
+        },
+
+        _onMouseUpRange: function (e) {
+            this.d.timepickerIsActive = false;
+        }
+    };
 })();
  })(window, jQuery);

dist/js/i18n/datepicker.da.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['da'] = {
+    days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
+    daysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
+    daysMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
+    months: ['Januar','Februar','Marts','April','Maj','Juni', 'Juli','August','September','Oktober','November','December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
+    today: 'I dag',
+    clear: 'Nulstil',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+}; })(jQuery);

dist/js/i18n/datepicker.de.js

@@ -1,4 +1,4 @@
-Datepicker.language['de'] = {
+;(function ($) { $.fn.datepicker.language['de'] = {
     days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
     daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
     daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
@@ -7,5 +7,7 @@ Datepicker.language['de'] = {
     today: 'Heute',
     clear: 'Aufräumen',
     dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
     firstDay: 1
 };
+ })(jQuery);

dist/js/i18n/datepicker.en.js

@@ -1,4 +1,5 @@
-Datepicker.language['en'] = {
+;(function ($) { 
+    $.fn.datepicker.language['en'] = {
     days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
@@ -6,6 +7,8 @@ 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
-};
+};
+})(jQuery);

dist/js/i18n/datepicker.nl.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['nl'] = {
+    days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    daysMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
+    monthsShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
+    today: 'Vandaag',
+    clear: 'Legen',
+    dateFormat: 'dd-MM-yy',
+    timeFormat: 'hh:ii',
+    firstDay: 0
+}; })(jQuery);

dist/js/i18n/datepicker.pt-BR.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['pt-BR'] = {
+    days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
+    daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
+    daysMin: ['Do', 'Se', 'Te', 'Qu', 'Qu', 'Se', 'Sa'],
+    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
+    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+    today: 'Hoje',
+    clear: 'Limpar',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 0
+}; })(jQuery);

dist/js/i18n/datepicker.pt.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['pt'] = {
+    days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
+    daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
+    daysMin: ['Do', 'Se', 'Te', 'Qa', 'Qi', 'Sx', 'Sa'],
+    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
+    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+    today: 'Hoje',
+    clear: 'Limpar',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+}; })(jQuery);

dist/js/i18n/datepicker.ro.js

@@ -0,0 +1,13 @@
+;(function ($) { $.fn.datepicker.language['ro'] = {
+    days: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
+    daysShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
+    daysMin: ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'],
+    months: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie','Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
+    monthsShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+    today: 'Azi',
+    clear: 'Şterge',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};
+ })(jQuery);

dist/js/i18n/datepicker.zh.js

@@ -1,4 +1,4 @@
-Datepicker.language['zh'] = {
+;(function ($) { $.fn.datepicker.language['zh'] = {
     days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
     daysShort: ['日', '一', '二', '三', '四', '五', '六'],
     daysMin: ['日', '一', '二', '三', '四', '五', '六'],
@@ -7,5 +7,6 @@ Datepicker.language['zh'] = {
     today: '今天',
     clear: '清除',
     dateFormat: 'yyyy-mm-dd',
+    timeFormat: 'hh:ii',
     firstDay: 1
-};
+}; })(jQuery);

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

@@ -17,7 +17,7 @@ block content
 	article
 		h2#intro Описание
 		p
-			| Легкий (<i><strong>~26kb</strong> минифицированный js файл и <strong>~7kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
+			| Легкий (<i><strong>~34kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
 			+example-inline('es5')
 			| и
 			+example-inline('css flexbox', 'js')
@@ -277,6 +277,147 @@ 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')
+			| - она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.
+		p По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром
+			+example-inline('startDate', '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' class='nav-link'>Опциях</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.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 Локализация
 		p
@@ -317,6 +458,7 @@ block content
 				today: 'Сегодня',
 				clear: 'Очистить',
 				dateFormat: 'dd.mm.yyyy',
+				timeFormat: 'hh:ii',
 				firstDay: 1
 			};
 
@@ -526,8 +668,13 @@ block content
 			p Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован
 				+example-inline('multipleDatesSeparator')
 		.param
-			+param-header('todayButton', 'boolean', 'false')
+			+param-header('todayButton', 'boolean|Date', 'false')
-			p Если true, то будет отображена кнопка "Сегодня".
+			p Если true, то будет отображена кнопка "Сегодня". Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.
+			+example-code('js').
+				// Выбор сегодняшнего дня
+				$('.datepicker').datepicker({
+					todayButton: new Date()
+				})
 
 		.param
 			+param-header('clearButton', 'boolean', 'false')
@@ -575,6 +722,69 @@ block content
 				+example-inline('view = "months"', 'js')
 				| .
 
+		.param
+			+param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
+			p Если
+				+example-inline('true')
+				| , то будет добавлена возомжность выбора времени.
+
+		.param
+			+param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
+			p Разделитель между датой и временем.
+
+		.param
+			+param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
+			p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
+				| Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр
+				+example-inline('timeFormat','js')
+				|, например
+				+example-inline('{timeFormat: "hh:ii AA"}','js')
+				| Возможные варианты:
+			ul
+				li
+					+param('h')
+					| - часы
+				li
+					+param('hh')
+					| - часы, с лидирующим нулем
+				li
+					+param('i')
+					| - минуты
+				li
+					+param('ii')
+					| - минуты, с лидирующим нулем
+				li
+					+param('aa')
+					| - период дня - 'am' или 'pm'
+				li
+					+param('AA')
+					| - период дня заглавными буквами
+
+		.param
+			+param-header('minHours', 'number', '0', 'opts-minHours')
+			p Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.
+
+		.param
+			+param-header('maxHours', 'number', '23', 'opts-maxHours')
+			p Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.
+
+		.param
+			+param-header('minMinutes', 'number', '0', 'opts-minMinutes')
+			p Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.
+
+		.param
+			+param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
+			p Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.
+
+		.param
+			+param-header('hoursStep', 'number', '1', 'opts-hoursStep')
+			p Шаг выбора часов.
+
+		.param
+			+param-header('minutesStep', 'number', '1', 'opts-minutesStep')
+			p Шаг выбора минут.
+
+
 	article
 		h2#events События
 		.param

docs/jade/pages/index.jade

@@ -17,7 +17,7 @@ block content
 	article
 		h2#intro Description
 		p
-			| Light (<i><strong>~26kb</strong> minified js file and <strong>~7kb</strong> gziped</i>) customizable cross-browser calendar, built with
+			| Light (<i><strong>~34kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with
 			+example-inline('es5')
 			| and
 			+example-inline('css flexbox', 'js')
@@ -270,6 +270,151 @@ 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 Actions with time
+		p For setting max/min hours or minutes values use
+			+example-inline('maxHours','js')
+			| ,
+			+example-inline('minHours','js')
+			| ,
+			+example-inline('maxMinutes','js')
+			| ,
+			+example-inline('minMinutes','js')
+			| . You also could set time in
+			+example-inline('minDate','js')
+			| and
+			+example-inline('maxDate','js')
+			|. For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.
+		p Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.
+
+		+example
+			+example-content
+				input(type='text')#timepicker-actions-exmpl
+				script.
+					// Create start date
+					var start = new Date(),
+						startHours = 9;
+
+					// 09:00 AM
+					start.setHours(9);
+					start.setMinutes(0);
+
+					// If today is Saturday or Sunday set 10:00 AM
+					if ([6, 0].indexOf(start.getDay()) != -1) {
+						start.setHours(10);
+						startHours = 10
+					}
+
+					$('#timepicker-actions-exmpl').datepicker({
+						timepicker: true,
+						language: 'en',
+						startDate: start,
+						minHours: startHours,
+						maxHours: 18,
+						onSelect: function (fd, d, picker) {
+							// Do nothing if selection was cleared
+							if (!d) return;
+
+							var day = d.getDay();
+							// If chosen day is Saturday or Sunday when set
+							// hour value for weekends, else restore defaults
+							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>
+						// Create start date
+						var start = new Date(),
+							startHours = 9;
+
+						// 09:00 AM
+						start.setHours(9);
+						start.setMinutes(0);
+
+						// If today is Saturday or Sunday set 10:00 AM
+						if ([6, 0].indexOf(start.getDay()) != -1) {
+							start.setHours(10);
+							startHours = 10
+						}
+
+						$('#timepicker-actions-exmpl').datepicker({
+							timepicker: true,
+							language: 'en',
+							startDate: start,
+							minHours: startHours,
+							maxHours: 18,
+							onSelect: function (fd, d, picker) {
+								// Do nothing if selection was cleared
+								if (!d) return;
+
+								var day = d.getDay();
+								// If chosen day is Saturday or Sunday when set
+								// hour value for weekends, else restore defaults
+								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 +451,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
@@ -499,8 +645,13 @@ block content
 				+example-inline('multipleDatesSeparator')
 				| will be used as dates separator.
 		.param
-			+param-header('todayButton', 'boolean', 'false')
+			+param-header('todayButton', 'boolean|Date', 'false')
-			p If true, then button "Today" will be visible.
+			p If true, then button "Today" will be visible. If Date is passed then click event will also select passed date.
+			+example-code('js').
+				// Select today
+				$('.datepicker').datepicker({
+					todayButton: new Date()
+				})
 		.param
 			+param-header('clearButton', 'boolean', 'false')
 			p If true, then button "Clear" will be visible.
@@ -540,6 +691,69 @@ block content
 			+param-header('monthsField','string','"monthsShort"')
 			p Field name from localization object which should be used as months names, when view is 'months'.
 
+		.param
+			+param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
+			p If
+				+example-inline('true')
+				| , when timepicker widget will be added.
+
+		.param
+			+param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
+			p Separator between date and time
+
+		.param
+			+param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
+			p
+				| Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
+				| For using 12 hours mode, add "aa" or "AA" to your
+				+example-inline('timeFormat','js')
+				| parameter, e.g.
+				+example-inline('{timeFormat: "hh:ii AA"}','js')
+				| Possible values are:
+			ul
+				li
+					+param('h')
+					| - hours
+				li
+					+param('hh')
+					| - hours with leading zero
+				li
+					+param('i')
+					| - minutes
+				li
+					+param('ii')
+					| - minutes with leading zero
+				li
+					+param('aa')
+					| - day period - 'am' or 'pm'
+				li
+					+param('AA')
+					| - day period capitalized
+
+		.param
+			+param-header('minHours', 'number', '0', 'opts-minHours')
+			p Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.
+
+		.param
+			+param-header('maxHours', 'number', '23', 'opts-maxHours')
+			p Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.
+
+		.param
+			+param-header('minMinutes', 'number', '0', 'opts-minMinutes')
+			p Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.
+
+		.param
+			+param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
+			p Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.
+
+		.param
+			+param-header('hoursStep', 'number', '1', 'opts-hoursStep')
+			p Hours step in slider.
+
+		.param
+			+param-header('minutesStep', 'number', '1', 'opts-minutesStep')
+			p Minutes step in slider.
+
 	article
 		h2#events Events
 		.param

docs/js/navigation.js

@@ -60,7 +60,6 @@ var navigation;
         var id,
             title,
             subTitles,
-            subId,
             $subTitle,
             $current;
 
@@ -80,8 +79,13 @@ var navigation;
                 cache[id].subSections = {};
 
                 subTitles.each(function () {
-                    subId = idPrefix + idCounter++;
+                     var $subTitle = $(this),
-                    $subTitle = $(this).attr('id', subId);
+                         subId = $(this).attr('id');
+
+                    if (!subId) {
+                        subId = idPrefix + idCounter++;
+                        $subTitle.attr('id', subId);
+                    }
 
                     cache[id].subSections[subId] = {
                         title: $subTitle.text(),

docs/sass/_docs.scss

@@ -438,4 +438,72 @@ a {
     background: #fff;
     opacity: .5;
   }
+}
+
+//  Visual tests
+// -------------------------------------------------
+
+.visual-tests {
+  padding-top: 12px;
+  padding-bottom: 120px;
+
+  h1 {
+    color: #555;
+    font-size: 20px;
+    margin: 0;
+    padding-left: 16px;
+  }
+
+  .row {
+    border-bottom: 1px solid #eee;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+
+
+  }
+
+  article:last-child {
+    .row {
+      border: none;
+    }
+  }
+}
+
+.vt-tile {
+  padding: 16px;
+  width: 284px;
+
+  input {
+    width: 100%;
+  }
+
+  h2 {
+    font-family: monospace;
+    font-size: 14px;
+    margin: 0 0 8px;
+    text-align: center;
+  }
+}
+
+.v-log {
+  position: fixed;
+  padding: 8px;
+  font-size: 12px;
+  font-family: monospace;
+  background: rgba(0, 0, 0, .7);
+  height: 100px;
+  width: 100%;
+  bottom: 0;
+  overflow: auto;
+  z-index: 10;
+
+  p {
+    margin: 0;
+    color: greenyellow;
+  }
+
+  span {
+    color: #ddd;
+  }
 }

gulpfile.js

@@ -30,6 +30,9 @@ gulp.task('watch', function () {
     });
 });
 
+gulp.task('dev', ['css','js','i18n', 'cssPage', 'jade-ru', 'jade-en', 'watch']);
+gulp.task('build', ['css','js','i18n', 'jade-ru',' jade-en']);
+
 
 
 

package.json

@@ -1,8 +1,9 @@
 {
   "name": "air-datepicker",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "devDependencies": {
     "autoprefixer": "^6.1.0",
+    "browserify": "^13.0.0",
     "chai": "^3.4.1",
     "gulp": "^3.9.0",
     "gulp-clone": "^1.0.0",
@@ -19,6 +20,34 @@
     "gulp-watch": "^4.3.5",
     "gulp-wrap": "^0.11.0",
     "jade": "^1.11.0",
-    "mocha": "^2.3.4"
+    "mocha": "^2.3.4",
-  }
+    "node-static": "^0.7.7",
+    "vinyl-source-stream": "^1.1.0"
+  },
+  "dependencies": {
+    "jquery": "^2.2.3"
+  },
+  "description": "Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested no Android 4.4+ and iOS8+)\r ![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img.png)",
+  "main": "src/js/air-datepicker.js",
+  "directories": {
+    "doc": "docs",
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t1m0n/air-datepicker.git"
+  },
+  "keywords": [
+    "datepicker",
+    "timepicker",
+    "plugin",
+    "customizable",
+    "powerful"
+  ],
+  "author": "t1m0n <t1m0n.tr@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/t1m0n/air-datepicker/issues"
+  },
+  "homepage": "http://t1m0n.name/air-datepicker/docs/"
 }

src/js/air-datepicker.js

@@ -0,0 +1,4 @@
+require('./datepicker');
+require('./body');
+require('./navigation');
+require('./timepicker');

src/js/body.js

@@ -14,9 +14,10 @@
         '<div class="datepicker--cells datepicker--cells-years"></div>' +
         '</div>'
         },
-        D = Datepicker;
+        datepicker = $.fn.datepicker,
+        dp = datepicker.Constructor;
 
-    D.Body = function (d, type, opts) {
+    datepicker.Body = function (d, type, opts) {
         this.d = d;
         this.type = type;
         this.opts = opts;
@@ -24,7 +25,7 @@
         this.init();
     };
 
-    D.Body.prototype = {
+    datepicker.Body.prototype = {
         init: function () {
             this._buildBaseHtml();
             this._render();
@@ -60,7 +61,7 @@
                 currentDate = new Date(),
                 parent = this.d,
                 opts = parent.opts,
-                d = D.getParsedDate(date),
+                d = dp.getParsedDate(date),
                 render = {},
                 html = d.date;
 
@@ -104,34 +105,34 @@
             }
 
             if (opts.range) {
-                if (D.isSame(parent.minRange, date, type)) classes += ' -range-from-';
+                if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
-                if (D.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
+                if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
 
                 if (parent.selectedDates.length == 1 && parent.focused) {
                     if (
-                        (D.bigger(parent.minRange, date) && D.less(parent.focused, date)) ||
+                        (dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
-                        (D.less(parent.maxRange, date) && D.bigger(parent.focused, date)))
+                        (dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
                     {
                         classes += ' -in-range-'
                     }
 
-                    if (D.less(parent.maxRange, date) && D.isSame(parent.focused, date)) {
+                    if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-from-'
                     }
-                    if (D.bigger(parent.minRange, date) && D.isSame(parent.focused, date)) {
+                    if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-to-'
                     }
 
                 } else if (parent.selectedDates.length == 2) {
-                    if (D.bigger(parent.minRange, date) && D.less(parent.maxRange, date)) {
+                    if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
                         classes += ' -in-range-'
                     }
                 }
             }
 
 
-            if (D.isSame(currentDate, date, type)) classes += ' -current-';
+            if (dp.isSame(currentDate, date, type)) classes += ' -current-';
-            if (parent.focused && D.isSame(date, parent.focused, type)) classes += ' -focus-';
+            if (parent.focused && dp.isSame(date, parent.focused, type)) classes += ' -focus-';
             if (parent._isSelected(date, type)) classes += ' -selected-';
             if (!parent._isInRange(date, type) || render.disabled) classes += ' -disabled-';
 
@@ -148,7 +149,7 @@
          * @private
          */
         _getDaysHtml: function (date) {
-            var totalMonthDays = D.getDaysCount(date),
+            var totalMonthDays = dp.getDaysCount(date),
                 firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
                 lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
                 daysFromPevMonth = firstMonthDay - this.d.loc.firstDay,
@@ -188,7 +189,7 @@
          */
         _getMonthsHtml: function (date) {
             var html = '',
-                d = D.getParsedDate(date),
+                d = dp.getParsedDate(date),
                 i = 0;
 
             while(i < 12) {
@@ -206,8 +207,8 @@
         },
 
         _getYearsHtml: function (date) {
-            var d = D.getParsedDate(date),
+            var d = dp.getParsedDate(date),
-                decade = D.getDecade(date),
+                decade = dp.getDecade(date),
                 firstYear = decade[0] - 1,
                 html = '',
                 i = firstYear;
@@ -290,9 +291,15 @@
                 alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
 
             if (!alreadySelected) {
-                this.d.selectDate(selectedDate);
+                this.d._trigger('clickCell', selectedDate);
             } else if (alreadySelected && this.opts.toggleSelected){
                 this.d.removeDate(selectedDate);
+            } else if (alreadySelected && !this.opts.toggleSelected) {
+                this.d.lastSelectedDate = alreadySelected;
+                if (this.d.opts.timepicker) {
+                    this.d.timepicker._setTime(alreadySelected);
+                    this.d.timepicker.update();
+                }
             }
 
         },

src/js/datepicker.js

@@ -1,6 +1,4 @@
-window.Datepicker = '';
+;(function () {
-
-(function () {
     var pluginName = 'datepicker',
         autoInitSelector = '.datepicker-here',
         $body, $datepickersContainer,
@@ -62,6 +60,17 @@ window.Datepicker = '';
                 years: 'yyyy1 - yyyy2'
             },
 
+            // timepicker
+            timepicker: false,
+            dateTimeSeparator: ' ',
+            timeFormat: '',
+            minHours: 0,
+            maxHours: 24,
+            minMinutes: 0,
+            maxMinutes: 59,
+            hoursStep: 1,
+            minutesStep: 1,
+
             // events
             onSelect: '',
             onChangeMonth: '',
@@ -87,7 +96,7 @@ window.Datepicker = '';
         },
         datepicker;
 
-    Datepicker  = function (el, options) {
+    var Datepicker  = function (el, options) {
         this.el = el;
         this.$el = $(el);
 
@@ -121,6 +130,7 @@ window.Datepicker = '';
         this.keys = [];
         this.minRange = '';
         this.maxRange = '';
+        this._prevOnSelectValue = '';
 
         this.init()
     };
@@ -155,11 +165,17 @@ window.Datepicker = '';
                 this.$datepicker.addClass(this.opts.classes)
             }
 
-            this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
+            if (this.opts.timepicker) {
+                this.timepicker = new $.fn.datepicker.Timepicker(this, this.opts);
+                this._bindTimepickerEvents();
+            }
+
+            this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
-            this.nav = new Datepicker.Navigation(this, this.opts);
+            this.nav = new $.fn.datepicker.Navigation(this, this.opts);
             this.view = this.currentView;
 
+            this.$el.on('clickCell.adp', this._onClickCell.bind(this));
             this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
             this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
 
@@ -173,9 +189,11 @@ window.Datepicker = '';
 
         _bindEvents : function () {
             this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
+            this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
             this.$el.on('blur.adp', this._onBlur.bind(this));
-            this.$el.on('input.adp', this._onInput.bind(this));
+            this.$el.on('keyup.adp', this._onKeyUpGeneral.bind(this));
             $(window).on('resize.adp', this._onResize.bind(this));
+            $('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
         },
 
         _bindKeyboardEvents: function () {
@@ -184,30 +202,49 @@ window.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;
         },
 
         _defineLocale: function (lang) {
             if (typeof lang == 'string') {
-                this.loc = Datepicker.language[lang];
+                this.loc = $.fn.datepicker.language[lang];
                 if (!this.loc) {
                     console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
-                    this.loc = $.extend(true, {}, Datepicker.language.ru)
+                    this.loc = $.extend(true, {}, $.fn.datepicker.language.ru)
                 }
 
-                this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
+                this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, $.fn.datepicker.language[lang])
             } else {
-                this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
+                this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, lang)
             }
 
             if (this.opts.dateFormat) {
                 this.loc.dateFormat = this.opts.dateFormat
             }
 
+            if (this.opts.timeFormat) {
+                this.loc.timeFormat = this.opts.timeFormat
+            }
+
             if (this.opts.firstDay !== '') {
                 this.loc.firstDay = this.opts.firstDay
             }
+
+            if (this.opts.timepicker) {
+                this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
+            }
+
+            var boundary = this._getWordBoundaryRegExp;
+            if (this.loc.timeFormat.match(boundary('aa')) ||
+                this.loc.timeFormat.match(boundary('AA'))
+            ) {
+               this.ampm = true;
+            }
         },
 
         _buildDatepickersContainer: function () {
@@ -237,6 +274,9 @@ window.Datepicker = '';
 
         _triggerOnChange: function () {
             if (!this.selectedDates.length) {
+                // Prevent from triggering multiple onSelect callback with same argument (empty string) in IE10-11
+                if (this._prevOnSelectValue === '') return;
+                this._prevOnSelectValue = '';
                 return this.opts.onSelect('', '', this);
             }
 
@@ -244,7 +284,13 @@ window.Datepicker = '';
                 parsedSelected = datepicker.getParsedDate(selectedDates[0]),
                 formattedDates,
                 _this = this,
-                dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
+                dates = new Date(
+                    parsedSelected.year,
+                    parsedSelected.month,
+                    parsedSelected.date,
+                    parsedSelected.hours,
+                    parsedSelected.minutes
+                );
 
                 formattedDates = selectedDates.map(function (date) {
                     return _this.formatDate(_this.loc.dateFormat, date)
@@ -254,10 +300,17 @@ window.Datepicker = '';
             if (this.opts.multipleDates || this.opts.range) {
                 dates = selectedDates.map(function(date) {
                     var parsedDate = datepicker.getParsedDate(date);
-                    return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
+                    return new Date(
+                        parsedSelected.year,
+                        parsedSelected.month,
+                        parsedSelected.date,
+                        parsedSelected.hours,
+                        parsedSelected.minutes
+                    );
                 })
             }
 
+            this._prevOnSelectValue = formattedDates;
             this.opts.onSelect(formattedDates, dates, this);
         },
 
@@ -304,12 +357,28 @@ window.Datepicker = '';
             var result = string,
                 boundary = this._getWordBoundaryRegExp,
                 locale = this.loc,
+                leadingZero = datepicker.getLeadingZeroNum,
                 decade = datepicker.getDecade(date),
-                d = datepicker.getParsedDate(date);
+                d = datepicker.getParsedDate(date),
+                fullHours = d.fullHours,
+                hours = d.hours,
+                dayPeriod = 'am',
+                validHours;
+
+            if (this.opts.timepicker && this.timepicker && this.ampm) {
+                validHours = this.timepicker._getValidHoursFromDate(date);
+                fullHours = leadingZero(validHours.hours);
+                hours = validHours.hours;
+                dayPeriod = validHours.dayPeriod;
+            }
 
             switch (true) {
                 case /@/.test(result):
                     result = result.replace(/@/, date.getTime());
+                case /aa/.test(result):
+                    result = result.replace(boundary('aa'), dayPeriod);
+                case /AA/.test(result):
+                    result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
                 case /dd/.test(result):
                     result = result.replace(boundary('dd'), d.fullDate);
                 case /d/.test(result):
@@ -326,6 +395,14 @@ window.Datepicker = '';
                     result = result.replace(boundary('MM'), this.loc.months[d.month]);
                 case /M/.test(result):
                     result = result.replace(boundary('M'), locale.monthsShort[d.month]);
+                case /ii/.test(result):
+                    result = result.replace(boundary('ii'), d.fullMinutes);
+                case /i/.test(result):
+                    result = result.replace(boundary('i'), d.minutes);
+                case /hh/.test(result):
+                    result = result.replace(boundary('hh'), fullHours);
+                case /h/.test(result):
+                    result = result.replace(boundary('h'), hours);
                 case /yyyy/.test(result):
                     result = result.replace(boundary('yyyy'), d.year);
                 case /yyyy1/.test(result):
@@ -351,8 +428,33 @@ window.Datepicker = '';
                 len = selectedDates.length,
                 newDate = '';
 
+            if (Array.isArray(date)) {
+                date.forEach(function (d) {
+                    _this.selectDate(d)
+                });
+                return;
+            }
+
             if (!(date instanceof Date)) return;
 
+            this.lastSelectedDate = date;
+
+            // Set new time values from Date
+            if (this.timepicker) {
+                this.timepicker._setTime(date);
+            }
+
+            // On this step timepicker will set valid values in it's instance
+            _this._trigger('selectDate', date);
+
+            // Set correct time values after timepicker's validation
+            // Prevent from setting hours or minutes which values are lesser then `min` value or
+            // greater then `max` value
+            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);
@@ -389,6 +491,11 @@ window.Datepicker = '';
                     } else {
                         _this.minRange = date;
                     }
+                    // Swap dates if they were selected via dp.selectDate() and second date was smaller then first
+                    if (datepicker.bigger(_this.maxRange, _this.minRange)) {
+                        _this.maxRange = _this.minRange;
+                        _this.minRange = date;
+                    }
                     _this.selectedDates = [_this.minRange, _this.maxRange]
 
                 } else {
@@ -405,7 +512,7 @@ window.Datepicker = '';
                 _this._triggerOnChange();
             }
 
-            if (opts.autoClose) {
+            if (opts.autoClose && !this.timepickerIsActive) {
                 if (!opts.multipleDates && !opts.range) {
                     _this.hide();
                 } else if (opts.range && _this.selectedDates.length == 2) {
@@ -429,6 +536,9 @@ window.Datepicker = '';
                     if (!_this.selectedDates.length) {
                         _this.minRange = '';
                         _this.maxRange = '';
+                        _this.lastSelectedDate = '';
+                    } else {
+                        _this.lastSelectedDate = _this.selectedDates[_this.selectedDates.length - 1];
                     }
 
                     _this.views[_this.currentView]._render();
@@ -448,6 +558,10 @@ window.Datepicker = '';
             this.view = this.opts.minView;
             this.silent = false;
             this.date = new Date();
+
+            if (this.opts.todayButton instanceof Date) {
+                this.selectDate(this.opts.todayButton)
+            }
         },
 
         clear: function () {
@@ -468,6 +582,7 @@ window.Datepicker = '';
          */
         update: function (param, value) {
             var len = arguments.length;
+
             if (len == 2) {
                 this.opts[param] = value;
             } else if (len == 1 && typeof param == 'object') {
@@ -492,6 +607,19 @@ window.Datepicker = '';
                 this.$datepicker.addClass(this.opts.classes)
             }
 
+            if (this.opts.timepicker) {
+                this.timepicker._handleDate(this.lastSelectedDate);
+                this.timepicker._updateRanges();
+                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;
         },
 
@@ -509,9 +637,14 @@ window.Datepicker = '';
         },
 
         _isSelected: function (checkDate, cellType) {
-            return this.selectedDates.some(function (date) {
+            var res = false;
-                return datepicker.isSame(date, checkDate, cellType)
+            this.selectedDates.some(function (date) {
-            })
+                if (datepicker.isSame(date, checkDate, cellType)) {
+                    res = date;
+                    return true;
+                }
+            });
+            return res;
         },
 
         _setInputValue: function () {
@@ -911,7 +1044,7 @@ window.Datepicker = '';
             }
         },
 
-        _onShowEvent: function () {
+        _onShowEvent: function (e) {
             if (!this.visible) {
                 this.show();
             }
@@ -929,10 +1062,11 @@ window.Datepicker = '';
 
         _onMouseUpDatepicker: function (e) {
             this.inFocus = false;
-            this.$el.focus()
+            e.originalEvent.inFocus = true;
+            if (!e.originalEvent.timepickerFocus) this.$el.focus();
         },
 
-        _onInput: function () {
+        _onKeyUpGeneral: function (e) {
             var val = this.$el.val();
 
             if (!val) {
@@ -946,6 +1080,19 @@ window.Datepicker = '';
             }
         },
 
+        _onMouseUpBody: function (e) {
+            if (e.originalEvent.inFocus) return;
+
+            if (this.visible && !this.inFocus) {
+                this.hide();
+            }
+        },
+
+        _onMouseUpEl: function (e) {
+            e.originalEvent.inFocus = true;
+            setTimeout(this._onKeyUpGeneral.bind(this),4);
+        },
+
         _onKeyDown: function (e) {
             var code = e.which;
             this._registerKey(code);
@@ -966,6 +1113,10 @@ window.Datepicker = '';
                         var alreadySelected = this._isSelected(this.focused, this.cellType);
 
                         if (!alreadySelected) {
+                            if (this.timepicker) {
+                                this.focused.setHours(this.timepicker.hours);
+                                this.focused.setMinutes(this.timepicker.minutes);
+                            }
                             this.selectDate(this.focused);
                         } else if (alreadySelected && this.opts.toggleSelected){
                             this.removeDate(this.focused);
@@ -1026,6 +1177,37 @@ window.Datepicker = '';
             this.silent = false;
         },
 
+        _onTimeChange: function (e, h, m) {
+            var date = new Date(),
+                selectedDates = this.selectedDates,
+                selected = false;
+
+            if (selectedDates.length) {
+                selected = true;
+                date = this.lastSelectedDate;
+            }
+
+            date.setHours(h);
+            date.setMinutes(m);
+
+            if (!selected && !this._getCell(date).hasClass('-disabled-')) {
+                this.selectDate(date);
+            } else {
+                this._setInputValue();
+                if (this.opts.onSelect) {
+                    this._triggerOnChange();
+                }
+            }
+        },
+
+        _onClickCell: function (e, date) {
+            if (this.timepicker) {
+                date.setHours(this.timepicker.hours);
+                date.setMinutes(this.timepicker.minutes);
+            }
+            this.selectDate(date);
+        },
+
         set focused(val) {
             if (!val && this.focused) {
                 var $cell = this._getCell(this.focused);
@@ -1086,7 +1268,7 @@ window.Datepicker = '';
 
             if (this.inited) {
                 if (!this.views[val]) {
-                    this.views[val] = new Datepicker.Body(this, val, this.opts)
+                    this.views[val] = new  $.fn.datepicker.Body(this, val, this.opts)
                 } else {
                     this.views[val]._render();
                 }
@@ -1141,7 +1323,11 @@ window.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()
         }
     };
 
@@ -1184,21 +1370,11 @@ window.Datepicker = '';
         return date.getTime() > dateCompareTo.getTime();
     };
 
-    Datepicker.language = {
+    datepicker.getLeadingZeroNum = function (num) {
-        ru: {
+        return parseInt(num) < 10 ? '0' + num : num;
-            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
-            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
-            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
-            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
-            today: 'Сегодня',
-            clear: 'Очистить',
-            dateFormat: 'dd.mm.yyyy',
-            firstDay: 1
-        }
     };
 
-    $.fn[pluginName] = function ( options ) {
+    $.fn.datepicker = function ( options ) {
         return this.each(function () {
             if (!$.data(this, pluginName)) {
                 $.data(this,  pluginName,
@@ -1212,8 +1388,25 @@ window.Datepicker = '';
         });
     };
 
+    $.fn.datepicker.Constructor = Datepicker;
+
+    $.fn.datepicker.language = {
+        ru: {
+            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
+            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+            today: 'Сегодня',
+            clear: 'Очистить',
+            dateFormat: 'dd.mm.yyyy',
+            timeFormat: 'hh:ii',
+            firstDay: 1
+        }
+    };
+
     $(function () {
         $(autoInitSelector).datepicker();
     })
 
-})();
+})();

src/js/i18n/datepicker.da.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['da'] = {
+    days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
+    daysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
+    daysMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
+    months: ['Januar','Februar','Marts','April','Maj','Juni', 'Juli','August','September','Oktober','November','December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
+    today: 'I dag',
+    clear: 'Nulstil',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/i18n/datepicker.de.js

@@ -1,4 +1,4 @@
-Datepicker.language['de'] = {
+$.fn.datepicker.language['de'] = {
     days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
     daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
     daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
@@ -7,5 +7,6 @@ Datepicker.language['de'] = {
     today: 'Heute',
     clear: 'Aufräumen',
     dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
     firstDay: 1
 };

src/js/i18n/datepicker.en.js

@@ -1,4 +1,4 @@
-Datepicker.language['en'] = {
+$.fn.datepicker.language['en'] = {
     days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
@@ -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
 };

src/js/i18n/datepicker.nl.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['nl'] = {
+    days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
+    daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    daysMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+    months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
+    monthsShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
+    today: 'Vandaag',
+    clear: 'Legen',
+    dateFormat: 'dd-MM-yy',
+    timeFormat: 'hh:ii',
+    firstDay: 0
+};

src/js/i18n/datepicker.pt-BR.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['pt-BR'] = {
+    days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
+    daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
+    daysMin: ['Do', 'Se', 'Te', 'Qu', 'Qu', 'Se', 'Sa'],
+    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
+    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+    today: 'Hoje',
+    clear: 'Limpar',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 0
+};

src/js/i18n/datepicker.pt.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['pt'] = {
+    days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
+    daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
+    daysMin: ['Do', 'Se', 'Te', 'Qa', 'Qi', 'Sx', 'Sa'],
+    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
+    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+    today: 'Hoje',
+    clear: 'Limpar',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/i18n/datepicker.ro.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['ro'] = {
+    days: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
+    daysShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
+    daysMin: ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'],
+    months: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie','Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
+    monthsShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+    today: 'Azi',
+    clear: 'Şterge',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/i18n/datepicker.zh.js

@@ -1,4 +1,4 @@
-Datepicker.language['zh'] = {
+$.fn.datepicker.language['zh'] = {
     days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
     daysShort: ['日', '一', '二', '三', '四', '五', '六'],
     daysMin: ['日', '一', '二', '三', '四', '五', '六'],
@@ -7,5 +7,6 @@ Datepicker.language['zh'] = {
     today: '今天',
     clear: '清除',
     dateFormat: 'yyyy-mm-dd',
+    timeFormat: 'hh:ii',
     firstDay: 1
 };

src/js/navigation.js

@@ -4,9 +4,11 @@
         '<div class="datepicker--nav-title">#{title}</div>' +
         '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
         buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
-        button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
+        button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>',
+        datepicker = $.fn.datepicker,
+        dp = datepicker.Constructor;
 
-    Datepicker.Navigation = function (d, opts) {
+    datepicker.Navigation = function (d, opts) {
         this.d = d;
         this.opts = opts;
 
@@ -15,7 +17,7 @@
         this.init();
     };
 
-    Datepicker.Navigation.prototype = {
+    datepicker.Navigation.prototype = {
         init: function () {
             this._buildBaseHtml();
             this._bindEvents();
@@ -43,7 +45,7 @@
 
         _render: function () {
             var title = this._getTitle(this.d.currentDate),
-                html = Datepicker.template(template, $.extend({title: title}, this.opts));
+                html = dp.template(template, $.extend({title: title}, this.opts));
             this.d.$nav.html(html);
             if (this.d.view == 'years') {
                 $('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
@@ -64,7 +66,7 @@
                     action: type,
                     label: this.d.loc[type]
                 },
-                html = Datepicker.template(button, data);
+                html = dp.template(button, data);
 
             if ($('[data-action=' + type + ']', this.$buttonsContainer).length) return;
             this.$buttonsContainer.append(html);

src/js/timepicker.js

@@ -0,0 +1,259 @@
+;(function () {
+    var template = '<div class="datepicker--time">' +
+        '<div class="datepicker--time-current">' +
+        '   <span class="datepicker--time-current-hours">#{hourValue}</span>' +
+        '   <span class="datepicker--time-current-colon">:</span>' +
+        '   <span class="datepicker--time-current-minutes">#{minValue}</span>' +
+        '</div>' +
+        '<div class="datepicker--time-sliders">' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
+        '   </div>' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
+        '   </div>' +
+        '</div>' +
+        '</div>',
+        datepicker = $.fn.datepicker,
+        dp = datepicker.Constructor;
+
+    datepicker.Timepicker = function (inst, opts) {
+        this.d = inst;
+        this.opts = opts;
+
+        this.init();
+    };
+
+    datepicker.Timepicker.prototype = {
+        init: function () {
+            var input = 'input';
+            this._setTime(this.d.date);
+            this._buildHTML();
+
+            if (navigator.userAgent.match(/trident/gi)) {
+                input = 'change';
+            }
+
+            this.d.$el.on('selectDate', this._onSelectDate.bind(this));
+            this.$ranges.on(input, this._onChangeRange.bind(this));
+            this.$ranges.on('mouseup', this._onMouseUpRange.bind(this));
+            this.$ranges.on('mousemove focus ', this._onMouseEnterRange.bind(this));
+            this.$ranges.on('mouseout blur', this._onMouseOutRange.bind(this));
+        },
+
+        _setTime: function (date) {
+            var _date = dp.getParsedDate(date);
+
+            this._handleDate(date);
+            this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
+            this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
+        },
+
+        _setMinTimeFromDate: function (date) {
+            this.minHours = date.getHours();
+            this.minMinutes = date.getMinutes();
+        },
+
+        _setMaxTimeFromDate: function (date) {
+            this.maxHours = date.getHours();
+            this.maxMinutes = date.getMinutes();
+        },
+
+        _setDefaultMinMaxTime: function () {
+            var maxHours = 23,
+                maxMinutes = 59,
+                opts = this.opts;
+
+            this.minHours = opts.minHours < 0 || opts.minHours > maxHours ? 0 : opts.minHours;
+            this.minMinutes = opts.minMinutes < 0 || opts.minMinutes > maxMinutes ? 0 : opts.minMinutes;
+            this.maxHours = opts.maxHours < 0 || opts.maxHours > maxHours ? maxHours : opts.maxHours;
+            this.maxMinutes = opts.maxMinutes < 0 || opts.maxMinutes > maxMinutes ? maxMinutes : opts.maxMinutes;
+        },
+
+        /**
+         * Looks for min/max hours/minutes and if current values
+         * are out of range sets valid values.
+         * @private
+         */
+        _validateHoursMinutes: function (date) {
+            if (this.hours < this.minHours) {
+                this.hours = this.minHours;
+            } else if (this.hours > this.maxHours) {
+                this.hours = this.maxHours;
+            }
+
+            if (this.minutes < this.minMinutes) {
+                this.minutes = this.minMinutes;
+            } else if (this.minutes > this.maxMinutes) {
+                this.minutes = this.maxMinutes;
+            }
+        },
+
+        _buildHTML: function () {
+            var lz = dp.getLeadingZeroNum,
+                data = {
+                    hourMin: this.minHours,
+                    hourMax: lz(this.maxHours),
+                    hourStep: this.opts.hoursStep,
+                    hourValue: lz(this.displayHours),
+                    minMin: this.minMinutes,
+                    minMax: lz(this.maxMinutes),
+                    minStep: this.opts.minutesStep,
+                    minValue: lz(this.minutes)
+                },
+                _template = dp.template(template, data);
+
+            this.$timepicker = $(_template).appendTo(this.d.$datepicker);
+            this.$ranges = $('[type="range"]', this.$timepicker);
+            this.$hours = $('[name="hours"]', this.$timepicker);
+            this.$minutes = $('[name="minutes"]', this.$timepicker);
+            this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
+            this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
+
+            if (this.d.ampm) {
+                this.$ampm = $('<span class="datepicker--time-current-ampm">')
+                    .appendTo($('.datepicker--time-current', this.$timepicker))
+                    .html(this.dayPeriod);
+
+                this.$timepicker.addClass('-am-pm-');
+            }
+        },
+
+        _updateCurrentTime: function () {
+            var h =  dp.getLeadingZeroNum(this.displayHours),
+                m = dp.getLeadingZeroNum(this.minutes);
+
+            this.$hoursText.html(h);
+            this.$minutesText.html(m);
+
+            if (this.d.ampm) {
+                this.$ampm.html(this.dayPeriod);
+            }
+        },
+
+        _updateRanges: function () {
+            this.$hours.attr({
+                min: this.minHours,
+                max: this.maxHours
+            }).val(this.hours);
+
+            this.$minutes.attr({
+                min: this.minMinutes,
+                max: this.maxMinutes
+            }).val(this.minutes)
+        },
+
+        /**
+         * Sets minHours, minMinutes etc. from date. If date is not passed, than sets
+         * values from options
+         * @param [date] {object} - Date object, to get values from
+         * @private
+         */
+        _handleDate: function (date) {
+            this._setDefaultMinMaxTime();
+
+            if (date) {
+                if (dp.isSame(date, this.d.opts.minDate)) {
+                    this._setMinTimeFromDate(this.d.opts.minDate);
+                } else if (dp.isSame(date, this.d.opts.maxDate)) {
+                    this._setMaxTimeFromDate(this.d.opts.maxDate);
+                }
+            }
+
+            this._validateHoursMinutes(date);
+        },
+
+        update: function () {
+            this._updateRanges();
+            this._updateCurrentTime();
+        },
+
+        /**
+         * Calculates valid hour value to display in text input and datepicker's body.
+         * @param date {Date|Number} - date or hours
+         * @returns {{hours: *, dayPeriod: string}}
+         * @private
+         */
+        _getValidHoursFromDate: function (date) {
+            var d = date,
+                hours = date;
+
+            if (date instanceof Date) {
+                d = dp.getParsedDate(date);
+                hours = d.hours;
+            }
+
+            var ampm = this.d.ampm,
+                dayPeriod = 'am';
+
+            if (ampm) {
+                switch(true) {
+                    case hours == 0:
+                        hours = 12;
+                        break;
+                    case hours == 12:
+                        dayPeriod = 'pm';
+                        break;
+                    case hours > 11:
+                        hours = hours - 12;
+                        dayPeriod = 'pm';
+                        break;
+                    default:
+                        break;
+                }
+            }
+
+            return {
+                hours: hours,
+                dayPeriod: dayPeriod
+            }
+        },
+
+        set hours (val) {
+            this._hours = val;
+
+            var displayHours = this._getValidHoursFromDate(val);
+
+            this.displayHours = displayHours.hours;
+            this.dayPeriod = displayHours.dayPeriod;
+        },
+
+        get hours() {
+            return this._hours;
+        },
+
+        //  Events
+        // -------------------------------------------------
+
+        _onChangeRange: function (e) {
+            var $target = $(e.target),
+                name = $target.attr('name');
+            
+            this.d.timepickerIsActive = true;
+
+            this[name] = $target.val();
+            this._updateCurrentTime();
+            this.d._trigger('timeChange', [this.hours, this.minutes])
+        },
+
+        _onSelectDate: function (e, data) {
+            this._handleDate(data);
+            this.update();
+        },
+
+        _onMouseEnterRange: function (e) {
+            var name = $(e.target).attr('name');
+            $('.datepicker--time-current-' + name, this.$timepicker).addClass('-focus-');
+        },
+
+        _onMouseOutRange: function (e) {
+            var name = $(e.target).attr('name');
+            if (this.d.inFocus) return; // Prevent removing focus when mouse out of range slider
+            $('.datepicker--time-current-' + name, this.$timepicker).removeClass('-focus-');
+        },
+
+        _onMouseUpRange: function (e) {
+            this.d.timepickerIsActive = false;
+        }
+    };
+})();

src/sass/datepicker.scss

@@ -8,6 +8,10 @@
   position: absolute;
   left: 0;
   top: 0;
+
+  @media print {
+    display: none;
+  }
 }
 
 .datepicker {

src/sass/timepicker.scss

@@ -0,0 +1,247 @@
+@import "datepicker-config";
+
+/* -------------------------------------------------
+    Timepicker
+   ------------------------------------------------- */
+
+$rangeTrackHeight: 1px;
+$rangeTrackBg: #dedede;
+$rangeThumbSize: 12px;
+$rangeThumbBg: #dedede;
+
+@mixin trackSelector {
+  &::-webkit-slider-runnable-track {
+    @content;
+  }
+
+  &::-moz-range-track {
+    @content;
+  }
+
+  &::-ms-track {
+    @content;
+  }
+}
+
+@mixin thumbSelector {
+  &::-webkit-slider-thumb {
+    @content;
+  }
+
+  &::-moz-range-thumb {
+    @content;
+  }
+
+  &::-ms-thumb {
+    @content;
+  }
+}
+
+@mixin thumb {
+  box-sizing: border-box;
+  height: $rangeThumbSize;
+  width: $rangeThumbSize;
+  border-radius: 3px;
+  border: 1px solid $rangeTrackBg;
+  background: #fff;
+  cursor: pointer;
+
+  transition: background .2s;
+}
+
+@mixin track {
+  border: none;
+  height: $rangeTrackHeight;
+  cursor: pointer;
+  color: transparent;
+  background: transparent;
+}
+
+.datepicker--time {
+  border-top: 1px solid map_get($borderColor, nav);
+  display: flex;
+  align-items: center;
+
+  padding: $datepickerPadding;
+  position: relative;
+
+  &.-am-pm- {
+    .datepicker--time-sliders {
+      flex: 0 1 138px;
+      max-width: 138px;
+    }
+  }
+}
+
+.datepicker--time-sliders {
+  flex: 0 1 153px;
+  margin-right: 10px;
+  max-width: 153px;
+}
+
+.datepicker--time-label {
+  display: none;
+  font-size: 12px;
+}
+
+.datepicker--time-current {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  font-size: 14px;
+  text-align: center;
+  margin: 0 0 0 10px;
+}
+
+.datepicker--time-current-colon {
+  margin: 0 2px 3px;
+  line-height: 1;
+}
+
+.datepicker--time-current-hours,
+.datepicker--time-current-minutes {
+  line-height: 1;
+  font-size: 19px;
+  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+  position: relative;
+  z-index: 1;
+
+  &:after {
+    content: '';
+    background: map_get($bg, hover);
+    border-radius: $datepickerBorderRadius;
+    position: absolute;
+    left: -2px;
+    top: -3px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  &.-focus- {
+    &:after {
+      opacity: 1;
+    }
+  }
+}
+
+.datepicker--time-current-ampm {
+  text-transform: uppercase;
+  align-self: flex-end;
+  color: map_get($textColor, navArrows);
+  margin-left: 6px;
+  font-size: 11px;
+  margin-bottom: 1px;
+}
+
+.datepicker--time-row {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  height: 17px;
+  background: linear-gradient(to right,$rangeTrackBg, $rangeTrackBg) left 50%/100% $rangeTrackHeight no-repeat;
+
+  &:first-child {
+    margin-bottom: 4px;
+  }
+
+  input[type='range'] {
+    background: none;
+    cursor: pointer;
+    flex: 1;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+    }
+
+    &::-ms-tooltip {
+      display: none;
+    }
+
+    &:hover {
+      @include thumbSelector() {
+        border-color: darken($rangeTrackBg, 15);
+      }
+    }
+
+    &:focus {
+      outline: none;
+
+      @include thumbSelector() {
+        background: map_get($bg, selected);
+        border-color: map_get($bg, selected);
+      }
+    }
+
+    //  Thumb
+    // -------------------------------------------------
+
+    @include thumbSelector() {
+      @include thumb;
+    }
+
+    &::-webkit-slider-thumb {
+      margin-top: -$rangeThumbSize/2;
+    }
+
+    //  Track
+    // -------------------------------------------------
+    @include trackSelector() {
+      @include track;
+    }
+
+    &::-ms-fill-lower {
+      background: transparent;
+    }
+    &:focus::-ms-fill-lower {
+
+    }
+    &::-ms-fill-upper {
+      background: transparent;
+    }
+    &:focus::-ms-fill-upper {
+
+    }
+  }
+  span {
+    padding: 0 12px;
+  }
+}
+
+.datepicker--time-icon {
+  color: map_get($textColor, navArrows);
+  border: 1px solid;
+  border-radius: 50%;
+  font-size: 16px;
+  position: relative;
+  margin: 0 5px -1px 0;
+  width: 1em;
+  height: 1em;
+
+  &:after, &:before {
+    content: '';
+    background: currentColor;
+    position: absolute;
+  }
+
+  &:after {
+    height: .4em;
+    width: 1px;
+    left: calc(50% - 1px);
+    top: calc(50% + 1px);
+    transform: translateY(-100%);
+  }
+
+  &:before {
+    width: .4em;
+    height: 1px;
+    top: calc(50% + 1px);
+    left: calc(50% - 1px);
+  }
+}
+

static-server.js

@@ -0,0 +1,10 @@
+var static = require('node-static'),
+    http = require('http');
+
+var file = new static.Server('.');
+
+http.createServer(function (request, response) {
+    request.addListener('end', function () {
+        file.serve(request, response);
+    }).resume();
+}).listen(3000);

tasks/i18n.js

@@ -1,11 +1,12 @@
 var gulp = require('gulp'),
     rename = require('gulp-rename'),
-    uglify = require('gulp-uglify'),
+    wrap = require('gulp-wrap'),
     sass = require('gulp-sass'),
     clone = require('gulp-clone'),
     concat = require('gulp-concat');
 
 module.exports = function () {
     gulp.src('src/js/i18n/*.js')
+        .pipe(wrap(';(function ($) { <%=contents%> })(jQuery);'))
         .pipe(gulp.dest('dist/js/i18n'))
 };

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'))
         .pipe(wrap(';(function (window, $, undefined) { <%=contents%> })(window, jQuery);'));

tests/index.html

@@ -19,6 +19,7 @@
         <script type="text/javascript" src="specs/options.js"></script>
         <script type="text/javascript" src="specs/events.js"></script>
         <script type="text/javascript" src="specs/static-methods.js"></script>
+        <script type="text/javascript" src="specs/api.js"></script>
         <style type="text/css">
             /* Remove transitions to test position options*/
             .datepicker {

tests/specs/api.js

@@ -0,0 +1,65 @@
+describe('API', function () {
+
+    var assert = chai.assert,
+        expect = chai.expect,
+        destroy = true,
+        $altInput,
+        $input, dp;
+
+    before(function () {
+        $input = $('<input>').appendTo('#container');
+        $altInput = $('<input class="alt-field">').appendTo('#container');
+    });
+
+    afterEach(function () {
+        if (dp && destroy) {
+            dp.destroy();
+        }
+
+        destroy = true;
+    });
+
+    after(function () {
+        $input.remove();
+        $altInput.remove();
+    });
+
+    describe('selectDate', function () {
+        it('should select passed date', function () {
+            dp = $input.datepicker().data('datepicker');
+
+            var date = new Date();
+            
+            dp.selectDate(date);
+
+            expect(dp.selectedDates).to.have.length(1);
+            expect(dp.selectedDates[0]).to.be.equal(date)
+        });
+        it('should select multiple dates if {multipleDates: true}', function () {
+            dp = $input.datepicker({
+                multipleDates: true
+            }).data('datepicker');
+
+            var date = new Date(2016, 4, 16),
+                date2 = new Date(2016, 4, 18);
+
+            dp.selectDate(date);
+            dp.selectDate(date2);
+
+            expect(dp.selectedDates).to.have.length(2);
+        });
+        it('should swap dates if {range: true} and second date is smaller then first', function () {
+            dp = $input.datepicker({
+                range: true
+            }).data('datepicker');
+
+            var date = new Date(2016, 4, 18),
+                date2 = new Date(2016, 4, 16);
+
+            dp.selectDate(date);
+            dp.selectDate(date2);
+
+            expect(dp.selectedDates[0]).to.be.equal(date2);
+        })
+    });
+});

tests/specs/events.js

@@ -34,7 +34,7 @@ var assert = chai.assert,
                 onSelect: function (fd, d, inst) {
                     expect(fd).to.be.equal('13.01.2016');
                     expect(d).to.be.instanceof(Date);
-                    expect(inst).to.be.instanceof(Datepicker);
+                    expect(inst).to.be.instanceof($.fn.datepicker.Constructor);
                 }
             }).data('datepicker');
 

tests/specs/options.js

@@ -58,7 +58,7 @@ describe('Options', function () {
                 language: 'en'
             }).data('datepicker');
 
-            expect(dp.loc.days).to.eql(Datepicker.language.en.days);
+            expect(dp.loc.days).to.eql($.fn.datepicker.language.en.days);
         });
         it('should change language to custom if object is passed', function () {
             var daysMin = ['В','П','В','С','Ч','П','С'];
@@ -69,7 +69,7 @@ describe('Options', function () {
             }).data('datepicker');
 
             expect(dp.loc.daysMin).to.eql(daysMin);
-            expect(dp.loc.days).to.eql(Datepicker.language.ru.days);
+            expect(dp.loc.days).to.eql($.fn.datepicker.language.ru.days);
         })
     });
 
@@ -121,9 +121,15 @@ describe('Options', function () {
     });
 
     describe('dateFormat', function () {
-        var date = new Date(2015, 6, 4),
+        var date = new Date(2015, 6, 4, 11, 5),
             formats = {
                 '@': date.getTime(),
+                'aa': 'am',
+                'AA': 'AM',
+                'h': 11,
+                'hh': 11,
+                'i': 5,
+                'ii': '05',
                 'dd': '04',
                 'd': 4,
                 'DD': 'Суббота',
@@ -807,4 +813,111 @@ describe('Options', function () {
 
         });
     });
+
+    describe('timepicker', function () {
+        it('should add timepicker to calendar', function () {
+            dp = $input.datepicker({
+                timepicker: true
+            }).data('datepicker');
+
+            var $time = $('.datepicker--time', dp.$datepicker);
+            expect($time).to.have.length(1)
+
+        })
+    });
+
+    describe('dateTimeSeparator', function () {
+        it('should define separator between date string and time', function () {
+            var date = new Date(2016,2,9,11,24);
+            dp = $input.datepicker({
+                timepicker: true,
+                onSelect: function (fd, d) {
+                    expect(fd).to.be.equal('09.03.2016 time separator 11:24')
+                },
+                dateTimeSeparator: ' time separator '
+            }).data('datepicker');
+
+            dp.selectDate(date);
+
+        })
+    });
+
+    describe('timeFormat', function () {
+        it('should define time format', function () {
+            var date = new Date(2016,2,9,9,4);
+            dp = $input.datepicker({
+                timepicker: true,
+                timeFormat: 'h - ii',
+                onSelect: function (fd, d) {
+                    expect(fd).to.be.equal('09.03.2016 9 - 04')
+                }
+            }).data('datepicker');
+
+            dp.selectDate(date);
+        })
+    });
+
+    describe('minHours', function () {
+        it('should set minimum hours value', function () {
+            var date = new Date();
+            date.setHours(9);
+            dp = $input.datepicker({
+                timepicker: true,
+                minHours: 10,
+                onSelect: function (fd, d) {
+                    var hours = d.getHours();
+                    expect(hours).to.be.equal(10)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    });
+
+    describe('minMinutes', function () {
+        it('should set minimum minutes value', function () {
+            var date = new Date();
+            date.setMinutes(20);
+            dp = $input.datepicker({
+                timepicker: true,
+                minMinutes: 30,
+                onSelect: function (fd, d) {
+                    var minutes = d.getMinutes();
+                    expect(minutes).to.be.equal(30)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    });
+
+    describe('maxHours', function () {
+        it('should set maximum hours value', function () {
+            var date = new Date();
+            date.setHours(20);
+            dp = $input.datepicker({
+                timepicker: true,
+                maxHours: 18,
+                onSelect: function (fd, d) {
+                    var hours = d.getHours();
+                    expect(hours).to.be.equal(18)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    });
+
+    describe('maxMinutes', function () {
+        it('should set maximum minutes value', function () {
+            var date = new Date();
+            date.setMinutes(50);
+            dp = $input.datepicker({
+                timepicker: true,
+                maxMinutes: 30,
+                onSelect: function (fd, d) {
+                    var minutes = d.getMinutes();
+                    expect(minutes).to.be.equal(30)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    })
 });

tests/specs/static-methods.js

@@ -1,25 +1,27 @@
 var assert = chai.assert,
-    expect = chai.expect;
+    expect = chai.expect,
+    plugin = $.fn.datepicker.Constructor;
 
 describe('Datepicker', function () {
     describe('getDaysCount', function () {
         it('should return 31 days in December', function () {
-            assert.equal(Datepicker.getDaysCount(new Date(2015, 11)), 31)
+            console.log(plugin.getDaysCount);
+            assert.equal(plugin.getDaysCount(new Date(2015, 11)), 31)
         });
         it('should return 30 days in September', function () {
-            assert.equal(Datepicker.getDaysCount(new Date(2015, 8)), 30)
+            assert.equal(plugin.getDaysCount(new Date(2015, 8)), 30)
         });
         it('should return 28 days in February', function () {
-            assert.equal(Datepicker.getDaysCount(new Date(2015, 1)), 28)
+            assert.equal(plugin.getDaysCount(new Date(2015, 1)), 28)
         })
     });
 
     describe('getParsedDate', function () {
         var currentDate = new Date(),
-            date = Datepicker.getParsedDate(currentDate);
+            date = plugin.getParsedDate(currentDate);
 
         it('should return object with detailed date fields', function () {
-            expect(date).to.have.all.keys(['year','month','fullMonth','date', 'fullDate', 'day']);
+            expect(date).to.have.all.keys(['year','month','fullMonth','date', 'fullDate', 'day','hours', 'fullHours', 'minutes', 'fullMinutes']);
         });
 
         describe('.year', function () {
@@ -51,12 +53,32 @@ describe('Datepicker', function () {
             it('`day` must be equal to current day', function () {
                 assert.equal(currentDate.getDay(), date.day);
             })
+        });
+        describe('.hours', function () {
+            it('`hours` must be equal to current hours', function () {
+                assert.equal(currentDate.getHours(), date.hours);
+            })
+        });
+        describe('.fullHours', function () {
+            it('`fullHours` must be equal to current hours with leading zero', function () {
+                assert.equal(currentDate.getHours() < 10 ? '0' + currentDate.getHours() : currentDate.getHours(), date.hours);
+            })
+        });
+        describe('.minutes', function () {
+            it('`minutes` must be equal to current minutes', function () {
+                assert.equal(currentDate.getMinutes(), date.minutes);
+            })
+        });
+        describe('.fullMinutes', function () {
+            it('`fullMinutes` must be equal to current hours with leading zero', function () {
+                assert.equal(currentDate.getMinutes() < 10 ? '0' + currentDate.getMinutes() : currentDate.getMinutes(), date.fullMinutes);
+            })
         })
-    })
+    });
 
     describe('getDecade', function () {
         it('should return array with first and last years in decade', function () {
-            var decade = Datepicker.getDecade(new Date(2015, 1));
+            var decade = plugin.getDecade(new Date(2015, 1));
 
             expect(decade).to.be.an('array');
             assert.equal(decade[0], 2010)
@@ -67,7 +89,7 @@ describe('Datepicker', function () {
     describe('template', function () {
         it('should return string with replaced #{} signs', function () {
             var template = 'Hello #{who}';
-            assert.equal(Datepicker.template(template, {who:'World!'}), 'Hello World!')
+            assert.equal(plugin.template(template, {who:'World!'}), 'Hello World!')
         })
     })
 
@@ -78,33 +100,33 @@ describe('Datepicker', function () {
             date4 = new Date(2016, 11, 14);
 
         it('should return true if dates are equal', function () {
-            assert(Datepicker.isSame(date1,date2))
+            assert(plugin.isSame(date1,date2))
         })
         it('should return false when checking dates with different months', function () {
-            assert.isFalse(Datepicker.isSame(date1,date3))
+            assert.isFalse(plugin.isSame(date1,date3))
         })
         it('should return false when checking dates with different years', function () {
-            assert.isFalse(Datepicker.isSame(date1,date4))
+            assert.isFalse(plugin.isSame(date1,date4))
         })
         it('should return true when comparing months', function () {
-            assert(Datepicker.isSame(date1, date2,'month'))
+            assert(plugin.isSame(date1, date2,'month'))
         })
         it('should return false when comparing months from different years', function () {
-            assert.isFalse(Datepicker.isSame(date1, date4, 'month'))
+            assert.isFalse(plugin.isSame(date1, date4, 'month'))
         })
         it('should return true when comparing years', function () {
-            assert(Datepicker.isSame(date1, date2, 'year'))
+            assert(plugin.isSame(date1, date2, 'year'))
         })
     })
 
     describe('less(date1, date2)', function () {
         it('should return true if date2 less then date1', function () {
-            assert(Datepicker.less(new Date(2015, 11, 14), new Date(2015, 11, 13)))
+            assert(plugin.less(new Date(2015, 11, 14), new Date(2015, 11, 13)))
         })
     })
     describe('bigger(date1, date2)', function () {
         it('should return true if date2 bigger then date1', function () {
-            assert(Datepicker.bigger(new Date(2015, 11, 14), new Date(2015, 11, 15)))
+            assert(plugin.bigger(new Date(2015, 11, 14), new Date(2015, 11, 15)))
         })
     })
 });

visual-tests.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Air datepicker visual tests</title>
+        <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
+        <script type="text/javascript" src="dist/js/datepicker.js"></script>
+        <link rel="stylesheet" href="dist/css/datepicker.css"/>
+        <link rel="stylesheet" href="docs/css/style.css"/>
+        <script type="text/javascript">
+            var log;
+            function logger (el) {
+                var $el = $(el);
+
+                return function(text) {
+                    var count = $('p', $el).length;
+                    $el.append('<p><span>' + count++ + '.</span> ' + text + '</p>').scrollTop(100000)
+                }
+            }
+
+            $(function () {
+                log = logger('#v-log');
+            })
+        </script>
+    </head>
+    <body>
+        <div class="v-log" id="v-log"></div>
+        <div class="visual-tests">
+            <article>
+                <h1>Basic</h1>
+                <div class="row">
+                    <div class="vt-tile">
+                        <h2>Default</h2>
+                        <div class="datepicker-here"></div>
+                    </div>
+                </div>
+            </article>
+
+            <article>
+                <h1>Range</h1>
+                <div class="row">
+                    <div class="vt-tile">
+                        <h2>{range: true}</h2>
+                        <div class="datepicker-here" data-range="true"></div>
+                    </div>
+                    <div class="vt-tile">
+                        <h2>{range: true, onSelect: ...}</h2>
+                        <div class="datepicker-here" id="dp-3" data-range="true"></div>
+                        <script type="text/javascript">
+                            $('#dp-3').datepicker({
+                                onSelect: function (fd) {
+                                    log(fd)
+                                }
+                            })
+                        </script>
+                    </div>
+                    <div class="vt-tile">
+                        <h2>{range: true, onSelect: ...}</h2>
+                        <input class="datepicker-here" id="dp-4" data-range="true"/>
+                        <script type="text/javascript">
+                            $('#dp-4').datepicker({
+                                onSelect: function (fd) {
+                                    log(fd)
+                                }
+                            })
+                        </script>
+                    </div>
+                </div>
+            </article>
+
+            <article>
+                <h1>Timepicker</h1>
+                <div class="row">
+                    <div class="vt-tile">
+                        <h2>{timepicker: true}</h2>
+                        <div class="datepicker-here" data-timepicker="true"></div>
+                    </div>
+                    <div class="vt-tile">
+                        <h2>{onChange: ..., toggleSelected: false, range: true}</h2>
+                        <input id="dp-5" class="datepicker-here" data-timepicker="true" />
+                        <script type="text/javascript">
+                            $('#dp-5').datepicker({
+                                toggleSelected: false,
+                                inline: true,
+                                range: true,
+                                onSelect: function (fd) {
+                                    log(fd)
+                                }
+                            })
+                        </script>
+                    </div>
+                    <div class="vt-tile">
+                        <h2>{timepicker: true}</h2>
+                        <input class="datepicker-here" data-timepicker="true" />
+                    </div>
+                </div>
+            </article>
+
+        </div>
+    </body>
+</html>