Merge pull request #1 from gbm001/fix_seconds

fix: Fix display of seconds between 0 and 9.

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Timofey Marochkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,6 @@
 # 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 on Android 4.4+ and iOS8+).
 
 ![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img-time.png)
 
@@ -26,6 +26,41 @@ $('.my-datepicker').datepicker([options])
 
 ## Change log
 
+### v2.2.3
+* fixed min,max dates in decade mode
+
+### v2.2.2
+* fixed min,max dates handling
+
+### v2.2.1
+* changed RegExp for recognizing date parts
+* changed jquery version dependency
+
+### v2.2.0
+* added `onlyTimepicker` option
+* added `onShow` and `onHide` callbacks
+* added `VERSION` field to plugin's prototype
+* now for selecting same date in `range` mode, you should set `{toggleSelected: false}`
+* fixed `dateFormat` method (fixed wrong month name in Hungarian language)
+* fixed second call of `onRenderCallback`
+* fixed `_getCell()` throwing exception
+* new language:
+    - `sk` thanks to [RobiNN1](https://github.com/RobiNN1)
+
+
+### v2.1.0
+* added possibility to select single date when `{range: true}`
+* added support of 12 hours mode in `altFieldDateFormat`
+* improved work with minDate and maxDate when `{timepicker: true}`
+* fixed wrong class adding when `{range: true}`
+* new languages:
+    - `es` thanks to [MarioAraque](https://github.com/MarioAraque)
+    - `cs` thanks to [liborm85](https://github.com/liborm85)
+    - `hu` thanks to [gergo85](https://github.com/gergo85)
+    - `fi` thanks to [joonaskaskisolaphz](https://github.com/joonaskaskisolaphz)
+    - `pl` thanks to [xiio](https://github.com/xiio)
+    - `fr` thanks to [nicooprat](https://github.com/nicooprat)
+
 ### v2.0.2
 * fixed dates array in `onSelect` callback
 

bower.json

@@ -1,13 +1,13 @@
 {
   "name": "air-datepicker",
-  "version": "2.0.2",
+  "version": "2.2.3",
   "authors": [
     "t1m0n <t1m0n.tr@gmail.com>"
   ],
   "description": "A lightweight, customizable, powerful jQuery datepicker",
   "main": [
-    "dist/js/datepicker.min.js",
+    "dist/js/datepicker.js",
-    "dist/css/datepicker.min.css"
+    "dist/css/datepicker.css"
   ],
   "keywords": [
     "datepicker",
@@ -30,6 +30,6 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "^2.2.3"
+    "jquery": ">=2.0.0 <4.0.0"
   }
 }

dist/css/datepicker.css

@@ -18,14 +18,32 @@
     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
    ------------------------------------------------- */
 .datepicker--cells {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap; }
 
@@ -33,14 +51,11 @@
   border-radius: 4px;
   box-sizing: border-box;
   cursor: pointer;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  -webkit-align-items: center;
   -ms-flex-align: center;
       align-items: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
       justify-content: center;
   height: 32px;
@@ -91,26 +106,20 @@
     cursor: default; }
 
 .datepicker--days-names {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   margin: 8px 0 3px; }
 
 .datepicker--day-name {
   color: #FF9A19;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
   -ms-flex-align: center;
       align-items: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
       justify-content: center;
-  -webkit-flex: 1;
   -ms-flex: 1;
       flex: 1;
   text-align: center;
@@ -181,29 +190,20 @@
   position: absolute;
   left: -100000px;
   opacity: 0;
-  transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
   transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
-  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
   z-index: 100; }
   .datepicker.-from-top- {
-    -webkit-transform: translateY(-8px);
     transform: translateY(-8px); }
   .datepicker.-from-right- {
-    -webkit-transform: translateX(8px);
     transform: translateX(8px); }
   .datepicker.-from-bottom- {
-    -webkit-transform: translateY(8px);
     transform: translateY(8px); }
   .datepicker.-from-left- {
-    -webkit-transform: translateX(-8px);
     transform: translateX(-8px); }
   .datepicker.active {
     opacity: 1;
-    -webkit-transform: translate(0);
     transform: translate(0);
-    transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
+    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; }
-    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
-    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
 
 .datepicker-inline .datepicker {
   border-color: #d7d7d7;
@@ -212,7 +212,6 @@
   left: auto;
   right: auto;
   opacity: 1;
-  -webkit-transform: none;
   transform: none; }
 
 .datepicker-inline .datepicker--pointer {
@@ -221,6 +220,8 @@
 .datepicker--content {
   box-sizing: content-box;
   padding: 4px; }
+  .-only-timepicker- .datepicker--content {
+    display: none; }
 
 .datepicker--pointer {
   position: absolute;
@@ -232,19 +233,15 @@
   z-index: -1; }
   .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
     top: calc(100% - 4px);
-    -webkit-transform: rotate(135deg);
     transform: rotate(135deg); }
   .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
     right: calc(100% - 4px);
-    -webkit-transform: rotate(225deg);
     transform: rotate(225deg); }
   .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
     bottom: calc(100% - 4px);
-    -webkit-transform: rotate(315deg);
     transform: rotate(315deg); }
   .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
     left: calc(100% - 4px);
-    -webkit-transform: rotate(45deg);
     transform: rotate(45deg); }
   .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
     left: 10px; }
@@ -288,26 +285,23 @@
     Navigation
    ------------------------------------------------- */
 .datepicker--nav {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
       justify-content: space-between;
   border-bottom: 1px solid #efefef;
   min-height: 32px;
   padding: 4px; }
+  .-only-timepicker- .datepicker--nav {
+    display: none; }
 
 .datepicker--nav-title,
 .datepicker--nav-action {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   cursor: pointer;
-  -webkit-align-items: center;
   -ms-flex-align: center;
       align-items: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
       justify-content: center; }
 
@@ -344,7 +338,6 @@
     background: none; }
 
 .datepicker--buttons {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   padding: 4px;
@@ -354,16 +347,12 @@
   color: #4EB5E6;
   cursor: pointer;
   border-radius: 4px;
-  -webkit-flex: 1;
   -ms-flex: 1;
       flex: 1;
-  display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
       justify-content: center;
-  -webkit-align-items: center;
   -ms-flex-align: center;
       align-items: center;
   height: 32px; }
@@ -396,22 +385,20 @@
    ------------------------------------------------- */
 .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; }
+  .-only-timepicker- .datepicker--time {
+    border-top: none; }
 
 .datepicker--time-sliders {
-  -webkit-flex: 0 1 153px;
   -ms-flex: 0 1 153px;
       flex: 0 1 153px;
   margin-right: 10px;
@@ -422,32 +409,31 @@
   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; }
+  margin: 0 10px; }
 
 .datepicker--time-current-colon {
   margin: 0 2px 3px;
   line-height: 1; }
 
 .datepicker--time-current-hours,
