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,8 +1,8 @@
 # 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.png)
+![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img-time.png)
 
 ## Install
 
@@ -26,6 +26,47 @@ $('.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
+
+### v2.0.1
+* fixed version for npm
+
 ### v2.0.0
 * added timepicker (see [docs](http://t1m0n.name/air-datepicker/docs#timepicker) for more info)
 * added possibility to set `Date` in `todayButton` 

bower.json

@@ -1,13 +1,13 @@
 {
   "name": "air-datepicker",
-  "version": "2.0.0",
+  "version": "2.2.3",
   "authors": [
     "t1m0n <t1m0n.tr@gmail.com>"
   ],
   "description": "A lightweight, customizable, powerful jQuery datepicker",
   "main": [
-    "dist/js/datepicker.min.js",
-    "dist/css/datepicker.min.css"
+    "dist/js/datepicker.js",
+    "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,31 +18,46 @@
     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; }
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap; }
 
 .datepicker--cell {
   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;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
   height: 32px;
   z-index: 1; }
   .datepicker--cell.-focus- {
@@ -91,28 +106,22 @@
     cursor: default; }
 
 .datepicker--days-names {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          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;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex: 1;
+      flex: 1;
   text-align: center;
   text-transform: uppercase;
   font-size: .8em; }
@@ -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); }
+    transform: translateY(-8px); }
   .datepicker.-from-right- {
-    -webkit-transform: translateX(8px);
-            transform: translateX(8px); }
+    transform: translateX(8px); }
   .datepicker.-from-bottom- {
-    -webkit-transform: translateY(8px);
-            transform: translateY(8px); }
+    transform: translateY(8px); }
   .datepicker.-from-left- {
-    -webkit-transform: translateX(-8px);
-            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, -webkit-transform 0.3s ease; }
+    transform: translate(0);
+    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; }
 
 .datepicker-inline .datepicker {
   border-color: #d7d7d7;
@@ -212,8 +212,7 @@
   left: auto;
   right: auto;
   opacity: 1;
-  -webkit-transform: none;
-          transform: none; }
+  transform: none; }
 
 .datepicker-inline .datepicker--pointer {
   display: none; }
@@ -221,6 +220,8 @@
 .datepicker--content {
   box-sizing: content-box;
   padding: 4px; }
+  .-only-timepicker- .datepicker--content {
+    display: none; }
 
 .datepicker--pointer {
   position: absolute;
@@ -232,20 +233,16 @@
   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); }
+    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); }
+    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); }
+    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); }
+    transform: rotate(45deg); }
   .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
     left: 10px; }
   .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
@@ -288,28 +285,25 @@
     Navigation
    ------------------------------------------------- */
 .datepicker--nav {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          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; }
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center; }
 
 .datepicker--nav-action {
   width: 32px;
@@ -344,7 +338,6 @@
     background: none; }
 
 .datepicker--buttons {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   padding: 4px;
@@ -354,18 +347,14 @@
   color: #4EB5E6;
   cursor: pointer;
   border-radius: 4px;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  display: -webkit-inline-flex;
+  -ms-flex: 1;
+      flex: 1;
   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;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
   height: 32px; }
   .datepicker--button:hover {
     color: #4a4a4a;
@@ -396,24 +385,22 @@
    ------------------------------------------------- */
 .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;
+  -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;
+    -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;
+  -ms-flex: 0 1 153px;
+      flex: 0 1 153px;
   margin-right: 10px;
   max-width: 153px; }
 
@@ -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;
+  -ms-flex-align: center;
+      align-items: center;
+  -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,26 +445,24 @@
     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: end;
-          align-self: flex-end;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
   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;
+  -ms-flex-align: center;
+      align-items: center;
   font-size: 11px;
   height: 17px;
   background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
@@ -487,9 +471,8 @@
   .datepicker--time-row input[type='range'] {
     background: none;
     cursor: pointer;
-    -webkit-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    -ms-flex: 1;
+        flex: 1;
     height: 100%;
     padding: 0;
     margin: 0;
@@ -587,30 +570,9 @@
     width: 1px;
     left: calc(50% - 1px);
     top: calc(50% + 1px);
-    -webkit-transform: translateY(-100%);
-            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) {
@@ -301,15 +318,15 @@
                 dates = selectedDates.map(function(date) {
                     var parsedDate = datepicker.getParsedDate(date);
                     return new Date(
-                        parsedSelected.year,
-                        parsedSelected.month,
-                        parsedSelected.date,
-                        parsedSelected.hours,
-                        parsedSelected.minutes
+                        parsedDate.year,
+                        parsedDate.month,
+                        parsedDate.date,
+                        parsedDate.hours,
+                        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) {
-                validHours = this.timepicker._getValidHoursFromDate(date);
+            if (this.opts.timepicker && this.timepicker && ampm) {
+                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) {
-            return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
+        _replacer: function (str, reg, data) {
+            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) {
-                    this.lastSelectedDate.setHours(this.timepicker.hours);
-                    this.lastSelectedDate.setMinutes(this.timepicker.minutes);
+                if (lastSelectedDate) {
+                    lastSelectedDate.setHours(this.timepicker.hours);
+                    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){
-                            this.removeDate(this.focused);
+                            return;
                         }
+                        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(parent.maxRange, date, type)) classes += ' -range-to-';
+                if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
+                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.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
+                        (dp.bigger(minRange, date) && dp.less(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) {
-                this.d.down(new Date(year, month, date));
+            if (dp.view != this.opts.minView) {
+                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);
-            } else if (alreadySelected && this.opts.toggleSelected){
-                this.d.removeDate(selectedDate);
-            } else if (alreadySelected && !this.opts.toggleSelected) {
-                this.d.lastSelectedDate = alreadySelected;
-                if (this.d.opts.timepicker) {
-                    this.d.timepicker._setTime(alreadySelected);
-                    this.d.timepicker.update();
-                }
+                dp._trigger('clickCell', selectedDate);
+                return;
             }
 
+            dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
+
         },
 
         _onClickCell: function (e) {
@@ -1759,7 +1851,9 @@
         },
 
         _buildBaseHtml: function () {
-            this._render();
+            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.en.js

@@ -1,5 +1,4 @@
-;(function ($) { 
-    $.fn.datepicker.language['en'] = {
+;(function ($) { $.fn.datepicker.language['en'] = {
     days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
@@ -10,5 +9,4 @@
     dateFormat: 'mm/dd/yyyy',
     timeFormat: 'hh:ii aa',
     firstDay: 0
-};
-})(jQuery);
+}; })(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/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/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;
@@ -506,4 +513,57 @@ a {
   span {
     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);
+  }
 }

gulpfile.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "air-datepicker",
-  "version": "2.0.0",
+  "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(parent.maxRange, date, type)) classes += ' -range-to-';
+                if (dp.isSame(minRange, date, type)) classes += ' -range-from-';
+                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.less(parent.maxRange, date) && dp.bigger(parent.focused, date)))
+                        (dp.bigger(minRange, date) && dp.less(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) {
-                this.d.down(new Date(year, month, date));
+            if (dp.view != this.opts.minView) {
+                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);
-            } else if (alreadySelected && this.opts.toggleSelected){
-                this.d.removeDate(selectedDate);
-            } else if (alreadySelected && !this.opts.toggleSelected) {
-                this.d.lastSelectedDate = alreadySelected;
-                if (this.d.opts.timepicker) {
-                    this.d.timepicker._setTime(alreadySelected);
-                    this.d.timepicker.update();
-                }
+                dp._trigger('clickCell', selectedDate);
+                return;
             }
 
+            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) {
@@ -301,15 +318,15 @@
                 dates = selectedDates.map(function(date) {
                     var parsedDate = datepicker.getParsedDate(date);
                     return new Date(
-                        parsedSelected.year,
-                        parsedSelected.month,
-                        parsedSelected.date,
-                        parsedSelected.hours,
-                        parsedSelected.minutes
+                        parsedDate.year,
+                        parsedDate.month,
+                        parsedDate.date,
+                        parsedDate.hours,
+                        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) {
-                validHours = this.timepicker._getValidHoursFromDate(date);
+            if (this.opts.timepicker && this.timepicker && ampm) {
+                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) {
-            return new RegExp('\\b(?=[a-zA-Z0-9äöüßÄÖÜ<])' + sign + '(?![>a-zA-Z0-9äöüßÄÖÜ])');
+        _replacer: function (str, reg, data) {
+            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) {
-                    this.lastSelectedDate.setHours(this.timepicker.hours);
-                    this.lastSelectedDate.setMinutes(this.timepicker.minutes);
+                if (lastSelectedDate) {
+                    lastSelectedDate.setHours(this.timepicker.hours);
+                    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){
-                            this.removeDate(this.focused);
+                            return;
                         }
+                        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 () {
-            this._render();
+            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;
-$datepickerWidth: 250px;
-$datepickerMinBodyHeight: 170px;
-$datepickerBorderRadius: 4px;
-$datepickerPadding: 4px;
-$datepickerZIndex: 100;
+$datepickerDayCellSize: 32px !default;
+$datepickerWidth: 250px !default;
+$datepickerMinBodyHeight: 170px !default;
+$datepickerBorderRadius: 4px !default;
+$datepickerPadding: 4px !default;
+$datepickerZIndex: 100 !default;
 
-$fontFamily: Tahoma;
-$fontSize: 14px;
+$datepickerFontFamily: Tahoma !default;
+$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;
-$navigationButtonsOffset: 2px;
+$datepickerNavigationHeight: 32px !default;
+$datepickerNavigationButtonsOffset: 2px !default;
 
-$pointerSize: 10px;
-$pointerOffset: 10px;
+$datepickerPointerSize: 10px !default;
+$datepickerPointerOffset: 10px !default;
 
 // Transitions
-$transitionSpeed: .3s;
-$transitionEase: ease;
-$transitionOffset: 8px;
+$datepickerTransitionSpeed: .3s !default;
+$datepickerTransitionEase: ease !default;
+$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);
-    color: darken(map_get($textColor, otherMonth), 7);
+    background-color: map_get($datepickerBG, inRange);
+    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);
-    color: map_get($textColor, common);
+    background: map_get($datepickerBG, inRange);
+    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);
-    background-color: map_get($bg, inRange);
+    border: 1px solid rgba(map_get($datepickerBG, selected), .5);
+    background-color: map_get($datepickerBG, inRange);
     border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
   }
   &.-range-to- {
-    border: 1px solid rgba(map_get($bg, selected), .5);
-    background-color: map_get($bg, inRange);
+    border: 1px solid rgba(map_get($datepickerBG, selected), .5);
+    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-size: $fontSize;
-  color: map_get($textColor, common);
+  font-family: $datepickerFontFamily, sans-serif;
+  font-size: $datepickerFontSize;
+  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-right: 1px solid map-get($borderColor, default);
-  width: $pointerSize;
-  height: $pointerSize;
+  border-top: 1px solid map-get($datepickerBorderColor, default);
+  border-right: 1px solid map-get($datepickerBorderColor, default);
+  width: $datepickerPointerSize;
+  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);
-  min-height: $navigationHeight;
+  border-bottom: 1px solid map_get($datepickerBorderColor, nav);
+  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);
-    background: map_get($bg, hover);
+    color: map_get($datepickerTextColor, common);
+    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;
-  color: map_get($textColor, navArrows);
+  align-self: flex-start;
+  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);
-        border-color: map_get($bg, selected);
+        background: map_get($datepickerBG, 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;
@@ -78,6 +79,39 @@ var assert = chai.assert,
             expect(dates).to.have.length(2)
         })
     });
+    
+    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 () {

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>