-.datepicker--time-current-minutes {
+.datepicker--time-current-minutes,
+.datepicker--time-current-seconds {
   line-height: 1;
-  font-size: 19px;
+  font-size: 14px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
   position: relative;
   z-index: 1; }
   .datepicker--time-current-hours:after,
-  .datepicker--time-current-minutes:after {
+  .datepicker--time-current-minutes:after,
+  .datepicker--time-current-seconds:after {
     content: '';
     background: #f0f0f0;
     border-radius: 4px;
@@ -459,24 +445,22 @@
     z-index: -1;
     opacity: 0; }
   .datepicker--time-current-hours.-focus-:after,
-  .datepicker--time-current-minutes.-focus-:after {
+  .datepicker--time-current-minutes.-focus-:after,
+  .datepicker--time-current-seconds.-focus-:after {
     opacity: 1; }
 
 .datepicker--time-current-ampm {
   text-transform: uppercase;
-  -webkit-align-self: flex-end;
+  -ms-flex-item-align: start;
-      -ms-flex-item-align: end;
+      align-self: flex-start;
-          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;
@@ -487,7 +471,6 @@
   .datepicker--time-row input[type='range'] {
     background: none;
     cursor: pointer;
-    -webkit-flex: 1;
     -ms-flex: 1;
         flex: 1;
     height: 100%;
@@ -587,30 +570,9 @@
     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,5 +1,6 @@
 ;(function (window, $, undefined) { ;(function () {
-    var pluginName = 'datepicker',
+    var VERSION = '2.2.3',
+        pluginName = 'datepicker',
         autoInitSelector = '.datepicker-here',
         $body, $datepickersContainer,
         containerBuilt = false,
@@ -62,17 +63,23 @@
 
             // timepicker
             timepicker: false,
+            onlyTimepicker: false,
             dateTimeSeparator: ' ',
             timeFormat: '',
             minHours: 0,
             maxHours: 24,
             minMinutes: 0,
             maxMinutes: 59,
+            minSeconds: 0,
+            maxSeconds: 59,
             hoursStep: 1,
             minutesStep: 1,
+            secondsStep: 1,
 
             // events
             onSelect: '',
+            onShow: '',
+            onHide: '',
             onChangeMonth: '',
             onChangeYear: '',
             onChangeDecade: '',
@@ -138,6 +145,7 @@
     datepicker = Datepicker;
 
     datepicker.prototype = {
+        VERSION: VERSION,
         viewIndexes: ['days', 'months', 'years'],
 
         init: function () {
@@ -154,7 +162,7 @@
                     this._setPositionClasses(this.opts.position);
                     this._bindEvents()
                 }
-                if (this.opts.keyboardNav) {
+                if (this.opts.keyboardNav && !this.opts.onlyTimepicker) {
                     this._bindKeyboardEvents();
                 }
                 this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
@@ -170,6 +178,10 @@
                 this._bindTimepickerEvents();
             }
 
+            if (this.opts.onlyTimepicker) {
+                this.$datepicker.addClass('-only-timepicker-');
+            }
+
             this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
             this.nav = new $.fn.datepicker.Navigation(this, this.opts);
@@ -239,6 +251,10 @@
                 this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
             }
 
+            if (this.opts.onlyTimepicker) {
+                this.loc.dateFormat = this.loc.timeFormat;
+            }
+
             var boundary = this._getWordBoundaryRegExp;
             if (this.loc.timeFormat.match(boundary('aa')) ||
                 this.loc.timeFormat.match(boundary('AA'))
@@ -289,7 +305,8 @@
                     parsedSelected.month,
                     parsedSelected.date,
                     parsedSelected.hours,
-                    parsedSelected.minutes
+                    parsedSelected.minutes,
+                    parsedSelected.seconds
                 );
 
                 formattedDates = selectedDates.map(function (date) {
@@ -305,11 +322,11 @@
                         parsedDate.month,
                         parsedDate.date,
                         parsedDate.hours,
-                        parsedDate.minutes
+                        parsedDate.minutes,
+                        parsedDate.seconds
                     );
                 })
             }
-
             this._prevOnSelectValue = formattedDates;
             this.opts.onSelect(formattedDates, dates, this);
         },
@@ -362,11 +379,13 @@
                 d = datepicker.getParsedDate(date),
                 fullHours = d.fullHours,
                 hours = d.hours,
+                ampm = string.match(boundary('aa')) || string.match(boundary('AA')),
                 dayPeriod = 'am',
+                replacer = this._replacer,
                 validHours;
 
-            if (this.opts.timepicker && this.timepicker && this.ampm) {
+            if (this.opts.timepicker && this.timepicker && ampm) {
-                validHours = this.timepicker._getValidHoursFromDate(date);
+                validHours = this.timepicker._getValidHoursFromDate(date, ampm);
                 fullHours = leadingZero(validHours.hours);
                 hours = validHours.hours;
                 dayPeriod = validHours.dayPeriod;
@@ -376,50 +395,63 @@
                 case /@/.test(result):
                     result = result.replace(/@/, date.getTime());
                 case /aa/.test(result):
-                    result = result.replace(boundary('aa'), dayPeriod);
+                    result = replacer(result, boundary('aa'), dayPeriod);
                 case /AA/.test(result):
-                    result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
+                    result = replacer(result, boundary('AA'), dayPeriod.toUpperCase());
                 case /dd/.test(result):
-                    result = result.replace(boundary('dd'), d.fullDate);
+                    result = replacer(result, boundary('dd'), d.fullDate);
                 case /d/.test(result):
-                    result = result.replace(boundary('d'), d.date);
+                    result = replacer(result, boundary('d'), d.date);
                 case /DD/.test(result):
-                    result = result.replace(boundary('DD'), locale.days[d.day]);
+                    result = replacer(result, boundary('DD'), locale.days[d.day]);
                 case /D/.test(result):
-                    result = result.replace(boundary('D'), locale.daysShort[d.day]);
+                    result = replacer(result, boundary('D'), locale.daysShort[d.day]);
                 case /mm/.test(result):
-                    result = result.replace(boundary('mm'), d.fullMonth);
+                    result = replacer(result, boundary('mm'), d.fullMonth);
                 case /m/.test(result):
-                    result = result.replace(boundary('m'), d.month + 1);
+                    result = replacer(result, boundary('m'), d.month + 1);
                 case /MM/.test(result):
-                    result = result.replace(boundary('MM'), this.loc.months[d.month]);
+                    result = replacer(result, boundary('MM'), this.loc.months[d.month]);
                 case /M/.test(result):
-                    result = result.replace(boundary('M'), locale.monthsShort[d.month]);
+                    result = replacer(result, boundary('M'), locale.monthsShort[d.month]);
+                case /ss/.test(result):
+                    result = replacer(result, boundary('ss'), d.fullSeconds);
+                case /s/.test(result):
+                    result = replacer(result, boundary('s'), d.seconds);
                 case /ii/.test(result):
-                    result = result.replace(boundary('ii'), d.fullMinutes);
+                    result = replacer(result, boundary('ii'), d.fullMinutes);
                 case /i/.test(result):
-                    result = result.replace(boundary('i'), d.minutes);
+                    result = replacer(result, boundary('i'), d.minutes);
                 case /hh/.test(result):
-                    result = result.replace(boundary('hh'), fullHours);
+                    result = replacer(result, boundary('hh'), fullHours);
                 case /h/.test(result):
-                    result = result.replace(boundary('h'), hours);
+                    result = replacer(result, boundary('h'), hours);
                 case /yyyy/.test(result):
-                    result = result.replace(boundary('yyyy'), d.year);
+                    result = replacer(result, boundary('yyyy'), d.year);
                 case /yyyy1/.test(result):
-                    result = result.replace(boundary('yyyy1'), decade[0]);
+                    result = replacer(result, boundary('yyyy1'), decade[0]);
                 case /yyyy2/.test(result):
-                    result = result.replace(boundary('yyyy2'), decade[1]);
+                    result = replacer(result, boundary('yyyy2'), decade[1]);
                 case /yy/.test(result):
-                    result = result.replace(boundary('yy'), d.year.toString().slice(-2));
+                    result = replacer(result, boundary('yy'), d.year.toString().slice(-2));
             }
 
             return result;
         },
 
-        _getWordBoundaryRegExp: function (sign) {
+        _replacer: function (str, reg, data) {
-            return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
+            return str.replace(reg, function (match, p1,p2,p3) {
+                return p1 + data + p3;
+            })
         },
 
+        _getWordBoundaryRegExp: function (sign) {
+            var symbols = '\\s|\\.|-|/|\\\\|,|\\$|\\!|\\?|:|;';
+
+            return new RegExp('(^|>|' + symbols + ')(' + sign + ')($|<|' + symbols + ')', 'g');
+        },
+
+
         selectDate: function (date) {
             var _this = this,
                 opts = _this.opts,
@@ -453,6 +485,7 @@
             if (this.timepicker) {
                 date.setHours(this.timepicker.hours);
                 date.setMinutes(this.timepicker.minutes)
+                date.setSeconds(this.timepicker.seconds)
             }
 
             if (_this.view == 'days') {
@@ -581,7 +614,8 @@
          * @param {String|Number|Object} [value] - new param value
          */
         update: function (param, value) {
-            var len = arguments.length;
+            var len = arguments.length,
+                lastSelectedDate = this.lastSelectedDate;
 
             if (len == 2) {
                 this.opts[param] = value;
@@ -593,7 +627,7 @@
             this._syncWithMinMaxDates();
             this._defineLocale(this.opts.language);
             this.nav._addButtonsIfNeed();
-            this.nav._render();
+            if (!this.opts.onlyTimepicker) this.nav._render();
             this.views[this.currentView]._render();
 
             if (this.elIsInput && !this.opts.inline) {
@@ -607,14 +641,19 @@
                 this.$datepicker.addClass(this.opts.classes)
             }
 
+            if (this.opts.onlyTimepicker) {
+                this.$datepicker.addClass('-only-timepicker-');
+            }
+
             if (this.opts.timepicker) {
-                this.timepicker._handleDate(this.lastSelectedDate);
+                if (lastSelectedDate) this.timepicker._handleDate(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) {
+                if (lastSelectedDate) {
-                    this.lastSelectedDate.setHours(this.timepicker.hours);
+                    lastSelectedDate.setHours(this.timepicker.hours);
-                    this.lastSelectedDate.setMinutes(this.timepicker.minutes);
+                    lastSelectedDate.setMinutes(this.timepicker.minutes);
+                    lastSelectedDate.setSeconds(this.timepicker.seconds);
                 }
             }
 
@@ -780,12 +819,20 @@
         },
 
         show: function () {
+            var onShow = this.opts.onShow;
+
             this.setPosition(this.opts.position);
             this.$datepicker.addClass('active');
             this.visible = true;
+
+            if (onShow) {
+                this._bindVisionEvents(onShow)
+            }
         },
 
         hide: function () {
+            var onHide = this.opts.onHide;
+
             this.$datepicker
                 .removeClass('active')
                 .css({
@@ -798,6 +845,10 @@
             this.inFocus = false;
             this.visible = false;
             this.$el.blur();
+
+            if (onHide) {
+                this._bindVisionEvents(onHide)
+            }
         },
 
         down: function (date) {
@@ -808,6 +859,12 @@
             this._changeView(date, 'up');
         },
 
+        _bindVisionEvents: function (event) {
+            this.$datepicker.off('transitionend.dp');
+            event(this, false);
+            this.$datepicker.one('transitionend.dp', event.bind(this, this, true))
+        },
+
         _changeView: function (date, dir) {
             date = date || this.focused || this.date;
 
@@ -1021,7 +1078,7 @@
             }
             $cell = this.views[this.currentView].$el.find(selector);
 
-            return $cell.length ? $cell : '';
+            return $cell.length ? $cell : $('');
         },
 
         destroy: function () {
@@ -1044,6 +1101,30 @@
             }
         },
 
+        _handleAlreadySelectedDates: function (alreadySelected, selectedDate) {
+            if (this.opts.range) {
+                if (!this.opts.toggleSelected) {
+                    // Add possibility to select same date when range is true
+                    if (this.selectedDates.length != 2) {
+                        this._trigger('clickCell', selectedDate);
+                    }
+                } else {
+                    this.removeDate(selectedDate);
+                }
+            } else if (this.opts.toggleSelected){
+                this.removeDate(selectedDate);
+            }
+
+            // Change last selected date to be able to change time when clicking on this cell
+            if (!this.opts.toggleSelected) {
+                this.lastSelectedDate = alreadySelected;
+                if (this.opts.timepicker) {
+                    this.timepicker._setTime(alreadySelected);
+                    this.timepicker.update();
+                }
+            }
+        },
+
         _onShowEvent: function (e) {
             if (!this.visible) {
                 this.show();
@@ -1116,11 +1197,12 @@
                             if (this.timepicker) {
                                 this.focused.setHours(this.timepicker.hours);
                                 this.focused.setMinutes(this.timepicker.minutes);
+                                this.focused.setSeconds(this.timepicker.seconds);
                             }
                             this.selectDate(this.focused);
-                        } else if (alreadySelected && this.opts.toggleSelected){
+                            return;
-                            this.removeDate(this.focused);
                         }
+                        this._handleAlreadySelectedDates(alreadySelected, this.focused)
                     }
                 }
             }
@@ -1177,7 +1259,7 @@
             this.silent = false;
         },
 
-        _onTimeChange: function (e, h, m) {
+        _onTimeChange: function (e, h, m, s) {
             var date = new Date(),
                 selectedDates = this.selectedDates,
                 selected = false;
@@ -1189,6 +1271,7 @@
 
             date.setHours(h);
             date.setMinutes(m);
+            date.setSeconds(s);
 
             if (!selected && !this._getCell(date).hasClass('-disabled-')) {
                 this.selectDate(date);
@@ -1204,6 +1287,7 @@
             if (this.timepicker) {
                 date.setHours(this.timepicker.hours);
                 date.setMinutes(this.timepicker.minutes);
+                date.setSeconds(this.timepicker.seconds)
             }
             this.selectDate(date);
         },
@@ -1327,7 +1411,9 @@
             hours: date.getHours(),
             fullHours:  date.getHours() < 10 ? '0' + date.getHours() :  date.getHours() ,
             minutes: date.getMinutes(),
-            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes()
+            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes(),
+            seconds: date.getSeconds(),
+            fullSeconds:  date.getSeconds() < 10 ? '0' + date.getSeconds() :  date.getSeconds()
         }
     };
 
@@ -1374,6 +1460,16 @@
         return parseInt(num) < 10 ? '0' + num : num;
     };
 
+    /**
+     * Returns copy of date with hours and minutes equals to 0
+     * @param date {Date}
+     */
+    datepicker.resetTime = function (date) {
+        if (typeof date != 'object') return;
+        date = datepicker.getParsedDate(date);
+        return new Date(date.year, date.month, date.date)
+    };
+
     $.fn.datepicker = function ( options ) {
         return this.each(function () {
             if (!$.data(this, pluginName)) {
@@ -1434,7 +1530,9 @@
         this.d = d;
         this.type = type;
         this.opts = opts;
+        this.$el = $('');
 
+        if (this.opts.onlyTimepicker) return;
         this.init();
     };
 
@@ -1473,17 +1571,13 @@
             var classes = "datepicker--cell datepicker--cell-" + type,
                 currentDate = new Date(),
                 parent = this.d,
+                minRange = dp.resetTime(parent.minRange),
+                maxRange = dp.resetTime(parent.maxRange),
                 opts = parent.opts,
                 d = dp.getParsedDate(date),
                 render = {},
                 html = d.date;
 
-            if (opts.onRenderCell) {
-                render = opts.onRenderCell(date, type) || {};
-                html = render.html ? render.html : html;
-                classes += render.classes ? ' ' + render.classes : '';
-            }
-
             switch (type) {
                 case 'day':
                     if (parent.isWeekend(d.day)) classes += " -weekend-";
@@ -1518,26 +1612,26 @@
             }
 
             if (opts.range) {
-                if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
+                if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
-                if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
+                if (dp.isSame(maxRange, date, type)) classes += ' -range-to-';
 
                 if (parent.selectedDates.length == 1 && parent.focused) {
                     if (
-                        (dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
+                        (dp.bigger(minRange, date) && dp.less(parent.focused, date)) ||
-                        (dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
+                        (dp.less(maxRange, date) && dp.bigger(parent.focused, date)))
                     {
                         classes += ' -in-range-'
                     }
 
-                    if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
+                    if (dp.less(maxRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-from-'
                     }
-                    if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
+                    if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-to-'
                     }
 
                 } else if (parent.selectedDates.length == 2) {
-                    if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
+                    if (dp.bigger(minRange, date) && dp.less(maxRange, date)) {
                         classes += ' -in-range-'
                     }
                 }
@@ -1660,6 +1754,7 @@
         },
 
         _render: function () {
+            if (this.opts.onlyTimepicker) return;
             this._renderTypes[this.type].bind(this)();
         },
 
@@ -1678,6 +1773,7 @@
         },
 
         show: function () {
+            if (this.opts.onlyTimepicker) return;
             this.$el.addClass('active');
             this.acitve = true;
         },
@@ -1693,10 +1789,11 @@
         _handleClick: function (el) {
             var date = el.data('date') || 1,
                 month = el.data('month') || 0,
-                year = el.data('year') || this.d.parsedDate.year;
+                year = el.data('year') || this.d.parsedDate.year,
+                dp = this.d;
             // Change view if min view does not reach yet
-            if (this.d.view != this.opts.minView) {
+            if (dp.view != this.opts.minView) {
-                this.d.down(new Date(year, month, date));
+                dp.down(new Date(year, month, date));
                 return;
             }
             // Select date if min view is reached
@@ -1704,17 +1801,12 @@
                 alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
 
             if (!alreadySelected) {
-                this.d._trigger('clickCell', selectedDate);
+                dp._trigger('clickCell', selectedDate);
-            } else if (alreadySelected && this.opts.toggleSelected){
+                return;
-                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();
-                }
             }
 
+            dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
+
         },
 
         _onClickCell: function (e) {
@@ -1759,7 +1851,9 @@
         },
 
         _buildBaseHtml: function () {
+            if (!this.opts.onlyTimepicker) {
                 this._render();
+            }
             this._addButtonsIfNeed();
         },
 
@@ -1816,10 +1910,10 @@
 
             switch (this.d.view) {
                 case 'days':
-                    if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
+                    if (!this.d._isInRange(new Date(y, m-1, 1), 'month')) {
                         this._disableNav('prev')
                     }
-                    if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
+                    if (!this.d._isInRange(new Date(y, m+1, 1), 'month')) {
                         this._disableNav('next')
                     }
                     break;
@@ -1832,10 +1926,11 @@
                     }
                     break;
                 case 'years':
-                    if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
+                    var decade = dp.getDecade(this.d.date);
+                    if (!this.d._isInRange(new Date(decade[0] - 1, 0, 1), 'year')) {
                         this._disableNav('prev')
                     }
-                    if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
+                    if (!this.d._isInRange(new Date(decade[1] + 1, 0, 1), 'year')) {
                         this._disableNav('next')
                     }
                     break;
@@ -1873,9 +1968,11 @@
 ;(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-hours">#{hourVisible}</span>' +
         '   <span class="datepicker--time-current-colon">:</span>' +
         '   <span class="datepicker--time-current-minutes">#{minValue}</span>' +
+        '   <span class="datepicker--time-current-colon">:</span>' +
+        '   <span class="datepicker--time-current-seconds">#{secValue}</span>' +
         '</div>' +
         '<div class="datepicker--time-sliders">' +
         '   <div class="datepicker--time-row">' +
@@ -1884,6 +1981,9 @@
         '   <div class="datepicker--time-row">' +
         '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
         '   </div>' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
+        '   </div>' +
         '</div>' +
         '</div>',
         datepicker = $.fn.datepicker,
@@ -1919,27 +2019,53 @@
             this._handleDate(date);
             this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
             this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
+            this.seconds = _date.seconds < this.minSeconds ? this.minSeconds : _date.seconds;
         },
 
+        /**
+         * Sets minHours and minMinutes from date (usually it's a minDate)
+         * Also changes minMinutes if current hours are bigger then @date hours
+         * @param date {Date}
+         * @private
+         */
         _setMinTimeFromDate: function (date) {
             this.minHours = date.getHours();
             this.minMinutes = date.getMinutes();
+            this.minSeconds = date.getSeconds();
+
+            // If, for example, min hours are 10, and current hours are 12,
+            // update minMinutes to default value, to be able to choose whole range of values
+            if (this.d.lastSelectedDate) {
+                if (this.d.lastSelectedDate.getHours() > date.getHours()) {
+                    this.minMinutes = this.opts.minMinutes;
+                }
+            }
         },
 
         _setMaxTimeFromDate: function (date) {
             this.maxHours = date.getHours();
             this.maxMinutes = date.getMinutes();
+            this.maxSeconds = date.getSeconds();
+
+            if (this.d.lastSelectedDate) {
+                if (this.d.lastSelectedDate.getHours() < date.getHours()) {
+                    this.maxMinutes = this.opts.maxMinutes;
+                }
+            }
         },
 
         _setDefaultMinMaxTime: function () {
             var maxHours = 23,
                 maxMinutes = 59,
+                maxSeconds = 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;
+            this.minSeconds = opts.minSeconds < 0 || opts.minSeconds > maxSeconds ? 0 : opts.minSeconds;
+            this.maxSeconds = opts.maxSeconds < 0 || opts.maxSeconds > maxSeconds ? maxSeconds : opts.maxSeconds;
         },
 
         /**
@@ -1959,6 +2085,12 @@
             } else if (this.minutes > this.maxMinutes) {
                 this.minutes = this.maxMinutes;
             }
+
+            if (this.seconds < this.minSeconds) {
+                this.seconds = this.minSeconds;
+            } else if (this.seconds > this.maxSeconds) {
+                this.seconds = this.maxSeconds;
+            }
         },
 
         _buildHTML: function () {
@@ -1967,11 +2099,16 @@
                     hourMin: this.minHours,
                     hourMax: lz(this.maxHours),
                     hourStep: this.opts.hoursStep,
-                    hourValue: lz(this.displayHours),
+                    hourValue: this.hours,
+                    hourVisible: lz(this.displayHours),
                     minMin: this.minMinutes,
                     minMax: lz(this.maxMinutes),
                     minStep: this.opts.minutesStep,
-                    minValue: lz(this.minutes)
+                    minValue: lz(this.minutes),
+                    secMin: this.minSeconds,
+                    secMax: lz(this.maxSeconds),
+                    secStep: this.opts.secondsStep,
+                    secValue: lz(this.seconds)
                 },
                 _template = dp.template(template, data);
 
@@ -1979,8 +2116,10 @@
             this.$ranges = $('[type="range"]', this.$timepicker);
             this.$hours = $('[name="hours"]', this.$timepicker);
             this.$minutes = $('[name="minutes"]', this.$timepicker);
+            this.$seconds = $('[name="seconds"]', this.$timepicker);
             this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
             this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
+            this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
 
             if (this.d.ampm) {
                 this.$ampm = $('<span class="datepicker--time-current-ampm">')
@@ -1993,10 +2132,12 @@
 
         _updateCurrentTime: function () {
             var h =  dp.getLeadingZeroNum(this.displayHours),
-                m = dp.getLeadingZeroNum(this.minutes);
+                m = dp.getLeadingZeroNum(this.minutes),
+                s = dp.getLeadingZeroNum(this.seconds);
 
             this.$hoursText.html(h);
             this.$minutesText.html(m);
+            this.$secondsText.html(s);
 
             if (this.d.ampm) {
                 this.$ampm.html(this.dayPeriod);
@@ -2012,7 +2153,12 @@
             this.$minutes.attr({
                 min: this.minMinutes,
                 max: this.maxMinutes
-            }).val(this.minutes)
+            }).val(this.minutes);
+            
+            this.$seconds.attr({
+                min: this.minSeconds,
+                max: this.maxSeconds
+            }).val(this.seconds);
         },
 
         /**
@@ -2023,7 +2169,6 @@
          */
         _handleDate: function (date) {
             this._setDefaultMinMaxTime();
-
             if (date) {
                 if (dp.isSame(date, this.d.opts.minDate)) {
                     this._setMinTimeFromDate(this.d.opts.minDate);
@@ -2043,10 +2188,11 @@
         /**
          * Calculates valid hour value to display in text input and datepicker's body.
          * @param date {Date|Number} - date or hours
+         * @param [ampm] {Boolean} - 12 hours mode
          * @returns {{hours: *, dayPeriod: string}}
          * @private
          */
-        _getValidHoursFromDate: function (date) {
+        _getValidHoursFromDate: function (date, ampm) {
             var d = date,
                 hours = date;
 
@@ -2055,10 +2201,10 @@
                 hours = d.hours;
             }
 
-            var ampm = this.d.ampm,
+            var _ampm = ampm || this.d.ampm,
                 dayPeriod = 'am';
 
-            if (ampm) {
+            if (_ampm) {
                 switch(true) {
                     case hours == 0:
                         hours = 12;
@@ -2105,7 +2251,10 @@
 
             this[name] = $target.val();
             this._updateCurrentTime();
-            this.d._trigger('timeChange', [this.hours, this.minutes])
+            this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
+
+            this._handleDate(this.d.lastSelectedDate);
+            this.update()
         },
 
         _onSelectDate: function (e, data) {

dist/js/i18n/datepicker.cs.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['cs'] = {
+    days: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'],
+    daysShort: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
+    daysMin: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
+    months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
+    monthsShort: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čvn', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
+    today: 'Dnes',
+    clear: 'Vymazat',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+}; })(jQuery);

dist/js/i18n/datepicker.es.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['es'] = {
+    days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
+    daysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
+    daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
+    months: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 'Julio','Augosto','Septiembre','Octubre','Noviembre','Diciembre'],
+    monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
+    today: 'Hoy',
+    clear: 'Limpiar',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii aa',
+    firstDay: 1
+}; })(jQuery);

dist/js/i18n/datepicker.fi.js

@@ -0,0 +1,13 @@
+;(function ($) { $.fn.datepicker.language['fi'] = {
+    days: ['Sunnuntai', 'Maanantai', 'Tiistai', 'Keskiviikko', 'Torstai', 'Perjantai', 'Lauantai'],
+    daysShort: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
+    daysMin: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
+    months: ['Tammikuu','Helmikuu','Maaliskuu','Huhtikuu','Toukokuu','Kesäkuu', 'Heinäkuu','Elokuu','Syyskuu','Lokakuu','Marraskuu','Joulukuu'],
+    monthsShort: ['Tammi', 'Helmi', 'Maalis', 'Huhti', 'Touko', 'Kesä', 'Heinä', 'Elo', 'Syys', 'Loka', 'Marras', 'Joulu'],
+    today: 'Tänään',
+    clear: 'Tyhjennä',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};
+ })(jQuery);

dist/js/i18n/datepicker.fr.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['fr'] = {
+    days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
+    daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+    daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
+    months: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Decembre'],
+    monthsShort: ['Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
+    today: "Aujourd'hui",
+    clear: 'Effacer',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+}; })(jQuery);

dist/js/i18n/datepicker.hu.js

@@ -0,0 +1,12 @@
+;(function ($) { ;(function ($) { $.fn.datepicker.language['hu'] = {
+    days: ['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'],
+    daysShort: ['Va', 'Hé', 'Ke', 'Sze', 'Cs', 'Pé', 'Szo'],
+    daysMin: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
+    months: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
+    monthsShort: ['Jan', 'Feb', 'Már', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szep', 'Okt', 'Nov', 'Dec'],
+    today: 'Ma',
+    clear: 'Törlés',
+    dateFormat: 'yyyy-mm-dd',
+    timeFormat: 'hh:ii aa',
+    firstDay: 1
+}; })(jQuery); })(jQuery);

dist/js/i18n/datepicker.pl.js

@@ -0,0 +1,13 @@
+;(function ($) { $.fn.datepicker.language['pl'] = {
+    days: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
+    daysShort: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob'],
+    daysMin: ['Nd', 'Pn', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
+    months: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
+    monthsShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
+    today: 'Dzisiaj',
+    clear: 'Wyczyść',
+    dateFormat: 'yyyy-mm-dd',
+    timeFormat: 'hh:ii:aa',
+    firstDay: 1
+};
+ })(jQuery);

dist/js/i18n/datepicker.sk.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['sk'] = {
+    days: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
+    daysShort: ['Ned', 'Pon', 'Uto', 'Str', 'Štv', 'Pia', 'Sob'],
+    daysMin: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'],
+    months: ['Január','Február','Marec','Apríl','Máj','Jún', 'Júl','August','September','Október','November','December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
+    today: 'Dnes',
+    clear: 'Vymazať',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+}; })(jQuery);

docs/index.html

@@ -1,7 +1,7 @@
-<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/style.css" rel="stylesheet" type="text/css"><link href="css/github-gist.css" rel="stylesheet" type="text/css"><link href="../dist/css/datepicker.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><script src="../dist/js/datepicker.js"></script><script src="../dist/js/i18n/datepicker.en.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><div class="buttons"><a aria-label="Star t1m0n/air-datepicker on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/t1m0n/air-datepicker#stargazers_count" data-count-href="/t1m0n/air-datepicker/stargazers" data-icon="octicon-star" href="https://github.com/t1m0n/air-datepicker" class="github-button">Star</a></div><a href="index-ru.html" class="lang-link"><img src="img/ru.png"><span>На русском языке</span></a><h1 class="promo-header">AIR DATEPICKER<span>lightweight cross-browser jQuery datepicker</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo');
+<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/style.css" rel="stylesheet" type="text/css"><link href="css/github-gist.css" rel="stylesheet" type="text/css"><link href="../dist/css/datepicker.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><script src="../dist/js/datepicker.js"></script><script src="../dist/js/i18n/datepicker.en.js"></script><script src="js/logger.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><div class="buttons"><a aria-label="Star t1m0n/air-datepicker on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/t1m0n/air-datepicker#stargazers_count" data-count-href="/t1m0n/air-datepicker/stargazers" data-icon="octicon-star" href="https://github.com/t1m0n/air-datepicker" class="github-button">Star</a></div><a href="index-ru.html" class="lang-link"><img src="img/ru.png"><span>На русском языке</span></a><h1 class="promo-header">AIR DATEPICKER<span>lightweight cross-browser jQuery datepicker</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo');
 $promo.datepicker({
     language: 'en'
-})</script></p><article><h2 id="intro">Description</h2><p>Light (<i><strong>~34kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with<span class="example-inline"><code>es5</code></span>and<span class="example-inline"><code class="js">css flexbox</code></span>.Works in all modern browsers:
+})</script></p><article><h2 id="intro">Description</h2><p>Light (<i><strong>~36kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with<span class="example-inline"><code>es5</code></span>and<span class="example-inline"><code class="js">css flexbox</code></span>.Works in all modern browsers:
 <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.</p></article><article><h2 id="install">Installation</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Or you can download files directly from <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a></p></article><article><h2 id="usage">Usage</h2><p>Include styles and scripts from<span class="example-inline"><code>/dist</code></span>directory:</p><pre class="example-code"><code class="html">&lt;html&gt;
     &lt;head&gt;
         &lt;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
@@ -30,7 +30,7 @@ $('#my-element').data('datepicker')</code></pre></article><article><h2 id="examp
     language: 'en',
     minDate: new Date() // Now can select only dates, which goes after today
 })
-</code></pre></div><h3 id="example-range">Range of dates</h3><p>Use<span class="example-inline"><code>{range: true}</code></span>for choosing range of dates. As dates separator<span class="example-inline"><code>multipleDatesSeparator</code></span>will be used.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-range="true" data-multiple-dates-separator=" - " data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
+</code></pre></div><h3 id="example-range">Range of dates</h3><p>Use<span class="example-inline"><code>{range: true}</code></span>for choosing range of dates. As dates separator<span class="example-inline"><code>multipleDatesSeparator</code></span>will be used.</p><p>For possibility to select same date two times, you should set<span class="example-inline"><code>{toggleSelected: false}</code></span>.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-range="true" data-multiple-dates-separator=" - " data-language="en" class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot;
     data-range=&quot;true&quot;
     data-multiple-dates-separator=&quot; - &quot;
     data-language=&quot;en&quot;
@@ -128,7 +128,42 @@ $picker.datepicker({
 // Select initial date from `eventDates`
 var currentDate = currentDate = new Date();
 $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
-</code></pre></div></article><article><h2 id="timepicker">Timepicker</h2><p>To enable timepicker use option<span class="example-inline"><code class="js">{timepicker: true}</code></span>- it will add current time and a couple of range sliders by which one can pick time.</p><p>By default current user time will be set. This value can be changed by<span class="example-inline"><code class="js">startDate</code></span>parameter.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-timepicker="true" data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><p><i>More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.</i></p><h3 id="timepicker-format">Time format</h3><p>Time format is defined in localization object or in<span class="example-inline"><code class="js">timeFormat</code></span>parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add<span class="example-inline"><code class="js">aa</code></span>or<span class="example-inline"><code class="js">AA</code></span>symbol in<span class="example-inline"><code class="js">timeFormat</code></span>. After what 'AM' and 'PM' sings will appear in timepicker widget.</p><p>Lets use 12 hours mode in Russian language:</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
+</code></pre></div><h3 id="example-show-hide">Showing and hiding calendar</h3><p>For adding some actions while datepicker is showing or hiding, use<span class="example-inline"><code>onShow</code></span>and<span class="example-inline"><code>onHide</code></span>callbacks.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div class="row"><div class="col"><input id="example-show-hide-callbacks" type="text"></div><div class="col"><div id="example-show-hide-log" class="logger"></div></div></div><script>;(function () {
+    var log = logger('#example-show-hide-log', 'Clear')
+    $('#example-show-hide-callbacks').datepicker({
+        language: 'en',
+        onShow: function (dp, animationCompleted) {
+            if (!animationCompleted) {
+                log('start showing')
+            } else {
+                log('finished showing')
+            }
+        },
+        onHide: function (dp, animationCompleted) {
+            if (!animationCompleted) {
+                log('start hiding')
+            } else {
+                log('finished hiding')
+            }
+        }
+    })
+})();</script></div><pre class="example-code"><code>$('&#35;example-show-hide-callbacks').datepicker({
+    language: 'en',
+    onShow: function(dp, animationCompleted){
+        if (!animationCompleted) {
+            log('start showing')
+        } else {
+            log('finished showing')
+        }
+    },
+    onHide: function(dp, animationCompleted){
+        if (!animationCompleted) {
+            log('start hiding')
+        } else {
+            log('finished hiding')
+        }
+    }
+})</code></pre></div></article><article><h2 id="timepicker">Timepicker</h2><p>To enable timepicker use option<span class="example-inline"><code class="js">{timepicker: true}</code></span>- it will add current time and a couple of range sliders by which one can pick time.</p><p>By default current user time will be set. This value can be changed by<span class="example-inline"><code class="js">startDate</code></span>parameter.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-timepicker="true" data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><p><i>More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.</i></p><h3 id="timepicker-format">Time format</h3><p>Time format is defined in localization object or in<span class="example-inline"><code class="js">timeFormat</code></span>parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add<span class="example-inline"><code class="js">aa</code></span>or<span class="example-inline"><code class="js">AA</code></span>symbol in<span class="example-inline"><code class="js">timeFormat</code></span>. After what 'AM' and 'PM' sings will appear in timepicker widget.</p><p>Lets use 12 hours mode in Russian language:</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
 </code></pre></div><h3 id="timeformat-actions">Actions with time</h3><p>For setting max/min hours or minutes values use<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. You also could set time in<span class="example-inline"><code class="js">minDate</code></span>and<span class="example-inline"><code class="js">maxDate</code></span>. 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><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.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Create start date
 var start = new Date(),
         prevDay,
@@ -262,7 +297,9 @@ $('.datepicker').datepicker({
        }
    })</code></pre></div><div class="param"><header class="param-header"><h3>monthsField</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;monthsShort&quot;</code></span></p></header><p>Field name from localization object which should be used as months names, when view is 'months'.</p></div><div class="param"><header class="param-header"><h3 id="opts-timepicker">timepicker</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If<span class="example-inline"><code>true</code></span>, when timepicker widget will be added.</p></div><div class="param"><header class="param-header"><h3 id="opts-dateTimeSeparator">dateTimeSeparator</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot; &quot;</code></span></p></header><p>Separator between date and time</p></div><div class="param"><header class="param-header"><h3 id="opts-timeFormat">timeFormat</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><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<span class="example-inline"><code class="js">timeFormat</code></span>parameter, e.g.<span class="example-inline"><code class="js">{timeFormat: &quot;hh:ii AA&quot;}</code></span>Possible values are:</p><ul><li><span class="param-inline"><strong>h</strong></span>- hours</li><li><span class="param-inline"><strong>hh</strong></span>- hours with leading zero</li><li><span class="param-inline"><strong>i</strong></span>- minutes</li><li><span class="param-inline"><strong>ii</strong></span>- minutes with leading zero</li><li><span class="param-inline"><strong>aa</strong></span>- day period - 'am' or 'pm'</li><li><span class="param-inline"><strong>AA</strong></span>- day period capitalized</li></ul></div><div class="param"><header class="param-header"><h3 id="opts-minHours">minHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxHours">maxHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">23</code></span></p></header><p>Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-minMinutes">minMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxMinutes">maxMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">59</code></span></p></header><p>Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-hoursStep">hoursStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Hours step in slider.</p></div><div class="param"><header class="param-header"><h3 id="opts-minutesStep">minutesStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Minutes step in slider.</p></div></article><article><h2 id="events">Events</h2><div class="param"><header class="param-header"><h3>onSelect(formattedDate, date, inst)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when selecting date</p><ul><li><span class="param-inline"><strong>formattedDate</strong><i>string</i></span>- formatted date.</li><li><span class="param-inline"><strong>date</strong><i>Date|array</i></span>- JavaScript Date object
-if<span class="example-inline"><code class="js">{multipleDates: true}</code></span>, then it will be an array of js dates.</li><li><span class="param-inline"><strong>inst</strong><i>object</i></span>- plugin instance.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeMonth(month, year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when months are changed.</p><ul><li><span class="param-inline"><strong>month</strong><i>number</i></span>- month number (from 0 to 12), to which transition is done.</li><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeYear(year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when year is changed</p><ul><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeDecade(decade)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when decade is changed</p><ul><li><span class="param-inline"><strong>decade</strong><i>array</i></span>- array which consists of two years: first year in decade and last year in decade.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeView(view)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's view is changed</p><ul><li><span class="param-inline"><strong>view</strong><i>string</i></span>- view name, to which transition is done (days, months, years).</li></ul></div><div class="param"><header class="param-header"><h3>onRenderCell(date, cellType)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's cell is rendered.</p><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- current cell date</li><li><span class="param-inline"><strong>cellType</strong><i>string</i></span>- current cell type (day, month, year).</li></ul><p>The callback must return object which may consists of three fields:</p><pre class="example-code"><code class="js">{
+if<span class="example-inline"><code class="js">{multipleDates: true}</code></span>, then it will be an array of js dates.</li><li><span class="param-inline"><strong>inst</strong><i>object</i></span>- plugin instance.</li></ul></div><div class="param"><header class="param-header"><h3>onShow(inst, animationCompleted)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when calendar is showing.</p><ul><li><span class="param-inline"><strong>inst</strong><i>Object</i></span>- plugin instance.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- animation indicator.
+if its<span class="example-inline"><code>false</code></span>, when animation has just begun, if<span class="example-inline"><code>true</code></span>- already ended.</li></ul></div><div class="param"><header class="param-header"><h3>onHide(inst, animationCompleted)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when calendar is hiding.</p><ul><li><span class="param-inline"><strong>inst</strong><i>Object</i></span>- plugin instance.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- animation indicator.
+if its<span class="example-inline"><code>false</code></span>, when animation has just begun, if<span class="example-inline"><code>true</code></span>- already ended.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeMonth(month, year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when months are changed.</p><ul><li><span class="param-inline"><strong>month</strong><i>number</i></span>- month number (from 0 to 12), to which transition is done.</li><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeYear(year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when year is changed</p><ul><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeDecade(decade)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when decade is changed</p><ul><li><span class="param-inline"><strong>decade</strong><i>array</i></span>- array which consists of two years: first year in decade and last year in decade.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeView(view)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's view is changed</p><ul><li><span class="param-inline"><strong>view</strong><i>string</i></span>- view name, to which transition is done (days, months, years).</li></ul></div><div class="param"><header class="param-header"><h3>onRenderCell(date, cellType)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's cell is rendered.</p><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- current cell date</li><li><span class="param-inline"><strong>cellType</strong><i>string</i></span>- current cell type (day, month, year).</li></ul><p>The callback must return object which may consists of three fields:</p><pre class="example-code"><code class="js">{
     html: '', // Custom cell content
     classes: '', // Extra css classes to cell
     disabled: '' // true/false, if true, then cell will be disabled
@@ -278,7 +315,7 @@ if<span class="example-inline"><code class="js">{multipleDates: true}</code></sp
         }
     }
 })</code></pre></div></article><article><h2 id="api">API</h2><p>Plugin instance is accessible through<span class="example-inline"><code>data</code></span>attribute.</p><pre class="example-code"><code class="js">var myDatepicker = $('#my-elem').datepicker().data('datepicker');
-myDatepicker.show();</code></pre><div class="param"><header class="param-header"><h3>show()</h3></header><p>Shows datepicker.</p></div><div class="param"><header class="param-header"><h3>hide()</h3></header><p>Hides datepicker.</p></div><div class="param"><header class="param-header"><h3>next()</h3></header><p>Renders next month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>prev()</h3></header><p>Renders previous month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>selectDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Activates passed date. If<span class="example-inline"><code class="js">{multipleDates: false}</code></span>and date is already active, then it will be deactivated. If<span class="example-inline"><code class="js">{multipleDates: true}</code></span>then another active date will be added.</p></div><div class="param"><header class="param-header"><h3>removeDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Removes selection from passed date.</p></div><div class="param"><header class="param-header"><h3>clear()</h3></header><p>Clears all selected dates.</p></div><div class="param"><header class="param-header"><h3>update(field[, value])</h3></header><ul><li><span class="param-inline"><strong>field</strong><i>string|object</i></span>- field name which must be updated.</li><li><span class="param-inline"><strong>field</strong><i>string|*</i></span>- new value.</li></ul><p>This method updates datepicker's options. After calling this method, datepicker will be redrawn.
+myDatepicker.show();</code></pre><div class="param"><header class="param-header"><h3>show()</h3></header><p>Shows datepicker.</p></div><div class="param"><header class="param-header"><h3>hide()</h3></header><p>Hides datepicker.</p></div><div class="param"><header class="param-header"><h3>destroy()</h3></header><p>Destroys datepicker.</p></div><div class="param"><header class="param-header"><h3>next()</h3></header><p>Renders next month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>prev()</h3></header><p>Renders previous month, year or decade, depending on current view.</p></div><div class="param"><header class="param-header"><h3>selectDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date|Array</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span>, or array of dates.</li></ul><p>Activates passed date or multiple dates if array is passed. If<span class="example-inline"><code class="js">{multipleDates: false}</code></span>and date is already active, then it will be deactivated. If<span class="example-inline"><code class="js">{multipleDates: true}</code></span>then another active date will be added.</p></div><div class="param"><header class="param-header"><h3>removeDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Removes selection from passed date.</p></div><div class="param"><header class="param-header"><h3>clear()</h3></header><p>Clears all selected dates.</p></div><div class="param"><header class="param-header"><h3>update(field[, value])</h3></header><ul><li><span class="param-inline"><strong>field</strong><i>string|object</i></span>- field name which must be updated.</li><li><span class="param-inline"><strong>field</strong><i>string|*</i></span>- new value.</li></ul><p>This method updates datepicker's options. After calling this method, datepicker will be redrawn.
 You can update several parameters at one time, just pass in object with necessary fields.</p><pre class="example-code"><code class="js">var datepicker = $('#my-elem').datepicker().data('datepicker');
 // Single parameter update
 datepicker.update('minDate', new Date())
@@ -287,7 +324,8 @@ datepicker.update({
     position: "top right",
     maxDate: new Date(),
     todayButton: true
-})</code></pre></div><div class="param"><header class="param-header"><h3>view</h3></header><p>Sets new view for datepicker.</p><pre class="example-code"><code class="js">datepicker.view = 'months';</code></pre></div><div class="param"><header class="param-header"><h3>date</h3></header><p>Sets new viewing date for datepicker, must pass a JavaScript Date object<span class="example-inline"><code>Date()</code></span></p><pre class="example-code"><code class="js">datepicker.date = new Date();</code></pre></div></article></div></main></div><script src="js/navigation.js"></script><script>var $code = $('code');
+})</code></pre></div><div class="param"><header class="param-header"><h3>view</h3></header><p>Sets new view for datepicker.</p><pre class="example-code"><code class="js">datepicker.view = 'months';</code></pre></div><div class="param"><header class="param-header"><h3>date</h3></header><p>Sets new viewing date for datepicker, must pass a JavaScript Date object<span class="example-inline"><code>Date()</code></span></p><pre class="example-code"><code class="js">datepicker.date = new Date();
+</code></pre></div><div class="param"><header class="param-header"><h3>$el</h3></header><p>Datepicker's DOM element</p></div><div class="param"><header class="param-header"><h3>selectedDates</h3></header><p>Array of selected dates</p></div></article></div></main></div><script src="js/navigation.js"></script><script>var $code = $('code');
 $code.each(function (i, el) {
 	hljs.highlightBlock(el);
 })

docs/jade/layout.jade

@@ -20,6 +20,7 @@ html
 		script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
 		script(src='../dist/js/datepicker.js')
 		script(src='../dist/js/i18n/datepicker.en.js')
+		script(src='js/logger.js')
 	body
 		div.wrapper
 			main.main(role='main')

docs/jade/pages/index-ru.jade

@@ -17,7 +17,7 @@ block content
     article
         h2#intro Описание
         p
-			| Легкий (<i><strong>~34kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
+            | Легкий (<i><strong>~36kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием
             +example-inline('es5')
             | и
             +example-inline('css flexbox', 'js')
@@ -142,6 +142,10 @@ block content
             | для выбора диапазона. В качестве разделителя дат будет использован
             +example-inline('multipleDatesSeparator')
 
+        p Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить
+            +example-inline('{toggleSelected: false}')
+            |.
+
 
         +example
             +example-content
@@ -277,6 +281,59 @@ block content
                     var currentDate = currentDate = new Date();
                     $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
 
+        h3#example-show-hide Появление и скрытие календаря
+        p Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции
+            +example-inline('onShow')
+            | и
+            +example-inline('onHide')
+
+        +example
+            +example-content
+                .row
+                    .col
+                        input#example-show-hide-callbacks(type='text')
+                    .col
+                        div.logger#example-show-hide-log
+                script.
+                    ;(function () {
+                        var log = logger('#example-show-hide-log', 'Очистить')
+                        $('#example-show-hide-callbacks').datepicker({
+                            onShow: function (dp, animationCompleted) {
+                                if (!animationCompleted) {
+                                    log('start showing')
+                                } else {
+                                    log('finished showing')
+                                }
+                            },
+                            onHide: function (dp, animationCompleted) {
+                                if (!animationCompleted) {
+                                    log('start hiding')
+                                } else {
+                                    log('finished hiding')
+                                }
+                            }
+                        })
+                    })();
+            +example-code
+                :code
+                    $('#example-show-hide-callbacks').datepicker({
+                        onShow: function(dp, animationCompleted){
+                            if (!animationCompleted) {
+                                log('start showing')
+                            } else {
+                                log('finished showing')
+                            }
+                        },
+                        onHide: function(dp, animationCompleted){
+                            if (!animationCompleted) {
+                                log('start hiding')
+                            } else {
+                                log('finished hiding')
+                            }
+                        }
+                    })
+
+
     article
         h2#timepicker Выбор времени
         p Для выбора времени используйте опцию
@@ -817,6 +874,38 @@ block content
                     +param('inst','object')
                     | - экземпляр плагина.
 
+        .param
+            +param-header('onShow(inst, animationCompleted)', 'function', 'null')
+            p Функция обратного вызова при появлении календаря.
+            ul
+                li
+                    +param('inst', 'Object')
+                    | - экземпляр календаря.
+                li
+                    +param('animationCompleted','boolean')
+                    | - индикатор состояния анимации.
+                    | если
+                    +example-inline('false')
+                    | , то анимация только началась, если
+                    +example-inline('true')
+                    | - уже закончилась.
+
+        .param
+            +param-header('onHide(inst, animationCompleted)', 'function', 'null')
+            p Функция обратного вызова при скрытии календаря.
+            ul
+                li
+                    +param('inst', 'Object')
+                    | - экземпляр календаря.
+                li
+                    +param('animationCompleted','boolean')
+                    | - индикатор состояния анимации.
+                    | если
+                    +example-inline('false')
+                    | , то анимация только началась, если
+                    +example-inline('true')
+                    | - уже закончилась.
+
         .param
             +param-header('onChangeMonth(month, year)','function','null')
             p Функция обратного вызова при изменении месяца.
@@ -903,6 +992,10 @@ block content
             +param-header('hide()')
             p Скрывает календарь.
 
+        .param
+            +param-header('destroy()')
+            p Удаляет календарь.
+
         .param
             +param-header('next()')
             p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.
@@ -915,11 +1008,10 @@ block content
             +param-header('selectDate(date)')
             ul
                 li
-					+param('date','Date')
+                    +param('date','Date|Array')
-					| - дата в формате JavaScript
+                    | - дата в формате JavaScript, или массив дат
-					+example-inline('Date()', 'js')
             p
-				| Выбирает переданную дату. Если
+                | Выбирает переданную дату или несколько дат, если передан массив с датами. Если
                 +example-inline('{multipleDates: false}','js')
                 | и уже есть активная дата, то она будет деактивирована. Если
                 +example-inline('{multipleDates: true}','js')
@@ -979,3 +1071,11 @@ block content
 
             +example-code('js').
                 datepicker.date = new Date();
+
+        .param
+            +param-header('$el')
+            p DOM элемент календаря
+
+        .param
+            +param-header('selectedDates')
+            p Массив выбранных дат

docs/jade/pages/index.jade

@@ -17,7 +17,7 @@ block content
     article
         h2#intro Description
         p
-			| Light (<i><strong>~34kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with
+            | Light (<i><strong>~36kb</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')
@@ -138,6 +138,10 @@ block content
             | for choosing range of dates. As dates separator
             +example-inline('multipleDatesSeparator')
             | will be used.
+        p For possibility to select same date two times, you should set
+            +example-inline('{toggleSelected: false}')
+            | .
+
         +example
             +example-content
                 input(type='text' data-range='true' data-multiple-dates-separator=' - ' data-language='en').datepicker-here
@@ -270,6 +274,60 @@ block content
                     var currentDate = currentDate = new Date();
                     $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
 
+        h3#example-show-hide Showing and hiding calendar
+        p For adding some actions while datepicker is showing or hiding, use
+            +example-inline('onShow')
+            | and
+            +example-inline('onHide')
+            | callbacks.
+
+        +example
+            +example-content
+                .row
+                    .col
+                        input#example-show-hide-callbacks(type='text')
+                    .col
+                        div.logger#example-show-hide-log
+                script.
+                    ;(function () {
+                        var log = logger('#example-show-hide-log', 'Clear')
+                        $('#example-show-hide-callbacks').datepicker({
+                            language: 'en',
+                            onShow: function (dp, animationCompleted) {
+                                if (!animationCompleted) {
+                                    log('start showing')
+                                } else {
+                                    log('finished showing')
+                                }
+                            },
+                            onHide: function (dp, animationCompleted) {
+                                if (!animationCompleted) {
+                                    log('start hiding')
+                                } else {
+                                    log('finished hiding')
+                                }
+                            }
+                        })
+                    })();
+            +example-code
+                :code
+                    $('#example-show-hide-callbacks').datepicker({
+                        language: 'en',
+                        onShow: function(dp, animationCompleted){
+                            if (!animationCompleted) {
+                                log('start showing')
+                            } else {
+                                log('finished showing')
+                            }
+                        },
+                        onHide: function(dp, animationCompleted){
+                            if (!animationCompleted) {
+                                log('start hiding')
+                            } else {
+                                log('finished hiding')
+                            }
+                        }
+                    })
     article
         h2#timepicker Timepicker
         p To enable timepicker use option
@@ -783,6 +841,38 @@ block content
                 li
                     +param('inst','object')
                     | - plugin instance.
+        .param
+            +param-header('onShow(inst, animationCompleted)', 'function', 'null')
+            p Callback when calendar is showing.
+            ul
+                li
+                    +param('inst', 'Object')
+                    | - plugin instance.
+                li
+                    +param('animationCompleted','boolean')
+                    | - animation indicator.
+                    | if its
+                    +example-inline('false')
+                    | , when animation has just begun, if
+                    +example-inline('true')
+                    | - already ended.
+
+        .param
+            +param-header('onHide(inst, animationCompleted)', 'function', 'null')
+            p Callback when calendar is hiding.
+            ul
+                li
+                    +param('inst', 'Object')
+                    | - plugin instance.
+                li
+                    +param('animationCompleted','boolean')
+                    | - animation indicator.
+                    | if its
+                    +example-inline('false')
+                    | , when animation has just begun, if
+                    +example-inline('true')
+                    | - already ended.
+
         .param
             +param-header('onChangeMonth(month, year)','function','null')
             p Callback when months are changed.
@@ -860,6 +950,9 @@ block content
         .param
             +param-header('hide()')
             p Hides datepicker.
+        .param
+            +param-header('destroy()')
+            p Destroys datepicker.
         .param
             +param-header('next()')
             p Renders next month, year or decade, depending on current view.
@@ -870,11 +963,12 @@ block content
             +param-header('selectDate(date)')
             ul
                 li
-					+param('date','Date')
+                    +param('date','Date|Array')
                     | - JavaScript
                     +example-inline('Date()', 'js')
+                    | , or array of dates.
             p
-				| Activates passed date. If
+                | Activates passed date or multiple dates if array is passed. If
                 +example-inline('{multipleDates: false}','js')
                 | and date is already active, then it will be deactivated. If
                 +example-inline('{multipleDates: true}','js')
@@ -927,3 +1021,11 @@ block content
                 +example-inline('Date()')
             +example-code('js').
                 datepicker.date = new Date();
+
+        .param
+            +param-header('$el')
+            p Datepicker's DOM element
+
+        .param
+            +param-header('selectedDates')
+            p Array of selected dates

docs/js/logger.js

@@ -0,0 +1,29 @@
+var logger;
+(function (window) {
+    logger = function (el, clearText) {
+        var $el = $(el);
+
+        addContent($el);
+        addClearButton(clearText, $el);
+
+        $('.logger--clear', $el).on('click', clear.bind('', $el));
+
+        return function(text) {
+            var count = $('p', $el).length,
+                $content = $('.logger--content', $el);
+            $content.append('<p><span>' + ++count + '.</span> ' + text + '</p>').scrollTop(100000)
+        }
+    };
+
+    function addClearButton (text, el) {
+        el.append('<span class="logger--clear">' + text + '</span>')
+    }
+
+    function addContent (el) {
+        el.html('<div class="logger--content"></div>')
+    }
+
+    function clear (el) {
+        $('.logger--content', el).html('');
+    }
+})(window);

docs/sass/_docs.scss

@@ -42,6 +42,13 @@ h4 {
   margin: 24px 0 0;
 }
 
+.row {
+  display: flex;
+  > * {
+    flex: 1;
+  }
+}
+
 article {
   h2, h3 {
     position: relative;
@@ -507,3 +514,56 @@ a {
     color: #ddd;
   }
 }
+
+//  Logger
+// -------------------------------------------------
+
+.logger {
+  background: rgba(0, 0, 0, .7);
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: Monospace, monospace;
+  height: 150px;
+  overflow: auto;
+  position: relative;
+}
+
+.logger--content {
+  padding: 4px 8px;
+  height: 100%;
+  overflow: auto;
+
+  p {
+    margin: 0;
+    color: greenyellow;
+  }
+
+  span {
+    color: #ddd;
+  }
+}
+
+.logger--clear {
+  color: #333;
+  border-radius: 4px 4px 0 0;
+  cursor: pointer;
+  position: absolute;
+  height: 32px;
+  padding: 0 8px;
+  font-family: 'Tahoma', sans-serif;
+  font-size: 13px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, .5);
+  right: 24px;
+  bottom: 0;
+
+  &:hover {
+    background: rgba(255, 255, 255, .8);
+  }
+
+  &:active {
+    background: rgba(255, 255, 255, .3);
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "air-datepicker",
-  "version": "2.0.2",
+  "version": "2.2.3",
   "devDependencies": {
     "autoprefixer": "^6.1.0",
     "browserify": "^13.0.0",
@@ -25,7 +25,7 @@
     "vinyl-source-stream": "^1.1.0"
   },
   "dependencies": {
-    "jquery": "^2.2.3"
+    "jquery": ">=2.0.0 <4.0.0"
   },
   "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",

src/js/body.js

@@ -21,7 +21,9 @@
         this.d = d;
         this.type = type;
         this.opts = opts;
+        this.$el = $('');
 
+        if (this.opts.onlyTimepicker) return;
         this.init();
     };
 
@@ -60,17 +62,13 @@
             var classes = "datepicker--cell datepicker--cell-" + type,
                 currentDate = new Date(),
                 parent = this.d,
+                minRange = dp.resetTime(parent.minRange),
+                maxRange = dp.resetTime(parent.maxRange),
                 opts = parent.opts,
                 d = dp.getParsedDate(date),
                 render = {},
                 html = d.date;
 
-            if (opts.onRenderCell) {
-                render = opts.onRenderCell(date, type) || {};
-                html = render.html ? render.html : html;
-                classes += render.classes ? ' ' + render.classes : '';
-            }
-
             switch (type) {
                 case 'day':
                     if (parent.isWeekend(d.day)) classes += " -weekend-";
@@ -105,26 +103,26 @@
             }
 
             if (opts.range) {
-                if (dp.isSame(parent.minRange, date, type)) classes += ' -range-from-';
+                if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
-                if (dp.isSame(parent.maxRange, date, type)) classes += ' -range-to-';
+                if (dp.isSame(maxRange, date, type)) classes += ' -range-to-';
 
                 if (parent.selectedDates.length == 1 && parent.focused) {
                     if (
-                        (dp.bigger(parent.minRange, date) && dp.less(parent.focused, date)) ||
+                        (dp.bigger(minRange, date) && dp.less(parent.focused, date)) ||
-                        (dp.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
+                        (dp.less(maxRange, date) && dp.bigger(parent.focused, date)))
                     {
                         classes += ' -in-range-'
                     }
 
-                    if (dp.less(parent.maxRange, date) && dp.isSame(parent.focused, date)) {
+                    if (dp.less(maxRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-from-'
                     }
-                    if (dp.bigger(parent.minRange, date) && dp.isSame(parent.focused, date)) {
+                    if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-to-'
                     }
 
                 } else if (parent.selectedDates.length == 2) {
-                    if (dp.bigger(parent.minRange, date) && dp.less(parent.maxRange, date)) {
+                    if (dp.bigger(minRange, date) && dp.less(maxRange, date)) {
                         classes += ' -in-range-'
                     }
                 }
@@ -247,6 +245,7 @@
         },
 
         _render: function () {
+            if (this.opts.onlyTimepicker) return;
             this._renderTypes[this.type].bind(this)();
         },
 
@@ -265,6 +264,7 @@
         },
 
         show: function () {
+            if (this.opts.onlyTimepicker) return;
             this.$el.addClass('active');
             this.acitve = true;
         },
@@ -280,10 +280,11 @@
         _handleClick: function (el) {
             var date = el.data('date') || 1,
                 month = el.data('month') || 0,
-                year = el.data('year') || this.d.parsedDate.year;
+                year = el.data('year') || this.d.parsedDate.year,
+                dp = this.d;
             // Change view if min view does not reach yet
-            if (this.d.view != this.opts.minView) {
+            if (dp.view != this.opts.minView) {
-                this.d.down(new Date(year, month, date));
+                dp.down(new Date(year, month, date));
                 return;
             }
             // Select date if min view is reached
@@ -291,17 +292,12 @@
                 alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
 
             if (!alreadySelected) {
-                this.d._trigger('clickCell', selectedDate);
+                dp._trigger('clickCell', selectedDate);
-            } else if (alreadySelected && this.opts.toggleSelected){
+                return;
-                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();
-                }
             }
 
+            dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
+
         },
 
         _onClickCell: function (e) {

src/js/datepicker.js

@@ -1,5 +1,6 @@
 ;(function () {
-    var pluginName = 'datepicker',
+    var VERSION = '2.2.3',
+        pluginName = 'datepicker',
         autoInitSelector = '.datepicker-here',
         $body, $datepickersContainer,
         containerBuilt = false,
@@ -62,17 +63,23 @@
 
             // timepicker
             timepicker: false,
+            onlyTimepicker: false,
             dateTimeSeparator: ' ',
             timeFormat: '',
             minHours: 0,
             maxHours: 24,
             minMinutes: 0,
             maxMinutes: 59,
+            minSeconds: 0,
+            maxSeconds: 59,
             hoursStep: 1,
             minutesStep: 1,
+            secondsStep: 1,
 
             // events
             onSelect: '',
+            onShow: '',
+            onHide: '',
             onChangeMonth: '',
             onChangeYear: '',
             onChangeDecade: '',
@@ -138,6 +145,7 @@
     datepicker = Datepicker;
 
     datepicker.prototype = {
+        VERSION: VERSION,
         viewIndexes: ['days', 'months', 'years'],
 
         init: function () {
@@ -154,7 +162,7 @@
                     this._setPositionClasses(this.opts.position);
                     this._bindEvents()
                 }
-                if (this.opts.keyboardNav) {
+                if (this.opts.keyboardNav && !this.opts.onlyTimepicker) {
                     this._bindKeyboardEvents();
                 }
                 this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
@@ -170,6 +178,10 @@
                 this._bindTimepickerEvents();
             }
 
+            if (this.opts.onlyTimepicker) {
+                this.$datepicker.addClass('-only-timepicker-');
+            }
+
             this.views[this.currentView] = new $.fn.datepicker.Body(this, this.currentView, this.opts);
             this.views[this.currentView].show();
             this.nav = new $.fn.datepicker.Navigation(this, this.opts);
@@ -239,6 +251,10 @@
                 this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
             }
 
+            if (this.opts.onlyTimepicker) {
+                this.loc.dateFormat = this.loc.timeFormat;
+            }
+
             var boundary = this._getWordBoundaryRegExp;
             if (this.loc.timeFormat.match(boundary('aa')) ||
                 this.loc.timeFormat.match(boundary('AA'))
@@ -289,7 +305,8 @@
                     parsedSelected.month,
                     parsedSelected.date,
                     parsedSelected.hours,
-                    parsedSelected.minutes
+                    parsedSelected.minutes,
+                    parsedSelected.seconds
                 );
 
                 formattedDates = selectedDates.map(function (date) {
@@ -305,11 +322,11 @@
                         parsedDate.month,
                         parsedDate.date,
                         parsedDate.hours,
-                        parsedDate.minutes
+                        parsedDate.minutes,
+                        parsedDate.seconds
                     );
                 })
             }
-
             this._prevOnSelectValue = formattedDates;
             this.opts.onSelect(formattedDates, dates, this);
         },
@@ -362,11 +379,13 @@
                 d = datepicker.getParsedDate(date),
                 fullHours = d.fullHours,
                 hours = d.hours,
+                ampm = string.match(boundary('aa')) || string.match(boundary('AA')),
                 dayPeriod = 'am',
+                replacer = this._replacer,
                 validHours;
 
-            if (this.opts.timepicker && this.timepicker && this.ampm) {
+            if (this.opts.timepicker && this.timepicker && ampm) {
-                validHours = this.timepicker._getValidHoursFromDate(date);
+                validHours = this.timepicker._getValidHoursFromDate(date, ampm);
                 fullHours = leadingZero(validHours.hours);
                 hours = validHours.hours;
                 dayPeriod = validHours.dayPeriod;
@@ -376,50 +395,63 @@
                 case /@/.test(result):
                     result = result.replace(/@/, date.getTime());
                 case /aa/.test(result):
-                    result = result.replace(boundary('aa'), dayPeriod);
+                    result = replacer(result, boundary('aa'), dayPeriod);
                 case /AA/.test(result):
-                    result = result.replace(boundary('AA'), dayPeriod.toUpperCase());
+                    result = replacer(result, boundary('AA'), dayPeriod.toUpperCase());
                 case /dd/.test(result):
-                    result = result.replace(boundary('dd'), d.fullDate);
+                    result = replacer(result, boundary('dd'), d.fullDate);
                 case /d/.test(result):
-                    result = result.replace(boundary('d'), d.date);
+                    result = replacer(result, boundary('d'), d.date);
                 case /DD/.test(result):
-                    result = result.replace(boundary('DD'), locale.days[d.day]);
+                    result = replacer(result, boundary('DD'), locale.days[d.day]);
                 case /D/.test(result):
-                    result = result.replace(boundary('D'), locale.daysShort[d.day]);
+                    result = replacer(result, boundary('D'), locale.daysShort[d.day]);
                 case /mm/.test(result):
-                    result = result.replace(boundary('mm'), d.fullMonth);
+                    result = replacer(result, boundary('mm'), d.fullMonth);
                 case /m/.test(result):
-                    result = result.replace(boundary('m'), d.month + 1);
+                    result = replacer(result, boundary('m'), d.month + 1);
                 case /MM/.test(result):
-                    result = result.replace(boundary('MM'), this.loc.months[d.month]);
+                    result = replacer(result, boundary('MM'), this.loc.months[d.month]);
                 case /M/.test(result):
-                    result = result.replace(boundary('M'), locale.monthsShort[d.month]);
+                    result = replacer(result, boundary('M'), locale.monthsShort[d.month]);
+                case /ss/.test(result):
+                    result = replacer(result, boundary('ss'), d.fullSeconds);
+                case /s/.test(result):
+                    result = replacer(result, boundary('s'), d.seconds);
                 case /ii/.test(result):
-                    result = result.replace(boundary('ii'), d.fullMinutes);
+                    result = replacer(result, boundary('ii'), d.fullMinutes);
                 case /i/.test(result):
-                    result = result.replace(boundary('i'), d.minutes);
+                    result = replacer(result, boundary('i'), d.minutes);
                 case /hh/.test(result):
-                    result = result.replace(boundary('hh'), fullHours);
+                    result = replacer(result, boundary('hh'), fullHours);
                 case /h/.test(result):
-                    result = result.replace(boundary('h'), hours);
+                    result = replacer(result, boundary('h'), hours);
                 case /yyyy/.test(result):
-                    result = result.replace(boundary('yyyy'), d.year);
+                    result = replacer(result, boundary('yyyy'), d.year);
                 case /yyyy1/.test(result):
-                    result = result.replace(boundary('yyyy1'), decade[0]);
+                    result = replacer(result, boundary('yyyy1'), decade[0]);
                 case /yyyy2/.test(result):
-                    result = result.replace(boundary('yyyy2'), decade[1]);
+                    result = replacer(result, boundary('yyyy2'), decade[1]);
                 case /yy/.test(result):
-                    result = result.replace(boundary('yy'), d.year.toString().slice(-2));
+                    result = replacer(result, boundary('yy'), d.year.toString().slice(-2));
             }
 
             return result;
         },
 
-        _getWordBoundaryRegExp: function (sign) {
+        _replacer: function (str, reg, data) {
-            return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
+            return str.replace(reg, function (match, p1,p2,p3) {
+                return p1 + data + p3;
+            })
         },
 
+        _getWordBoundaryRegExp: function (sign) {
+            var symbols = '\\s|\\.|-|/|\\\\|,|\\$|\\!|\\?|:|;';
+
+            return new RegExp('(^|>|' + symbols + ')(' + sign + ')($|<|' + symbols + ')', 'g');
+        },
+
+
         selectDate: function (date) {
             var _this = this,
                 opts = _this.opts,
@@ -453,6 +485,7 @@
             if (this.timepicker) {
                 date.setHours(this.timepicker.hours);
                 date.setMinutes(this.timepicker.minutes)
+                date.setSeconds(this.timepicker.seconds)
             }
 
             if (_this.view == 'days') {
@@ -581,7 +614,8 @@
          * @param {String|Number|Object} [value] - new param value
          */
         update: function (param, value) {
-            var len = arguments.length;
+            var len = arguments.length,
+                lastSelectedDate = this.lastSelectedDate;
 
             if (len == 2) {
                 this.opts[param] = value;
@@ -593,7 +627,7 @@
             this._syncWithMinMaxDates();
             this._defineLocale(this.opts.language);
             this.nav._addButtonsIfNeed();
-            this.nav._render();
+            if (!this.opts.onlyTimepicker) this.nav._render();
             this.views[this.currentView]._render();
 
             if (this.elIsInput && !this.opts.inline) {
@@ -607,14 +641,19 @@
                 this.$datepicker.addClass(this.opts.classes)
             }
 
+            if (this.opts.onlyTimepicker) {
+                this.$datepicker.addClass('-only-timepicker-');
+            }
+
             if (this.opts.timepicker) {
-                this.timepicker._handleDate(this.lastSelectedDate);
+                if (lastSelectedDate) this.timepicker._handleDate(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) {
+                if (lastSelectedDate) {
-                    this.lastSelectedDate.setHours(this.timepicker.hours);
+                    lastSelectedDate.setHours(this.timepicker.hours);
-                    this.lastSelectedDate.setMinutes(this.timepicker.minutes);
+                    lastSelectedDate.setMinutes(this.timepicker.minutes);
+                    lastSelectedDate.setSeconds(this.timepicker.seconds);
                 }
             }
 
@@ -780,12 +819,20 @@
         },
 
         show: function () {
+            var onShow = this.opts.onShow;
+
             this.setPosition(this.opts.position);
             this.$datepicker.addClass('active');
             this.visible = true;
+
+            if (onShow) {
+                this._bindVisionEvents(onShow)
+            }
         },
 
         hide: function () {
+            var onHide = this.opts.onHide;
+
             this.$datepicker
                 .removeClass('active')
                 .css({
@@ -798,6 +845,10 @@
             this.inFocus = false;
             this.visible = false;
             this.$el.blur();
+
+            if (onHide) {
+                this._bindVisionEvents(onHide)
+            }
         },
 
         down: function (date) {
@@ -808,6 +859,12 @@
             this._changeView(date, 'up');
         },
 
+        _bindVisionEvents: function (event) {
+            this.$datepicker.off('transitionend.dp');
+            event(this, false);
+            this.$datepicker.one('transitionend.dp', event.bind(this, this, true))
+        },
+
         _changeView: function (date, dir) {
             date = date || this.focused || this.date;
 
@@ -1021,7 +1078,7 @@
             }
             $cell = this.views[this.currentView].$el.find(selector);
 
-            return $cell.length ? $cell : '';
+            return $cell.length ? $cell : $('');
         },
 
         destroy: function () {
@@ -1044,6 +1101,30 @@
             }
         },
 
+        _handleAlreadySelectedDates: function (alreadySelected, selectedDate) {
+            if (this.opts.range) {
+                if (!this.opts.toggleSelected) {
+                    // Add possibility to select same date when range is true
+                    if (this.selectedDates.length != 2) {
+                        this._trigger('clickCell', selectedDate);
+                    }
+                } else {
+                    this.removeDate(selectedDate);
+                }
+            } else if (this.opts.toggleSelected){
+                this.removeDate(selectedDate);
+            }
+
+            // Change last selected date to be able to change time when clicking on this cell
+            if (!this.opts.toggleSelected) {
+                this.lastSelectedDate = alreadySelected;
+                if (this.opts.timepicker) {
+                    this.timepicker._setTime(alreadySelected);
+                    this.timepicker.update();
+                }
+            }
+        },
+
         _onShowEvent: function (e) {
             if (!this.visible) {
                 this.show();
@@ -1116,11 +1197,12 @@
                             if (this.timepicker) {
                                 this.focused.setHours(this.timepicker.hours);
                                 this.focused.setMinutes(this.timepicker.minutes);
+                                this.focused.setSeconds(this.timepicker.seconds);
                             }
                             this.selectDate(this.focused);
-                        } else if (alreadySelected && this.opts.toggleSelected){
+                            return;
-                            this.removeDate(this.focused);
                         }
+                        this._handleAlreadySelectedDates(alreadySelected, this.focused)
                     }
                 }
             }
@@ -1177,7 +1259,7 @@
             this.silent = false;
         },
 
-        _onTimeChange: function (e, h, m) {
+        _onTimeChange: function (e, h, m, s) {
             var date = new Date(),
                 selectedDates = this.selectedDates,
                 selected = false;
@@ -1189,6 +1271,7 @@
 
             date.setHours(h);
             date.setMinutes(m);
+            date.setSeconds(s);
 
             if (!selected && !this._getCell(date).hasClass('-disabled-')) {
                 this.selectDate(date);
@@ -1204,6 +1287,7 @@
             if (this.timepicker) {
                 date.setHours(this.timepicker.hours);
                 date.setMinutes(this.timepicker.minutes);
+                date.setSeconds(this.timepicker.seconds)
             }
             this.selectDate(date);
         },
@@ -1327,7 +1411,9 @@
             hours: date.getHours(),
             fullHours:  date.getHours() < 10 ? '0' + date.getHours() :  date.getHours() ,
             minutes: date.getMinutes(),
-            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes()
+            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes(),
+            seconds: date.getSeconds(),
+            fullSeconds:  date.getSeconds() < 10 ? '0' + date.getSeconds() :  date.getSeconds()
         }
     };
 
@@ -1374,6 +1460,16 @@
         return parseInt(num) < 10 ? '0' + num : num;
     };
 
+    /**
+     * Returns copy of date with hours and minutes equals to 0
+     * @param date {Date}
+     */
+    datepicker.resetTime = function (date) {
+        if (typeof date != 'object') return;
+        date = datepicker.getParsedDate(date);
+        return new Date(date.year, date.month, date.date)
+    };
+
     $.fn.datepicker = function ( options ) {
         return this.each(function () {
             if (!$.data(this, pluginName)) {

src/js/i18n/datepicker.cs.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['cs'] = {
+    days: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'],
+    daysShort: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
+    daysMin: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
+    months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
+    monthsShort: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čvn', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
+    today: 'Dnes',
+    clear: 'Vymazat',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/i18n/datepicker.es.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['es'] = {
+    days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
+    daysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
+    daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
+    months: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 'Julio','Augosto','Septiembre','Octubre','Noviembre','Diciembre'],
+    monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
+    today: 'Hoy',
+    clear: 'Limpiar',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii aa',
+    firstDay: 1
+};

src/js/i18n/datepicker.fi.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['fi'] = {
+    days: ['Sunnuntai', 'Maanantai', 'Tiistai', 'Keskiviikko', 'Torstai', 'Perjantai', 'Lauantai'],
+    daysShort: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
+    daysMin: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
+    months: ['Tammikuu','Helmikuu','Maaliskuu','Huhtikuu','Toukokuu','Kesäkuu', 'Heinäkuu','Elokuu','Syyskuu','Lokakuu','Marraskuu','Joulukuu'],
+    monthsShort: ['Tammi', 'Helmi', 'Maalis', 'Huhti', 'Touko', 'Kesä', 'Heinä', 'Elo', 'Syys', 'Loka', 'Marras', 'Joulu'],
+    today: 'Tänään',
+    clear: 'Tyhjennä',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/i18n/datepicker.fr.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['fr'] = {
+    days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
+    daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+    daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
+    months: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Decembre'],
+    monthsShort: ['Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
+    today: "Aujourd'hui",
+    clear: 'Effacer',
+    dateFormat: 'dd/mm/yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/i18n/datepicker.hu.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['hu'] = {
+    days: ['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'],
+    daysShort: ['Va', 'Hé', 'Ke', 'Sze', 'Cs', 'Pé', 'Szo'],
+    daysMin: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
+    months: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
+    monthsShort: ['Jan', 'Feb', 'Már', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szep', 'Okt', 'Nov', 'Dec'],
+    today: 'Ma',
+    clear: 'Törlés',
+    dateFormat: 'yyyy-mm-dd',
+    timeFormat: 'hh:ii aa',
+    firstDay: 1
+}; })(jQuery);

src/js/i18n/datepicker.pl.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['pl'] = {
+    days: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
+    daysShort: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob'],
+    daysMin: ['Nd', 'Pn', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
+    months: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
+    monthsShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
+    today: 'Dzisiaj',
+    clear: 'Wyczyść',
+    dateFormat: 'yyyy-mm-dd',
+    timeFormat: 'hh:ii:aa',
+    firstDay: 1
+};

src/js/i18n/datepicker.sk.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['sk'] = {
+    days: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
+    daysShort: ['Ned', 'Pon', 'Uto', 'Str', 'Štv', 'Pia', 'Sob'],
+    daysMin: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'],
+    months: ['Január','Február','Marec','Apríl','Máj','Jún', 'Júl','August','September','Október','November','December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
+    today: 'Dnes',
+    clear: 'Vymazať',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/navigation.js

@@ -30,7 +30,9 @@
         },
 
         _buildBaseHtml: function () {
+            if (!this.opts.onlyTimepicker) {
                 this._render();
+            }
             this._addButtonsIfNeed();
         },
 
@@ -87,10 +89,10 @@
 
             switch (this.d.view) {
                 case 'days':
-                    if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
+                    if (!this.d._isInRange(new Date(y, m-1, 1), 'month')) {
                         this._disableNav('prev')
                     }
-                    if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
+                    if (!this.d._isInRange(new Date(y, m+1, 1), 'month')) {
                         this._disableNav('next')
                     }
                     break;
@@ -103,10 +105,11 @@
                     }
                     break;
                 case 'years':
-                    if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
+                    var decade = dp.getDecade(this.d.date);
+                    if (!this.d._isInRange(new Date(decade[0] - 1, 0, 1), 'year')) {
                         this._disableNav('prev')
                     }
-                    if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
+                    if (!this.d._isInRange(new Date(decade[1] + 1, 0, 1), 'year')) {
                         this._disableNav('next')
                     }
                     break;

src/js/timepicker.js

@@ -1,9 +1,11 @@
 ;(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-hours">#{hourVisible}</span>' +
         '   <span class="datepicker--time-current-colon">:</span>' +
         '   <span class="datepicker--time-current-minutes">#{minValue}</span>' +
+        '   <span class="datepicker--time-current-colon">:</span>' +
+        '   <span class="datepicker--time-current-seconds">#{secValue}</span>' +
         '</div>' +
         '<div class="datepicker--time-sliders">' +
         '   <div class="datepicker--time-row">' +
@@ -12,6 +14,9 @@
         '   <div class="datepicker--time-row">' +
         '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
         '   </div>' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
+        '   </div>' +
         '</div>' +
         '</div>',
         datepicker = $.fn.datepicker,
@@ -47,27 +52,53 @@
             this._handleDate(date);
             this.hours = _date.hours < this.minHours ? this.minHours : _date.hours;
             this.minutes = _date.minutes < this.minMinutes ? this.minMinutes : _date.minutes;
+            this.seconds = _date.seconds < this.minSeconds ? this.minSeconds : _date.seconds;
         },
 
+        /**
+         * Sets minHours and minMinutes from date (usually it's a minDate)
+         * Also changes minMinutes if current hours are bigger then @date hours
+         * @param date {Date}
+         * @private
+         */
         _setMinTimeFromDate: function (date) {
             this.minHours = date.getHours();
             this.minMinutes = date.getMinutes();
+            this.minSeconds = date.getSeconds();
+
+            // If, for example, min hours are 10, and current hours are 12,
+            // update minMinutes to default value, to be able to choose whole range of values
+            if (this.d.lastSelectedDate) {
+                if (this.d.lastSelectedDate.getHours() > date.getHours()) {
+                    this.minMinutes = this.opts.minMinutes;
+                }
+            }
         },
 
         _setMaxTimeFromDate: function (date) {
             this.maxHours = date.getHours();
             this.maxMinutes = date.getMinutes();
+            this.maxSeconds = date.getSeconds();
+
+            if (this.d.lastSelectedDate) {
+                if (this.d.lastSelectedDate.getHours() < date.getHours()) {
+                    this.maxMinutes = this.opts.maxMinutes;
+                }
+            }
         },
 
         _setDefaultMinMaxTime: function () {
             var maxHours = 23,
                 maxMinutes = 59,
+                maxSeconds = 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;
+            this.minSeconds = opts.minSeconds < 0 || opts.minSeconds > maxSeconds ? 0 : opts.minSeconds;
+            this.maxSeconds = opts.maxSeconds < 0 || opts.maxSeconds > maxSeconds ? maxSeconds : opts.maxSeconds;
         },
 
         /**
@@ -87,6 +118,12 @@
             } else if (this.minutes > this.maxMinutes) {
                 this.minutes = this.maxMinutes;
             }
+
+            if (this.seconds < this.minSeconds) {
+                this.seconds = this.minSeconds;
+            } else if (this.seconds > this.maxSeconds) {
+                this.seconds = this.maxSeconds;
+            }
         },
 
         _buildHTML: function () {
@@ -95,11 +132,16 @@
                     hourMin: this.minHours,
                     hourMax: lz(this.maxHours),
                     hourStep: this.opts.hoursStep,
-                    hourValue: lz(this.displayHours),
+                    hourValue: this.hours,
+                    hourVisible: lz(this.displayHours),
                     minMin: this.minMinutes,
                     minMax: lz(this.maxMinutes),
                     minStep: this.opts.minutesStep,
-                    minValue: lz(this.minutes)
+                    minValue: lz(this.minutes),
+                    secMin: this.minSeconds,
+                    secMax: lz(this.maxSeconds),
+                    secStep: this.opts.secondsStep,
+                    secValue: lz(this.seconds)
                 },
                 _template = dp.template(template, data);
 
@@ -107,8 +149,10 @@
             this.$ranges = $('[type="range"]', this.$timepicker);
             this.$hours = $('[name="hours"]', this.$timepicker);
             this.$minutes = $('[name="minutes"]', this.$timepicker);
+            this.$seconds = $('[name="seconds"]', this.$timepicker);
             this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
             this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
+            this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);
 
             if (this.d.ampm) {
                 this.$ampm = $('<span class="datepicker--time-current-ampm">')
@@ -121,10 +165,12 @@
 
         _updateCurrentTime: function () {
             var h =  dp.getLeadingZeroNum(this.displayHours),
-                m = dp.getLeadingZeroNum(this.minutes);
+                m = dp.getLeadingZeroNum(this.minutes),
+                s = dp.getLeadingZeroNum(this.seconds);
 
             this.$hoursText.html(h);
             this.$minutesText.html(m);
+            this.$secondsText.html(s);
 
             if (this.d.ampm) {
                 this.$ampm.html(this.dayPeriod);
@@ -140,7 +186,12 @@
             this.$minutes.attr({
                 min: this.minMinutes,
                 max: this.maxMinutes
-            }).val(this.minutes)
+            }).val(this.minutes);
+            
+            this.$seconds.attr({
+                min: this.minSeconds,
+                max: this.maxSeconds
+            }).val(this.seconds);
         },
 
         /**
@@ -151,7 +202,6 @@
          */
         _handleDate: function (date) {
             this._setDefaultMinMaxTime();
-
             if (date) {
                 if (dp.isSame(date, this.d.opts.minDate)) {
                     this._setMinTimeFromDate(this.d.opts.minDate);
@@ -171,10 +221,11 @@
         /**
          * Calculates valid hour value to display in text input and datepicker's body.
          * @param date {Date|Number} - date or hours
+         * @param [ampm] {Boolean} - 12 hours mode
          * @returns {{hours: *, dayPeriod: string}}
          * @private
          */
-        _getValidHoursFromDate: function (date) {
+        _getValidHoursFromDate: function (date, ampm) {
             var d = date,
                 hours = date;
 
@@ -183,10 +234,10 @@
                 hours = d.hours;
             }
 
-            var ampm = this.d.ampm,
+            var _ampm = ampm || this.d.ampm,
                 dayPeriod = 'am';
 
-            if (ampm) {
+            if (_ampm) {
                 switch(true) {
                     case hours == 0:
                         hours = 12;
@@ -233,7 +284,10 @@
 
             this[name] = $target.val();
             this._updateCurrentTime();
-            this.d._trigger('timeChange', [this.hours, this.minutes])
+            this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);
+
+            this._handleDate(this.d.lastSelectedDate);
+            this.update()
         },
 
         _onSelectDate: function (e, data) {

src/sass/_datepicker-config.scss

@@ -1,16 +1,16 @@
-$dayCellSize: 32px;
+$datepickerDayCellSize: 32px !default;
-$datepickerWidth: 250px;
+$datepickerWidth: 250px !default;
-$datepickerMinBodyHeight: 170px;
+$datepickerMinBodyHeight: 170px !default;
-$datepickerBorderRadius: 4px;
+$datepickerBorderRadius: 4px !default;
-$datepickerPadding: 4px;
+$datepickerPadding: 4px !default;
-$datepickerZIndex: 100;
+$datepickerZIndex: 100 !default;
 
-$fontFamily: Tahoma;
+$datepickerFontFamily: Tahoma !default;
-$fontSize: 14px;
+$datepickerFontSize: 14px !default;
 
-$yearsPerRow: 4;
+$datepickerYearsPerRow: 4 !default;
 
-$textColor: (
+$datepickerTextColor: (
   button: #5cc4ef,
   otherMonth: #dedede,
   otherMonthInRange: #ccc,
@@ -19,60 +19,60 @@ $textColor: (
   common: #4a4a4a,
   dayNames: #FF9A19,
   navArrows: #9c9c9c
-);
+) !default;
 
-$bg: (
+$datepickerBG: (
   selected: #5cc4ef,
   selectedHover: darken(#5cc4ef, 5),
   inRange: rgba(#5cc4ef, .1),
   hover: #f0f0f0
-);
+) !default;
 
-$borderColor: (
+$datepickerBorderColor: (
   nav: #efefef,
   inline: #d7d7d7,
   default: #dbdbdb
-);
+) !default;
 
-$navigationHeight: 32px;
+$datepickerNavigationHeight: 32px !default;
-$navigationButtonsOffset: 2px;
+$datepickerNavigationButtonsOffset: 2px !default;
 
-$pointerSize: 10px;
+$datepickerPointerSize: 10px !default;
-$pointerOffset: 10px;
+$datepickerPointerOffset: 10px !default;
 
 // Transitions
-$transitionSpeed: .3s;
+$datepickerTransitionSpeed: .3s !default;
-$transitionEase: ease;
+$datepickerTransitionEase: ease !default;
-$transitionOffset: 8px;
+$datepickerTransitionOffset: 8px !default;
 
 // Objects
 %otherMonth {
-  color: map_get($textColor, otherMonth);
+  color: map_get($datepickerTextColor, otherMonth);
 
   &:hover {
-    color: darken(map_get($textColor, otherMonth), 10);
+    color: darken(map_get($datepickerTextColor, otherMonth), 10);
   }
 
   &.-disabled- {
     &.-focus- {
-      color: map_get($textColor, otherMonth);
+      color: map_get($datepickerTextColor, otherMonth);
     }
   }
 
   &.-selected- {
     color: #fff;
-    background: lighten(map_get($bg, selected), 15);
+    background: lighten(map_get($datepickerBG, selected), 15);
     &.-focus- {
-      background: lighten(map_get($bg, selected), 10);
+      background: lighten(map_get($datepickerBG, selected), 10);
     }
   }
   
   &.-in-range- {
-    background-color: map_get($bg, inRange);
+    background-color: map_get($datepickerBG, inRange);
-    color: darken(map_get($textColor, otherMonth), 7);
+    color: darken(map_get($datepickerTextColor, otherMonth), 7);
 
     &.-focus- {
-      background-color: rgba(map_get($bg, inRange), .2);
+      background-color: rgba(map_get($datepickerBG, inRange), .2);
     }
   }
 

src/sass/cell.scss

@@ -17,62 +17,62 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  height: $dayCellSize;
+  height: $datepickerDayCellSize;
   z-index: 1;
 
   &.-focus- {
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
   }
 
   &.-current- {
-    color: map_get($textColor, currentDate);
+    color: map_get($datepickerTextColor, currentDate);
 
     &.-focus- {
-      color: map_get($textColor, common);
+      color: map_get($datepickerTextColor, common);
     }
 
     &.-in-range- {
-      color: map_get($textColor, currentDate);
+      color: map_get($datepickerTextColor, currentDate);
     }
   }
 
   &.-in-range- {
-    background: map_get($bg, inRange);
+    background: map_get($datepickerBG, inRange);
-    color: map_get($textColor, common);
+    color: map_get($datepickerTextColor, common);
     border-radius: 0;
 
     &.-focus- {
-      background-color: rgba(map_get($bg, inRange), .2);
+      background-color: rgba(map_get($datepickerBG, inRange), .2);
     }
   }
 
   &.-disabled- {
     cursor: default;
-    color: map_get($textColor, disabled);
+    color: map_get($datepickerTextColor, disabled);
 
     &.-focus- {
-      color: map_get($textColor, disabled);
+      color: map_get($datepickerTextColor, disabled);
     }
 
     &.-in-range- {
-      color: darken(map_get($textColor, disabled), 5);
+      color: darken(map_get($datepickerTextColor, disabled), 5);
     }
 
     &.-current- {
       &.-focus- {
-        color: map_get($textColor, disabled);
+        color: map_get($datepickerTextColor, disabled);
       }
     }
   }
 
   &.-range-from- {
-    border: 1px solid rgba(map_get($bg, selected), .5);
+    border: 1px solid rgba(map_get($datepickerBG, selected), .5);
-    background-color: map_get($bg, inRange);
+    background-color: map_get($datepickerBG, inRange);
     border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
   }
   &.-range-to- {
-    border: 1px solid rgba(map_get($bg, selected), .5);
+    border: 1px solid rgba(map_get($datepickerBG, selected), .5);
-    background-color: map_get($bg, inRange);
+    background-color: map_get($datepickerBG, inRange);
     border-radius:  0 $datepickerBorderRadius $datepickerBorderRadius 0;
   }
 
@@ -84,15 +84,15 @@
   &.-selected- {
     color: #fff;
     border: none;
-    background: map_get($bg, selected);
+    background: map_get($datepickerBG, selected);
 
     &.-current- {
       color: #fff;
-      background: map_get($bg, selected);
+      background: map_get($datepickerBG, selected);
     }
 
     &.-focus- {
-      background: map_get($bg, selectedHover);
+      background: map_get($datepickerBG, selectedHover);
     }
   }
 
@@ -111,7 +111,7 @@
 }
 
 .datepicker--day-name {
-  color: map_get($textColor, dayNames);
+  color: map_get($datepickerTextColor, dayNames);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -164,7 +164,7 @@
 // -------------------------
 
 .datepicker--cell-year {
-  width: 100% / $yearsPerRow;
+  width: 100% / $datepickerYearsPerRow;
   height: 33.33%;
 
   &.-other-decade- {

src/sass/datepicker.scss

@@ -16,44 +16,44 @@
 
 .datepicker {
   background: #fff;
-  border: 1px solid map_get($borderColor, default);
+  border: 1px solid map_get($datepickerBorderColor, default);
   box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
   border-radius: $datepickerBorderRadius;
   box-sizing: content-box;
-  font-family: $fontFamily, sans-serif;
+  font-family: $datepickerFontFamily, sans-serif;
-  font-size: $fontSize;
+  font-size: $datepickerFontSize;
-  color: map_get($textColor, common);
+  color: map_get($datepickerTextColor, common);
   width: $datepickerWidth;
   position: absolute;
   left: -100000px;
   opacity: 0;
-  transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s $transitionSpeed;
+  transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s $datepickerTransitionSpeed;
   z-index: $datepickerZIndex;
 
   &.-from-top- {
-    transform: translateY(-$transitionOffset);
+    transform: translateY(-$datepickerTransitionOffset);
   }
   &.-from-right- {
-    transform: translateX($transitionOffset);
+    transform: translateX($datepickerTransitionOffset);
   }
   &.-from-bottom- {
-    transform: translateY($transitionOffset);
+    transform: translateY($datepickerTransitionOffset);
   }
   &.-from-left- {
-    transform: translateX(-$transitionOffset);
+    transform: translateX(-$datepickerTransitionOffset);
   }
 
 
   &.active {
     opacity: 1;
     transform: translate(0);
-    transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s 0s;
+    transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s 0s;
   }
 }
 
 .datepicker-inline {
   .datepicker {
-    border-color: map-get($borderColor, inline);
+    border-color: map-get($datepickerBorderColor, inline);
     box-shadow: none;
     position: static;
     left: auto;
@@ -70,19 +70,23 @@
 .datepicker--content {
   box-sizing: content-box;
   padding: $datepickerPadding;
+
+  .-only-timepicker- & {
+    display: none;
+  }
 }
 
 //  Pointer
 // -------------------------------------------------
-$pointerHalfSize: $pointerSize / 2 - 1;
+$pointerHalfSize: $datepickerPointerSize / 2 - 1;
 
 .datepicker--pointer {
   position: absolute;
   background: #fff;
-  border-top: 1px solid map-get($borderColor, default);
+  border-top: 1px solid map-get($datepickerBorderColor, default);
-  border-right: 1px solid map-get($borderColor, default);
+  border-right: 1px solid map-get($datepickerBorderColor, default);
-  width: $pointerSize;
+  width: $datepickerPointerSize;
-  height: $pointerSize;
+  height: $datepickerPointerSize;
   z-index: -1;
 
   //  Main axis
@@ -112,23 +116,23 @@ $pointerHalfSize: $pointerSize / 2 - 1;
   // -------------------------
 
   .-top-left- &, .-bottom-left- & {
-    left: $pointerOffset;
+    left: $datepickerPointerOffset;
   }
   .-top-right- &, .-bottom-right- & {
-    right: $pointerOffset;
+    right: $datepickerPointerOffset;
   }
   .-top-center- &, .-bottom-center- & {
-    left: calc(50% - #{$pointerSize} / 2);
+    left: calc(50% - #{$datepickerPointerSize} / 2);
   }
 
   .-left-top- &, .-right-top- & {
-    top: $pointerOffset;
+    top: $datepickerPointerOffset;
   }
   .-left-bottom- &, .-right-bottom- & {
-    bottom: $pointerOffset;
+    bottom: $datepickerPointerOffset;
   }
   .-left-center- &, .-right-center- & {
-    top: calc(50% - #{$pointerSize} / 2);
+    top: calc(50% - #{$datepickerPointerSize} / 2);
   }
 
 }

src/sass/navigation.scss

@@ -7,9 +7,13 @@
 .datepicker--nav {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid map_get($borderColor, nav);
+  border-bottom: 1px solid map_get($datepickerBorderColor, nav);
-  min-height: $navigationHeight;
+  min-height: $datepickerNavigationHeight;
   padding: $datepickerPadding;
+
+  .-only-timepicker- & {
+    display: none;
+  }
 }
 
 .datepicker--nav-title,
@@ -21,12 +25,12 @@
 }
 
 .datepicker--nav-action {
-  width: $dayCellSize;
+  width: $datepickerDayCellSize;
   border-radius: $datepickerBorderRadius;
   user-select: none;
 
   &:hover {
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
   }
 
   &.-disabled- {
@@ -40,7 +44,7 @@
 
   path {
     fill: none;
-    stroke: map_get($textColor, navArrows);
+    stroke: map_get($datepickerTextColor, navArrows);
     stroke-width: 2px;
   }
 }
@@ -51,12 +55,12 @@
 
   i {
     font-style: normal;
-    color: map_get($textColor, navArrows);
+    color: map_get($datepickerTextColor, navArrows);
     margin-left: 5px;
   }
 
   &:hover {
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
   }
 
   &.-disabled- {
@@ -71,11 +75,11 @@
 .datepicker--buttons {
   display: flex;
   padding: $datepickerPadding;
-  border-top: 1px solid map_get($borderColor, nav);
+  border-top: 1px solid map_get($datepickerBorderColor, nav);
 }
 
 .datepicker--button {
-  color: map_get($textColor, currentDate);
+  color: map_get($datepickerTextColor, currentDate);
   cursor: pointer;
   border-radius: $datepickerBorderRadius;
   flex: 1;
@@ -85,7 +89,7 @@
   height: 32px;
 
   &:hover {
-    color: map_get($textColor, common);
+    color: map_get($datepickerTextColor, common);
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
   }
 }

src/sass/timepicker.scss

@@ -58,7 +58,7 @@ $rangeThumbBg: #dedede;
 }
 
 .datepicker--time {
-  border-top: 1px solid map_get($borderColor, nav);
+  border-top: 1px solid map_get($datepickerBorderColor, nav);
   display: flex;
   align-items: center;
 
@@ -71,6 +71,10 @@ $rangeThumbBg: #dedede;
       max-width: 138px;
     }
   }
+
+  .-only-timepicker- & {
+    border-top: none;
+  }
 }
 
 .datepicker--time-sliders {
@@ -90,7 +94,7 @@ $rangeThumbBg: #dedede;
   flex: 1;
   font-size: 14px;
   text-align: center;
-  margin: 0 0 0 10px;
+  margin: 0 10px;
 }
 
 .datepicker--time-current-colon {
@@ -99,16 +103,17 @@ $rangeThumbBg: #dedede;
 }
 
 .datepicker--time-current-hours,
-.datepicker--time-current-minutes {
+.datepicker--time-current-minutes,
+.datepicker--time-current-seconds {
   line-height: 1;
-  font-size: 19px;
+  font-size: 14px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
   position: relative;
   z-index: 1;
 
   &:after {
     content: '';
-    background: map_get($bg, hover);
+    background: map_get($datepickerBG, hover);
     border-radius: $datepickerBorderRadius;
     position: absolute;
     left: -2px;
@@ -128,8 +133,8 @@ $rangeThumbBg: #dedede;
 
 .datepicker--time-current-ampm {
   text-transform: uppercase;
-  align-self: flex-end;
+  align-self: flex-start;
-  color: map_get($textColor, navArrows);
+  color: map_get($datepickerTextColor, navArrows);
   margin-left: 6px;
   font-size: 11px;
   margin-bottom: 1px;
@@ -173,8 +178,8 @@ $rangeThumbBg: #dedede;
       outline: none;
 
       @include thumbSelector() {
-        background: map_get($bg, selected);
+        background: map_get($datepickerBG, selected);
-        border-color: map_get($bg, selected);
+        border-color: map_get($datepickerBG, selected);
       }
     }
 
@@ -214,7 +219,7 @@ $rangeThumbBg: #dedede;
 }
 
 .datepicker--time-icon {
-  color: map_get($textColor, navArrows);
+  color: map_get($datepickerTextColor, navArrows);
   border: 1px solid;
   border-radius: 50%;
   font-size: 16px;

tests/index.html

@@ -23,7 +23,7 @@
         <style type="text/css">
             /* Remove transitions to test position options*/
             .datepicker {
-                transition: none !important;
+                transition-duration: 0s !important;
             }
         </style>
     </head>

tests/specs/events.js

@@ -15,6 +15,7 @@ var assert = chai.assert,
     afterEach(function () {
         if (dp && destroy) {
             dp.destroy();
+            dp = '';
         }
 
         destroy = true;
@@ -79,6 +80,39 @@ var assert = chai.assert,
         })
     });
     
+    describe('onShow', function () {
+        it('should add callback when datepicker is showing', function () {
+            var test = '';
+            dp = $input.datepicker({
+                onShow: function (dp, completed) {
+                    if (!completed) {
+                        test = dp;
+                    }
+                }
+            }).data('datepicker');
+
+            dp.show();
+            expect(test).to.be.equal(dp);
+        })
+    });
+
+    describe('onHide', function () {
+        it('should add callback when datepicker is hiding (after transition completed)', function () {
+            var test = '';
+            dp = $input.datepicker({
+                onHide: function (dp, completed) {
+                    if (!completed) {
+                        test = dp;
+                    }
+                }
+            }).data('datepicker');
+
+            dp.show();
+            dp.hide();
+            expect(test).to.be.equal(dp);
+        });
+    });
+
     describe('onRenderCell', function () {
         it('should add callback when cell is rendered', function () {
             dp = $input.datepicker({

tests/specs/options.js

@@ -189,6 +189,36 @@ describe('Options', function () {
             dp.selectDate(date);
 
             assert.equal(dp.$altField.val(), '17-12-2015');
+        });
+        
+        it('should support 24 hour mode, even if main date format is in 12', function () {
+            var date = new Date(2015, 11, 17, 22, 47);
+
+            dp = $input.datepicker({
+                timepicker: true,
+                timeFormat: 'hh:ii aa',
+                altField: '.alt-field',
+                altFieldDateFormat: 'dd-mm-yyyy hh:ii'
+            }).data('datepicker');
+
+            dp.selectDate(date);
+
+            assert.equal(dp.$altField.val(), '17-12-2015 22:47');
+        });
+
+        it('should support 12 hour mode', function () {
+            var date = new Date(2015, 11, 17, 22, 47);
+
+            dp = $input.datepicker({
+                timepicker: true,
+                timeFormat: 'hh:ii',
+                altField: '.alt-field',
+                altFieldDateFormat: 'dd-mm-yyyy hh:ii aa'
+            }).data('datepicker');
+
+            dp.selectDate(date);
+
+            assert.equal(dp.$altField.val(), '17-12-2015 10:47 pm');
         })
     });
 
@@ -216,7 +246,7 @@ describe('Options', function () {
 
             expect(dp.selectedDates).to.have.length(1)
         })
-    })
+    });
 
     describe('keyboardNav', function () {
         var year = 2015,
@@ -826,6 +856,26 @@ describe('Options', function () {
         })
     });
 
+    describe('onlyTimepicker', function () {
+        it('only timepicker should be visible', function () {
+            dp = $input.datepicker({
+                timepicker: true,
+                onlyTimepicker: true
+            }).data('datepicker');
+
+            var $time = $('.datepicker--time', dp.$datepicker),
+                $cells = $('.datepicker--cells', dp.$datepicker),
+                $nav = $('.datepicker--nav-title', dp.$datepicker),
+                _class = dp.$datepicker.hasClass('-only-timepicker-');
+
+            expect($time).to.have.length(1);
+            expect($cells).to.have.length(0);
+            expect($nav).to.have.length(0);
+            expect(_class).to.be.equal(true);
+
+        })
+    });
+
     describe('dateTimeSeparator', function () {
         it('should define separator between date string and time', function () {
             var date = new Date(2016,2,9,11,24);

tests/specs/static-methods.js

@@ -5,7 +5,6 @@ var assert = chai.assert,
 describe('Datepicker', function () {
     describe('getDaysCount', function () {
         it('should return 31 days in December', function () {
-            console.log(plugin.getDaysCount);
             assert.equal(plugin.getDaysCount(new Date(2015, 11)), 31)
         });
         it('should return 30 days in September', function () {

visual-tests.html

@@ -3,8 +3,9 @@
     <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="node_modules/jquery/dist/jquery.min.js"></script>
         <script type="text/javascript" src="dist/js/datepicker.js"></script>
+        <script type="text/javascript" src="dist/js/i18n/datepicker.en.js"></script>
         <link rel="stylesheet" href="dist/css/datepicker.css"/>
         <link rel="stylesheet" href="docs/css/style.css"/>
         <script type="text/javascript">
@@ -31,7 +32,7 @@
                 <div class="row">
                     <div class="vt-tile">
                         <h2>Default</h2>
-                        <div class="datepicker-here"></div>
+                        <div class="datepicker-here" data-language="en"></div>
                     </div>
                 </div>
             </article>
@@ -41,11 +42,11 @@
                 <div class="row">
                     <div class="vt-tile">
                         <h2>{range: true}</h2>
-                        <div class="datepicker-here" data-range="true"></div>
+                        <div class="datepicker-here" data-language="en" 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>
+                        <div class="datepicker-here" data-language="en" id="dp-3" data-range="true"></div>
                         <script type="text/javascript">
                             $('#dp-3').datepicker({
                                 onSelect: function (fd) {
@@ -56,7 +57,7 @@
                     </div>
                     <div class="vt-tile">
                         <h2>{range: true, onSelect: ...}</h2>
-                        <input class="datepicker-here" id="dp-4" data-range="true"/>
+                        <input class="datepicker-here" data-language="en" id="dp-4" data-range="true"/>
                         <script type="text/javascript">
                             $('#dp-4').datepicker({
                                 onSelect: function (fd) {
@@ -73,17 +74,29 @@
                 <div class="row">
                     <div class="vt-tile">
                         <h2>{timepicker: true}</h2>
-                        <div class="datepicker-here" data-timepicker="true"></div>
+                        <div id="test" class="datepicker-here" data-language="en" data-timepicker="true"></div>
+                        <script type="text/javascript">
+                            $('#test').datepicker({
+                                toggleSelected: false,
+                                inline: true,
+                                timeFormat: 'hh:ii:ss',
+                                onSelect: function (fd) {
+                                    console.log(arguments)
+                                    log(fd)
+                                }
+                            })
+                        </script>
                     </div>
                     <div class="vt-tile">
                         <h2>{onChange: ..., toggleSelected: false, range: true}</h2>
-                        <input id="dp-5" class="datepicker-here" data-timepicker="true" />
+                        <input id="dp-5" class="datepicker-here" data-language="en" data-timepicker="true" />
                         <script type="text/javascript">
                             $('#dp-5').datepicker({
                                 toggleSelected: false,
                                 inline: true,
                                 range: true,
                                 onSelect: function (fd) {
+                                    console.log(arguments)
                                     log(fd)
                                 }
                             })
@@ -91,7 +104,18 @@
                     </div>
                     <div class="vt-tile">
                         <h2>{timepicker: true}</h2>
-                        <input class="datepicker-here" data-timepicker="true" />
+                        <input class="datepicker-here" data-language="en" data-timepicker="true" />
+                    </div>
+                    <div class="vt-tile">
+                        <h2>{timepicker: true, minDate: new Date()}</h2>
+                        <input class="datepicker-here" data-language="en" id="dp-6"/>
+                        <script type="text/javascript">
+                            $('#dp-6').datepicker({
+                                minDate: new Date(),
+                                inline: true,
+                                timepicker: true
+                            })
+                        </script>
                     </div>
                 </div>
             </article>