Merge pull request #1 from gbm001/fix_seconds

fix: Fix display of seconds between 0 and 9.

.npmignore

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

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,12 +1,19 @@
 # Air Datepicker
 
-Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern browsers.
-![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img.png)
+Lightweight customizable cross-browser jQuery datepicker, built with es5 and css-flexbox. Works in all modern desktop and mobile browsers (tested on Android 4.4+ and iOS8+).
+
+![air datepicker image](https://github.com/t1m0n/air-datepicker/raw/master/docs/img/promo-img-time.png)
 
 ## Install
+
+### bower
 ```
 bower i --save air-datepicker
 ```
+### npm
+```
+npm i --save air-datepicker
+```
 
 ## Usage
 ```javascript
@@ -19,6 +26,81 @@ $('.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` 
+* global variable `Datepicker` has been removed, now all placed in `$.fn.datepicker`
+* improved `selectDate` method, now one can pass an array of dates to select
+* added `npm` package
+* fixed issue caused by `placeholder` on `readonly` inputs in IE
+* fixed issue when `range` is true and first selected date is bigger than second
+* added new languages:
+    - `da`  thanks to [bjarnef](https://github.com/bjarnef)
+    - `nl`  thanks to [JaZo](https://github.com/JaZo)
+    - `pt`  thanks to [cmpscabral](https://github.com/cmpscabral)
+    - `pt-BR`  thanks to [dowglaz](https://github.com/dowglaz)
+    - `ro`  thanks to [tourniquet](https://github.com/tourniquet)
+
+### v1.2.4
+* fixed '$ is not defined' problem. 
+
+### v1.2.3
+* fixed `dateFormat` method.
+* fixed typo in Russian docs, add ids in docs headers.
+
+### v1.2.2
+* fixed typo in `monthsField`
+* added German language (thanks to [Ichag](https://github.com/Ichag))
+
+### v1.2.1
+* tests added
+* added Chinese language (thanks to [think2011](https://github.com/think2011))
+* fixed if '0' is passed to `firstDay`
+* fixed `showOtherYears` option
+* fixed `onSelect` event, when `range` is true
+* fixed case when `range` and `multipleDates` both set to true
+
 ### v1.2.0
 * add `range` feature
 * improve keyboard navigation (fixed two focused cells)

bower.json

@@ -1,18 +1,20 @@
 {
   "name": "air-datepicker",
-  "version": "1.0.0",
+  "version": "2.2.3",
   "authors": [
     "t1m0n <t1m0n.tr@gmail.com>"
   ],
-  "description": "A lightweight jQuery datepicker",
+  "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",
-    "calendar",
-    "lightweight"
+    "timepicker",
+    "plugin",
+    "customizable",
+    "powerful"
   ],
   "license": "MIT",
   "ignore": [
@@ -28,6 +30,6 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "~2.1.4"
+    "jquery": ">=2.0.0 <4.0.0"
   }
 }

dist/css/datepicker.css

@@ -18,30 +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- {
@@ -55,8 +71,6 @@
   .datepicker--cell.-in-range- {
     background: rgba(92, 196, 239, 0.1);
     color: #4a4a4a;
-    padding: 0;
-    background-clip: content-box;
     border-radius: 0; }
     .datepicker--cell.-in-range-.-focus- {
       background-color: rgba(92, 196, 239, 0.2); }
@@ -88,30 +102,26 @@
       background: #5cc4ef; }
     .datepicker--cell.-selected-.-focus- {
       background: #45bced; }
+  .datepicker--cell:empty {
+    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; }
@@ -163,6 +173,9 @@
   position: absolute;
   left: 0;
   top: 0; }
+  @media print {
+    .datepickers-container {
+      display: none; } }
 
 .datepicker {
   background: #fff;
@@ -177,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;
@@ -208,8 +212,7 @@
   left: auto;
   right: auto;
   opacity: 1;
-  -webkit-transform: none;
-          transform: none; }
+  transform: none; }
 
 .datepicker-inline .datepicker--pointer {
   display: none; }
@@ -217,6 +220,8 @@
 .datepicker--content {
   box-sizing: content-box;
   padding: 4px; }
+  .-only-timepicker- .datepicker--content {
+    display: none; }
 
 .datepicker--pointer {
   position: absolute;
@@ -228,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 {
@@ -284,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;
@@ -340,7 +338,6 @@
     background: none; }
 
 .datepicker--buttons {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   padding: 4px;
@@ -350,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;
@@ -386,3 +379,200 @@
   .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
     background: none;
     border: none; }
+
+/* -------------------------------------------------
+    Timepicker
+   ------------------------------------------------- */
+.datepicker--time {
+  border-top: 1px solid #efefef;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 4px;
+  position: relative; }
+  .datepicker--time.-am-pm- .datepicker--time-sliders {
+    -ms-flex: 0 1 138px;
+        flex: 0 1 138px;
+    max-width: 138px; }
+  .-only-timepicker- .datepicker--time {
+    border-top: none; }
+
+.datepicker--time-sliders {
+  -ms-flex: 0 1 153px;
+      flex: 0 1 153px;
+  margin-right: 10px;
+  max-width: 153px; }
+
+.datepicker--time-label {
+  display: none;
+  font-size: 12px; }
+
+.datepicker--time-current {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex: 1;
+      flex: 1;
+  font-size: 14px;
+  text-align: center;
+  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-seconds {
+  line-height: 1;
+  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-seconds:after {
+    content: '';
+    background: #f0f0f0;
+    border-radius: 4px;
+    position: absolute;
+    left: -2px;
+    top: -3px;
+    right: -2px;
+    bottom: -2px;
+    z-index: -1;
+    opacity: 0; }
+  .datepicker--time-current-hours.-focus-:after,
+  .datepicker--time-current-minutes.-focus-:after,
+  .datepicker--time-current-seconds.-focus-:after {
+    opacity: 1; }
+
+.datepicker--time-current-ampm {
+  text-transform: uppercase;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  color: #9c9c9c;
+  margin-left: 6px;
+  font-size: 11px;
+  margin-bottom: 1px; }
+
+.datepicker--time-row {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  font-size: 11px;
+  height: 17px;
+  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
+  .datepicker--time-row:first-child {
+    margin-bottom: 4px; }
+  .datepicker--time-row input[type='range'] {
+    background: none;
+    cursor: pointer;
+    -ms-flex: 1;
+        flex: 1;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none; }
+    .datepicker--time-row input[type='range']::-ms-tooltip {
+      display: none; }
+    .datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
+      border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:hover::-moz-range-thumb {
+      border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:hover::-ms-thumb {
+      border-color: #b8b8b8; }
+    .datepicker--time-row input[type='range']:focus {
+      outline: none; }
+      .datepicker--time-row input[type='range']:focus::-webkit-slider-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
+      .datepicker--time-row input[type='range']:focus::-moz-range-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
+      .datepicker--time-row input[type='range']:focus::-ms-thumb {
+        background: #5cc4ef;
+        border-color: #5cc4ef; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s; }
+    .datepicker--time-row input[type='range']::-moz-range-thumb {
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s; }
+    .datepicker--time-row input[type='range']::-ms-thumb {
+      box-sizing: border-box;
+      height: 12px;
+      width: 12px;
+      border-radius: 3px;
+      border: 1px solid #dedede;
+      background: #fff;
+      cursor: pointer;
+      transition: background .2s; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      margin-top: -6px; }
+    .datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
+      border: none;
+      height: 1px;
+      cursor: pointer;
+      color: transparent;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-moz-range-track {
+      border: none;
+      height: 1px;
+      cursor: pointer;
+      color: transparent;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-track {
+      border: none;
+      height: 1px;
+      cursor: pointer;
+      color: transparent;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-fill-lower {
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-fill-upper {
+      background: transparent; }
+  .datepicker--time-row span {
+    padding: 0 12px; }
+
+.datepicker--time-icon {
+  color: #9c9c9c;
+  border: 1px solid;
+  border-radius: 50%;
+  font-size: 16px;
+  position: relative;
+  margin: 0 5px -1px 0;
+  width: 1em;
+  height: 1em; }
+  .datepicker--time-icon:after, .datepicker--time-icon:before {
+    content: '';
+    background: currentColor;
+    position: absolute; }
+  .datepicker--time-icon:after {
+    height: .4em;
+    width: 1px;
+    left: calc(50% - 1px);
+    top: calc(50% + 1px);
+    transform: translateY(-100%); }
+  .datepicker--time-icon:before {
+    width: .4em;
+    height: 1px;
+    top: calc(50% + 1px);
+    left: calc(50% - 1px); }

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.da.js

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

dist/js/i18n/datepicker.de.js

@@ -0,0 +1,13 @@
+;(function ($) { $.fn.datepicker.language['de'] = {
+    days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
+    daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    months: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'],
+    monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    today: 'Heute',
+    clear: 'Aufräumen',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};
+ })(jQuery);

dist/js/i18n/datepicker.en.js

@@ -1,4 +1,4 @@
-Datepicker.language['en'] = {
+;(function ($) { $.fn.datepicker.language['en'] = {
     days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
@@ -6,6 +6,7 @@ Datepicker.language['en'] = {
     monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     today: 'Today',
     clear: 'Clear',
-    dateFormat: 'mm/dd/yy',
+    dateFormat: 'mm/dd/yyyy',
+    timeFormat: 'hh:ii aa',
     firstDay: 0
-};
+}; })(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.nl.js

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

dist/js/i18n/datepicker.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.pt-BR.js

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

dist/js/i18n/datepicker.pt.js

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

dist/js/i18n/datepicker.ro.js

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

dist/js/i18n/datepicker.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);

dist/js/i18n/datepicker.zh.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['zh'] = {
+    days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    daysShort: ['日', '一', '二', '三', '四', '五', '六'],
+    daysMin: ['日', '一', '二', '三', '四', '五', '六'],
+    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    today: '今天',
+    clear: '清除',
+    dateFormat: 'yyyy-mm-dd',
+    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/jade/mixins/param-header.jade

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

docs/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/js/navigation.js

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

docs/sass/_docs.scss

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

@@ -8,14 +8,7 @@ gulp.task('i18n', require('./tasks/i18n'));
 gulp.task('cssPage', require('./tasks/cssPage'));
 gulp.task('jade-ru', require('./tasks/jade').ru);
 gulp.task('jade-en', require('./tasks/jade').en);
-
-var gzip = require('gulp-gzip');
-gulp.task('gzip', function (cb) {
-    gulp.src('dist/js/datepicker.min.js')
-        .pipe(gzip())
-        .pipe(gulp.dest('dist/'))
-});
-
+gulp.task('gzip', require('./tasks/gzip'));
 
 gulp.task('watch', function () {
     livereload.listen();
@@ -37,6 +30,9 @@ gulp.task('watch', function () {
     });
 });
 
+gulp.task('dev', ['css','js','i18n', 'cssPage', 'jade-ru', 'jade-en', 'watch']);
+gulp.task('build', ['css','js','i18n', 'jade-ru', 'jade-en']);
+
 
 
 

package.json

@@ -1,11 +1,14 @@
 {
-  "name": "datepicker",
-  "version": "0.0.1",
+  "name": "air-datepicker",
+  "version": "2.2.3",
   "devDependencies": {
     "autoprefixer": "^6.1.0",
+    "browserify": "^13.0.0",
+    "chai": "^3.4.1",
     "gulp": "^3.9.0",
     "gulp-clone": "^1.0.0",
     "gulp-concat": "^2.6.0",
+    "gulp-gzip": "^1.2.0",
     "gulp-jade": "^1.1.0",
     "gulp-livereload": "^3.8.0",
     "gulp-minify-css": "^1.2.1",
@@ -15,6 +18,36 @@
     "gulp-sass": "^2.0.4",
     "gulp-uglify": "^1.2.0",
     "gulp-watch": "^4.3.5",
-    "jade": "^1.11.0"
-  }
+    "gulp-wrap": "^0.11.0",
+    "jade": "^1.11.0",
+    "mocha": "^2.3.4",
+    "node-static": "^0.7.7",
+    "vinyl-source-stream": "^1.1.0"
+  },
+  "dependencies": {
+    "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",
+  "directories": {
+    "doc": "docs",
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t1m0n/air-datepicker.git"
+  },
+  "keywords": [
+    "datepicker",
+    "timepicker",
+    "plugin",
+    "customizable",
+    "powerful"
+  ],
+  "author": "t1m0n <t1m0n.tr@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/t1m0n/air-datepicker/issues"
+  },
+  "homepage": "http://t1m0n.name/air-datepicker/docs/"
 }

src/js/air-datepicker.js

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

src/js/body.js

@@ -14,17 +14,20 @@
         '<div class="datepicker--cells datepicker--cells-years"></div>' +
         '</div>'
         },
-        D = Datepicker;
+        datepicker = $.fn.datepicker,
+        dp = datepicker.Constructor;
 
-    D.Body = function (d, type, opts) {
+    datepicker.Body = function (d, type, opts) {
         this.d = d;
         this.type = type;
         this.opts = opts;
+        this.$el = $('');
 
+        if (this.opts.onlyTimepicker) return;
         this.init();
     };
 
-    D.Body.prototype = {
+    datepicker.Body.prototype = {
         init: function () {
             this._buildBaseHtml();
             this._render();
@@ -59,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 = D.getParsedDate(date),
+                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-";
@@ -82,10 +81,11 @@
                     }
                     break;
                 case 'month':
-                    html = parent.loc[parent.opts.monthsFiled][d.month];
+                    html = parent.loc[parent.opts.monthsField][d.month];
                     break;
                 case 'year':
                     var decade = parent.curDecade;
+                    html = d.year;
                     if (d.year < decade[0] || d.year > decade[1]) {
                         classes += ' -other-decade-';
                         if (!opts.selectOtherYears) {
@@ -93,7 +93,6 @@
                         }
                         if (!opts.showOtherYears) html = '';
                     }
-                    html = d.year;
                     break;
             }
 
@@ -104,34 +103,34 @@
             }
 
             if (opts.range) {
-                if (D.isSame(parent.minRange, date, type)) classes += ' -range-from-';
-                if (D.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 (
-                        (D.bigger(parent.minRange, date) && D.less(parent.focused, date)) ||
-                        (D.less(parent.maxRange, date) && D.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 (D.less(parent.maxRange, date) && D.isSame(parent.focused, date)) {
+                    if (dp.less(maxRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-from-'
                     }
-                    if (D.bigger(parent.minRange, date) && D.isSame(parent.focused, date)) {
+                    if (dp.bigger(minRange, date) && dp.isSame(parent.focused, date)) {
                         classes += ' -range-to-'
                     }
 
                 } else if (parent.selectedDates.length == 2) {
-                    if (D.bigger(parent.minRange, date) && D.less(parent.maxRange, date)) {
+                    if (dp.bigger(minRange, date) && dp.less(maxRange, date)) {
                         classes += ' -in-range-'
                     }
                 }
             }
 
 
-            if (D.isSame(currentDate, date, type)) classes += ' -current-';
-            if (parent.focused && D.isSame(date, parent.focused, type)) classes += ' -focus-';
+            if (dp.isSame(currentDate, date, type)) classes += ' -current-';
+            if (parent.focused && dp.isSame(date, parent.focused, type)) classes += ' -focus-';
             if (parent._isSelected(date, type)) classes += ' -selected-';
             if (!parent._isInRange(date, type) || render.disabled) classes += ' -disabled-';
 
@@ -148,7 +147,7 @@
          * @private
          */
         _getDaysHtml: function (date) {
-            var totalMonthDays = D.getDaysCount(date),
+            var totalMonthDays = dp.getDaysCount(date),
                 firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
                 lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
                 daysFromPevMonth = firstMonthDay - this.d.loc.firstDay,
@@ -188,7 +187,7 @@
          */
         _getMonthsHtml: function (date) {
             var html = '',
-                d = D.getParsedDate(date),
+                d = dp.getParsedDate(date),
                 i = 0;
 
             while(i < 12) {
@@ -206,8 +205,8 @@
         },
 
         _getYearsHtml: function (date) {
-            var d = D.getParsedDate(date),
-                decade = D.getDecade(date),
+            var d = dp.getParsedDate(date),
+                decade = dp.getDecade(date),
                 firstYear = decade[0] - 1,
                 html = '',
                 i = firstYear;
@@ -246,6 +245,7 @@
         },
 
         _render: function () {
+            if (this.opts.onlyTimepicker) return;
             this._renderTypes[this.type].bind(this)();
         },
 
@@ -264,6 +264,7 @@
         },
 
         show: function () {
+            if (this.opts.onlyTimepicker) return;
             this.$el.addClass('active');
             this.acitve = true;
         },
@@ -279,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
@@ -290,11 +292,12 @@
                 alreadySelected = this.d._isSelected(selectedDate, this.d.cellType);
 
             if (!alreadySelected) {
-                this.d.selectDate(selectedDate);
-            } else if (alreadySelected && this.opts.toggleSelected){
-                this.d.removeDate(selectedDate);
+                dp._trigger('clickCell', selectedDate);
+                return;
             }
 
+            dp._handleAlreadySelectedDates.bind(dp, alreadySelected, selectedDate)();
+
         },
 
         _onClickCell: function (e) {

src/js/datepicker.js

@@ -1,7 +1,6 @@
-var Datepicker;
-
-(function (window, $, undefined) {
-    var pluginName = 'datepicker',
+;(function () {
+    var VERSION = '2.2.3',
+        pluginName = 'datepicker',
         autoInitSelector = '.datepicker-here',
         $body, $datepickersContainer,
         containerBuilt = false,
@@ -53,7 +52,7 @@ var Datepicker;
             autoClose: false,
 
             // navigation
-            monthsFiled: 'monthsShort',
+            monthsField: 'monthsShort',
             prevHtml: '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>',
             nextHtml: '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>',
             navTitles: {
@@ -62,8 +61,25 @@ var Datepicker;
                 years: 'yyyy1 - yyyy2'
             },
 
+            // 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: '',
@@ -87,7 +103,7 @@ var Datepicker;
         },
         datepicker;
 
-    Datepicker  = function (el, options) {
+    var Datepicker  = function (el, options) {
         this.el = el;
         this.$el = $(el);
 
@@ -121,6 +137,7 @@ var Datepicker;
         this.keys = [];
         this.minRange = '';
         this.maxRange = '';
+        this._prevOnSelectValue = '';
 
         this.init()
     };
@@ -128,6 +145,7 @@ var Datepicker;
     datepicker = Datepicker;
 
     datepicker.prototype = {
+        VERSION: VERSION,
         viewIndexes: ['days', 'months', 'years'],
 
         init: function () {
@@ -144,7 +162,7 @@ var Datepicker;
                     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));
@@ -155,11 +173,21 @@ var Datepicker;
                 this.$datepicker.addClass(this.opts.classes)
             }
 
-            this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
+            if (this.opts.timepicker) {
+                this.timepicker = new $.fn.datepicker.Timepicker(this, this.opts);
+                this._bindTimepickerEvents();
+            }
+
+            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 Datepicker.Navigation(this, this.opts);
+            this.nav = new $.fn.datepicker.Navigation(this, this.opts);
             this.view = this.currentView;
 
+            this.$el.on('clickCell.adp', this._onClickCell.bind(this));
             this.$datepicker.on('mouseenter', '.datepicker--cell', this._onMouseEnterCell.bind(this));
             this.$datepicker.on('mouseleave', '.datepicker--cell', this._onMouseLeaveCell.bind(this));
 
@@ -172,16 +200,22 @@ var Datepicker;
         },
 
         _bindEvents : function () {
-            this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
-            this.$el.on('blur', this._onBlur.bind(this));
-            this.$el.on('input', this._onInput.bind(this));
-            $(window).on('resize', this._onResize.bind(this));
+            this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
+            this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
+            this.$el.on('blur.adp', this._onBlur.bind(this));
+            this.$el.on('keyup.adp', this._onKeyUpGeneral.bind(this));
+            $(window).on('resize.adp', this._onResize.bind(this));
+            $('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
         },
 
         _bindKeyboardEvents: function () {
-            this.$el.on('keydown', this._onKeyDown.bind(this));
-            this.$el.on('keyup', this._onKeyUp.bind(this));
-            this.$el.on('hotKey', this._onHotKey.bind(this));
+            this.$el.on('keydown.adp', this._onKeyDown.bind(this));
+            this.$el.on('keyup.adp', this._onKeyUp.bind(this));
+            this.$el.on('hotKey.adp', this._onHotKey.bind(this));
+        },
+
+        _bindTimepickerEvents: function () {
+            this.$el.on('timeChange.adp', this._onTimeChange.bind(this));
         },
 
         isWeekend: function (day) {
@@ -190,24 +224,43 @@ var Datepicker;
 
         _defineLocale: function (lang) {
             if (typeof lang == 'string') {
-                this.loc = Datepicker.language[lang];
+                this.loc = $.fn.datepicker.language[lang];
                 if (!this.loc) {
                     console.warn('Can\'t find language "' + lang + '" in Datepicker.language, will use "ru" instead');
-                    this.loc = $.extend(true, {}, Datepicker.language.ru)
+                    this.loc = $.extend(true, {}, $.fn.datepicker.language.ru)
                 }
 
-                this.loc = $.extend(true, {}, Datepicker.language.ru, Datepicker.language[lang])
+                this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, $.fn.datepicker.language[lang])
             } else {
-                this.loc = $.extend(true, {}, Datepicker.language.ru, lang)
+                this.loc = $.extend(true, {}, $.fn.datepicker.language.ru, lang)
             }
 
             if (this.opts.dateFormat) {
                 this.loc.dateFormat = this.opts.dateFormat
             }
 
-            if (this.opts.firstDay) {
+            if (this.opts.timeFormat) {
+                this.loc.timeFormat = this.opts.timeFormat
+            }
+
+            if (this.opts.firstDay !== '') {
                 this.loc.firstDay = this.opts.firstDay
             }
+
+            if (this.opts.timepicker) {
+                this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
+            }
+
+            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'))
+            ) {
+               this.ampm = true;
+            }
         },
 
         _buildDatepickersContainer: function () {
@@ -237,6 +290,9 @@ var Datepicker;
 
         _triggerOnChange: function () {
             if (!this.selectedDates.length) {
+                // Prevent from triggering multiple onSelect callback with same argument (empty string) in IE10-11
+                if (this._prevOnSelectValue === '') return;
+                this._prevOnSelectValue = '';
                 return this.opts.onSelect('', '', this);
             }
 
@@ -244,20 +300,34 @@ var Datepicker;
                 parsedSelected = datepicker.getParsedDate(selectedDates[0]),
                 formattedDates,
                 _this = this,
-                dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
+                dates = new Date(
+                    parsedSelected.year,
+                    parsedSelected.month,
+                    parsedSelected.date,
+                    parsedSelected.hours,
+                    parsedSelected.minutes,
+                    parsedSelected.seconds
+                );
 
                 formattedDates = selectedDates.map(function (date) {
                     return _this.formatDate(_this.loc.dateFormat, date)
                 }).join(this.opts.multipleDatesSeparator);
 
             // Create new dates array, to separate it from original selectedDates
-            if (this.opts.multipleDates) {
+            if (this.opts.multipleDates || this.opts.range) {
                 dates = selectedDates.map(function(date) {
                     var parsedDate = datepicker.getParsedDate(date);
-                    return new Date(parsedDate.year, parsedDate.month, parsedDate.date)
+                    return new Date(
+                        parsedDate.year,
+                        parsedDate.month,
+                        parsedDate.date,
+                        parsedDate.hours,
+                        parsedDate.minutes,
+                        parsedDate.seconds
+                    );
                 })
             }
-
+            this._prevOnSelectValue = formattedDates;
             this.opts.onSelect(formattedDates, dates, this);
         },
 
@@ -302,42 +372,86 @@ var Datepicker;
         formatDate: function (string, date) {
             date = date || this.date;
             var result = string,
+                boundary = this._getWordBoundaryRegExp,
                 locale = this.loc,
+                leadingZero = datepicker.getLeadingZeroNum,
                 decade = datepicker.getDecade(date),
-                d = datepicker.getParsedDate(date);
+                d = datepicker.getParsedDate(date),
+                fullHours = d.fullHours,
+                hours = d.hours,
+                ampm = string.match(boundary('aa')) || string.match(boundary('AA')),
+                dayPeriod = 'am',
+                replacer = this._replacer,
+                validHours;
+
+            if (this.opts.timepicker && this.timepicker && ampm) {
+                validHours = this.timepicker._getValidHoursFromDate(date, ampm);
+                fullHours = leadingZero(validHours.hours);
+                hours = validHours.hours;
+                dayPeriod = validHours.dayPeriod;
+            }
 
             switch (true) {
                 case /@/.test(result):
                     result = result.replace(/@/, date.getTime());
+                case /aa/.test(result):
+                    result = replacer(result, boundary('aa'), dayPeriod);
+                case /AA/.test(result):
+                    result = replacer(result, boundary('AA'), dayPeriod.toUpperCase());
                 case /dd/.test(result):
-                    result = result.replace(/\bdd\b/, d.fullDate);
+                    result = replacer(result, boundary('dd'), d.fullDate);
                 case /d/.test(result):
-                    result = result.replace(/\bd\b/, d.date);
+                    result = replacer(result, boundary('d'), d.date);
                 case /DD/.test(result):
-                    result = result.replace(/\bDD\b/, locale.days[d.day]);
+                    result = replacer(result, boundary('DD'), locale.days[d.day]);
                 case /D/.test(result):
-                    result = result.replace(/\bD\b/, locale.daysShort[d.day]);
+                    result = replacer(result, boundary('D'), locale.daysShort[d.day]);
                 case /mm/.test(result):
-                    result = result.replace(/\bmm\b/, d.fullMonth);
+                    result = replacer(result, boundary('mm'), d.fullMonth);
                 case /m/.test(result):
-                    result = result.replace(/\bm\b/, d.month + 1);
+                    result = replacer(result, boundary('m'), d.month + 1);
                 case /MM/.test(result):
-                    result = result.replace(/\bMM\b/, this.loc.months[d.month]);
+                    result = replacer(result, boundary('MM'), this.loc.months[d.month]);
                 case /M/.test(result):
-                    result = result.replace(/\bM\b/, 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 = replacer(result, boundary('ii'), d.fullMinutes);
+                case /i/.test(result):
+                    result = replacer(result, boundary('i'), d.minutes);
+                case /hh/.test(result):
+                    result = replacer(result, boundary('hh'), fullHours);
+                case /h/.test(result):
+                    result = replacer(result, boundary('h'), hours);
                 case /yyyy/.test(result):
-                    result = result.replace(/\byyyy\b/, d.year);
+                    result = replacer(result, boundary('yyyy'), d.year);
                 case /yyyy1/.test(result):
-                    result = result.replace(/\byyyy1\b/, decade[0]);
+                    result = replacer(result, boundary('yyyy1'), decade[0]);
                 case /yyyy2/.test(result):
-                    result = result.replace(/\byyyy2\b/, decade[1]);
+                    result = replacer(result, boundary('yyyy2'), decade[1]);
                 case /yy/.test(result):
-                    result = result.replace(/\byy\b/, d.year.toString().slice(-2));
+                    result = replacer(result, boundary('yy'), d.year.toString().slice(-2));
             }
 
             return result;
         },
 
+        _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,
@@ -346,8 +460,34 @@ var Datepicker;
                 len = selectedDates.length,
                 newDate = '';
 
+            if (Array.isArray(date)) {
+                date.forEach(function (d) {
+                    _this.selectDate(d)
+                });
+                return;
+            }
+
             if (!(date instanceof Date)) return;
 
+            this.lastSelectedDate = date;
+
+            // Set new time values from Date
+            if (this.timepicker) {
+                this.timepicker._setTime(date);
+            }
+
+            // On this step timepicker will set valid values in it's instance
+            _this._trigger('selectDate', date);
+
+            // Set correct time values after timepicker's validation
+            // Prevent from setting hours or minutes which values are lesser then `min` value or
+            // greater then `max` value
+            if (this.timepicker) {
+                date.setHours(this.timepicker.hours);
+                date.setMinutes(this.timepicker.minutes)
+                date.setSeconds(this.timepicker.seconds)
+            }
+
             if (_this.view == 'days') {
                 if (date.getMonth() != d.month && opts.moveToOtherMonthsOnSelect) {
                     newDate = new Date(date.getFullYear(), date.getMonth(), 1);
@@ -367,7 +507,7 @@ var Datepicker;
                 _this.nav._render()
             }
 
-            if (opts.multipleDates) {
+            if (opts.multipleDates && !opts.range) { // Set priority to range functionality
                 if (len === opts.multipleDates) return;
                 if (!_this._isSelected(date)) {
                     _this.selectedDates.push(date);
@@ -384,6 +524,11 @@ var Datepicker;
                     } else {
                         _this.minRange = date;
                     }
+                    // Swap dates if they were selected via dp.selectDate() and second date was smaller then first
+                    if (datepicker.bigger(_this.maxRange, _this.minRange)) {
+                        _this.maxRange = _this.minRange;
+                        _this.minRange = date;
+                    }
                     _this.selectedDates = [_this.minRange, _this.maxRange]
 
                 } else {
@@ -400,7 +545,7 @@ var Datepicker;
                 _this._triggerOnChange();
             }
 
-            if (opts.autoClose) {
+            if (opts.autoClose && !this.timepickerIsActive) {
                 if (!opts.multipleDates && !opts.range) {
                     _this.hide();
                 } else if (opts.range && _this.selectedDates.length == 2) {
@@ -424,6 +569,9 @@ var Datepicker;
                     if (!_this.selectedDates.length) {
                         _this.minRange = '';
                         _this.maxRange = '';
+                        _this.lastSelectedDate = '';
+                    } else {
+                        _this.lastSelectedDate = _this.selectedDates[_this.selectedDates.length - 1];
                     }
 
                     _this.views[_this.currentView]._render();
@@ -443,6 +591,10 @@ var Datepicker;
             this.view = this.opts.minView;
             this.silent = false;
             this.date = new Date();
+
+            if (this.opts.todayButton instanceof Date) {
+                this.selectDate(this.opts.todayButton)
+            }
         },
 
         clear: function () {
@@ -462,7 +614,9 @@ var Datepicker;
          * @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;
             } else if (len == 1 && typeof param == 'object') {
@@ -473,7 +627,7 @@ var Datepicker;
             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) {
@@ -487,6 +641,24 @@ var Datepicker;
                 this.$datepicker.addClass(this.opts.classes)
             }
 
+            if (this.opts.onlyTimepicker) {
+                this.$datepicker.addClass('-only-timepicker-');
+            }
+
+            if (this.opts.timepicker) {
+                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 (lastSelectedDate) {
+                    lastSelectedDate.setHours(this.timepicker.hours);
+                    lastSelectedDate.setMinutes(this.timepicker.minutes);
+                    lastSelectedDate.setSeconds(this.timepicker.seconds);
+                }
+            }
+
+            this._setInputValue();
+
             return this;
         },
 
@@ -504,21 +676,27 @@ var Datepicker;
         },
 
         _isSelected: function (checkDate, cellType) {
-            return this.selectedDates.some(function (date) {
-                return datepicker.isSame(date, checkDate, cellType)
-            })
+            var res = false;
+            this.selectedDates.some(function (date) {
+                if (datepicker.isSame(date, checkDate, cellType)) {
+                    res = date;
+                    return true;
+                }
+            });
+            return res;
         },
 
         _setInputValue: function () {
             var _this = this,
-                format = this.loc.dateFormat,
-                altFormat = this.opts.altFieldDateFormat,
-                value = this.selectedDates.map(function (date) {
+                opts = _this.opts,
+                format = _this.loc.dateFormat,
+                altFormat = opts.altFieldDateFormat,
+                value = _this.selectedDates.map(function (date) {
                     return _this.formatDate(format, date)
                 }),
                 altValues;
 
-            if (this.$altField) {
+            if (opts.altField && _this.$altField.length) {
                 altValues = this.selectedDates.map(function (date) {
                     return _this.formatDate(altFormat, date)
                 });
@@ -641,12 +819,20 @@ var Datepicker;
         },
 
         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({
@@ -659,6 +845,10 @@ var Datepicker;
             this.inFocus = false;
             this.visible = false;
             this.$el.blur();
+
+            if (onHide) {
+                this._bindVisionEvents(onHide)
+            }
         },
 
         down: function (date) {
@@ -669,6 +859,12 @@ var Datepicker;
             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;
 
@@ -882,10 +1078,54 @@ var Datepicker;
             }
             $cell = this.views[this.currentView].$el.find(selector);
 
-            return $cell.length ? $cell : '';
+            return $cell.length ? $cell : $('');
         },
 
-        _onShowEvent: function () {
+        destroy: function () {
+            var _this = this;
+            _this.$el
+                .off('.adp')
+                .data('datepicker', '');
+
+            _this.selectedDates = [];
+            _this.focused = '';
+            _this.views = {};
+            _this.keys = [];
+            _this.minRange = '';
+            _this.maxRange = '';
+
+            if (_this.opts.inline || !_this.elIsInput) {
+                _this.$datepicker.closest('.datepicker-inline').remove();
+            } else {
+                _this.$datepicker.remove();
+            }
+        },
+
+        _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();
             }
@@ -903,10 +1143,11 @@ var Datepicker;
 
         _onMouseUpDatepicker: function (e) {
             this.inFocus = false;
-            this.$el.focus()
+            e.originalEvent.inFocus = true;
+            if (!e.originalEvent.timepickerFocus) this.$el.focus();
         },
 
-        _onInput: function () {
+        _onKeyUpGeneral: function (e) {
             var val = this.$el.val();
 
             if (!val) {
@@ -920,9 +1161,21 @@ var Datepicker;
             }
         },
 
+        _onMouseUpBody: function (e) {
+            if (e.originalEvent.inFocus) return;
+
+            if (this.visible && !this.inFocus) {
+                this.hide();
+            }
+        },
+
+        _onMouseUpEl: function (e) {
+            e.originalEvent.inFocus = true;
+            setTimeout(this._onKeyUpGeneral.bind(this),4);
+        },
+
         _onKeyDown: function (e) {
             var code = e.which;
-
             this._registerKey(code);
 
             // Arrows
@@ -941,10 +1194,15 @@ var Datepicker;
                         var alreadySelected = this._isSelected(this.focused, this.cellType);
 
                         if (!alreadySelected) {
+                            if (this.timepicker) {
+                                this.focused.setHours(this.timepicker.hours);
+                                this.focused.setMinutes(this.timepicker.minutes);
+                                this.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)
                     }
                 }
             }
@@ -1001,6 +1259,39 @@ var Datepicker;
             this.silent = false;
         },
 
+        _onTimeChange: function (e, h, m, s) {
+            var date = new Date(),
+                selectedDates = this.selectedDates,
+                selected = false;
+
+            if (selectedDates.length) {
+                selected = true;
+                date = this.lastSelectedDate;
+            }
+
+            date.setHours(h);
+            date.setMinutes(m);
+            date.setSeconds(s);
+
+            if (!selected && !this._getCell(date).hasClass('-disabled-')) {
+                this.selectDate(date);
+            } else {
+                this._setInputValue();
+                if (this.opts.onSelect) {
+                    this._triggerOnChange();
+                }
+            }
+        },
+
+        _onClickCell: function (e, date) {
+            if (this.timepicker) {
+                date.setHours(this.timepicker.hours);
+                date.setMinutes(this.timepicker.minutes);
+                date.setSeconds(this.timepicker.seconds)
+            }
+            this.selectDate(date);
+        },
+
         set focused(val) {
             if (!val && this.focused) {
                 var $cell = this._getCell(this.focused);
@@ -1061,7 +1352,7 @@ var Datepicker;
 
             if (this.inited) {
                 if (!this.views[val]) {
-                    this.views[val] = new Datepicker.Body(this, val, this.opts)
+                    this.views[val] = new  $.fn.datepicker.Body(this, val, this.opts)
                 } else {
                     this.views[val]._render();
                 }
@@ -1116,7 +1407,13 @@ var Datepicker;
             fullMonth: (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1, // One based
             date: date.getDate(),
             fullDate: date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
-            day: date.getDay()
+            day: date.getDay(),
+            hours: date.getHours(),
+            fullHours:  date.getHours() < 10 ? '0' + date.getHours() :  date.getHours() ,
+            minutes: date.getMinutes(),
+            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes(),
+            seconds: date.getSeconds(),
+            fullSeconds:  date.getSeconds() < 10 ? '0' + date.getSeconds() :  date.getSeconds()
         }
     };
 
@@ -1159,21 +1456,21 @@ var Datepicker;
         return date.getTime() > dateCompareTo.getTime();
     };
 
-    Datepicker.language = {
-        ru: {
-            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
-            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
-            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
-            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
-            today: 'Сегодня',
-            clear: 'Очистить',
-            dateFormat: 'dd.mm.yyyy',
-            firstDay: 1
-        }
+    datepicker.getLeadingZeroNum = function (num) {
+        return parseInt(num) < 10 ? '0' + num : num;
     };
 
-    $.fn[pluginName] = function ( options ) {
+    /**
+     * 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)) {
                 $.data(this,  pluginName,
@@ -1187,8 +1484,25 @@ var Datepicker;
         });
     };
 
+    $.fn.datepicker.Constructor = Datepicker;
+
+    $.fn.datepicker.language = {
+        ru: {
+            days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
+            daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+            daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+            months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+            monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+            today: 'Сегодня',
+            clear: 'Очистить',
+            dateFormat: 'dd.mm.yyyy',
+            timeFormat: 'hh:ii',
+            firstDay: 1
+        }
+    };
+
     $(function () {
         $(autoInitSelector).datepicker();
     })
 
-})(window, jQuery);
+})();

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.da.js

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

src/js/i18n/datepicker.de.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['de'] = {
+    days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
+    daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    months: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'],
+    monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+    today: 'Heute',
+    clear: 'Aufräumen',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/i18n/datepicker.en.js

@@ -1,4 +1,4 @@
-Datepicker.language['en'] = {
+$.fn.datepicker.language['en'] = {
     days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
@@ -6,6 +6,7 @@ Datepicker.language['en'] = {
     monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     today: 'Today',
     clear: 'Clear',
-    dateFormat: 'mm/dd/yy',
+    dateFormat: 'mm/dd/yyyy',
+    timeFormat: 'hh:ii aa',
     firstDay: 0
 };

src/js/i18n/datepicker.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.nl.js

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

src/js/i18n/datepicker.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.pt-BR.js

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

src/js/i18n/datepicker.pt.js

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

src/js/i18n/datepicker.ro.js

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

src/js/i18n/datepicker.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/i18n/datepicker.zh.js

@@ -0,0 +1,12 @@
+$.fn.datepicker.language['zh'] = {
+    days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    daysShort: ['日', '一', '二', '三', '四', '五', '六'],
+    daysMin: ['日', '一', '二', '三', '四', '五', '六'],
+    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    today: '今天',
+    clear: '清除',
+    dateFormat: 'yyyy-mm-dd',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+};

src/js/navigation.js

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

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

src/sass/_datepicker-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

@@ -11,69 +11,68 @@
 
 .datepicker--cell {
   border-radius: $datepickerBorderRadius;
+  box-sizing: border-box;
   cursor: pointer;
   display: flex;
   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);
-    padding: 0;
-    background-clip: content-box;
+    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;
   }
 
@@ -85,17 +84,21 @@
   &.-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);
     }
   }
+
+  &:empty {
+    cursor: default;
+  }
 }
 
 //  Day names
@@ -108,7 +111,7 @@
 }
 
 .datepicker--day-name {
-  color: map_get($textColor, dayNames);
+  color: map_get($datepickerTextColor, dayNames);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -161,7 +164,7 @@
 // -------------------------
 
 .datepicker--cell-year {
-  width: 100% / $yearsPerRow;
+  width: 100% / $datepickerYearsPerRow;
   height: 33.33%;
 
   &.-other-decade- {

src/sass/datepicker.scss

@@ -8,48 +8,52 @@
   position: absolute;
   left: 0;
   top: 0;
+
+  @media print {
+    display: none;
+  }
 }
 
 .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;
@@ -66,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
@@ -108,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

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

static-server.js

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

tasks/gzip.js

@@ -0,0 +1,9 @@
+var gulp = require('gulp'),
+    gzip = require('gulp-gzip');
+
+module.exports = function (cb) {
+    gulp.src('dist/js/datepicker.min.js')
+        .pipe(gzip())
+        .pipe(gulp.dest('dist/'))
+};
+

tasks/i18n.js

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

tasks/jade.js

@@ -1,6 +1,6 @@
 var gulp = require('gulp'),
     plumber = require('gulp-plumber'),
-    _jade =  require('gulp-jade/node_modules/jade'),
+    _jade =  require('jade'),
     jade = require('gulp-jade');
 
 _jade.filters.code = function( block ) {

tasks/js.js

@@ -1,17 +1,19 @@
 var gulp = require('gulp'),
     rename = require('gulp-rename'),
     uglify = require('gulp-uglify'),
-    sass = require('gulp-sass'),
     clone = require('gulp-clone'),
+    wrap = require('gulp-wrap'),
     concat = require('gulp-concat');
 
 module.exports = function () {
     var stream = gulp.src([
         'src/js/datepicker.js',
         'src/js/body.js',
-        'src/js/navigation.js'
+        'src/js/navigation.js',
+        'src/js/timepicker.js'
     ])
-        .pipe(concat('datepicker.js'));
+        .pipe(concat('datepicker.js'))
+        .pipe(wrap(';(function (window, $, undefined) { <%=contents%> })(window, jQuery);'));
 
     stream.pipe(clone())
         .pipe(gulp.dest('dist/js'));

tests/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Air Datepicker tests</title>
+        <link rel="stylesheet" href="../dist/css/datepicker.min.css"/>
+        <link rel="stylesheet" href="../node_modules/mocha/mocha.css"/>
+        <script type="text/javascript" src="../bower_components/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>
+        <script type="text/javascript" src="../dist/js/i18n/datepicker.de.js"></script>
+
+        <script type="text/javascript" src="../node_modules/mocha/mocha.js"></script>
+        <script type="text/javascript" src="../node_modules/chai/chai.js"></script>
+        <script type="text/javascript">
+            mocha.setup('bdd');
+        </script>
+
+        <script type="text/javascript" src="specs/options.js"></script>
+        <script type="text/javascript" src="specs/events.js"></script>
+        <script type="text/javascript" src="specs/static-methods.js"></script>
+        <script type="text/javascript" src="specs/api.js"></script>
+        <style type="text/css">
+            /* Remove transitions to test position options*/
+            .datepicker {
+                transition-duration: 0s !important;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="container"></div>
+        <div id="mocha"></div>
+        <script type="text/javascript">
+            mocha.run();
+        </script>
+    </body>
+</html>

tests/specs/api.js

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

tests/specs/events.js

@@ -0,0 +1,199 @@
+describe('Events', function () {
+var assert = chai.assert,
+    expect = chai.expect,
+    destroy = true,
+    $span,
+    $altInput,
+    $input, dp;
+
+    before(function () {
+        $input = $('<input>').appendTo('#container');
+        $span = $('<span>').appendTo('#container');
+        $altInput = $('<input class="alt-field">').appendTo('#container');
+    });
+
+    afterEach(function () {
+        if (dp && destroy) {
+            dp.destroy();
+            dp = '';
+        }
+
+        destroy = true;
+    });
+
+    after(function () {
+        $input.remove();
+        $span.remove();
+        $altInput.remove();
+    });
+
+    describe('onSelect', function () {
+        it('should add callback when user selects date', function () {
+            var date = new Date(2016,0,13);
+
+            dp = $input.datepicker({
+                onSelect: function (fd, d, inst) {
+                    expect(fd).to.be.equal('13.01.2016');
+                    expect(d).to.be.instanceof(Date);
+                    expect(inst).to.be.instanceof($.fn.datepicker.Constructor);
+                }
+            }).data('datepicker');
+
+            dp.selectDate(date);
+
+        });
+
+        it('should receive array of dates when "multipleDates" set to true', function () {
+            var date = new Date(2016,0,22),
+                date2 = new Date(2016,0,23),
+                dates = [];
+
+            dp = $input.datepicker({
+                multipleDates: true,
+                onSelect: function (fd, d, inst) {
+                    dates = d;
+                }
+            }).data('datepicker');
+
+            dp.selectDate(date);
+            dp.selectDate(date2);
+
+            expect(dates).to.have.length(2)
+
+        })
+        it('should receive array of dates when "range" set to true', function () {
+            var date = new Date(2016,0,22),
+                date2 = new Date(2016,0,23),
+                dates = [];
+
+            dp = $input.datepicker({
+                range: true,
+                onSelect: function (fd, d, inst) {
+                    dates = d;
+                }
+            }).data('datepicker');
+
+            dp.selectDate(date);
+            dp.selectDate(date2);
+
+            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 () {
+            dp = $input.datepicker({
+                onRenderCell: function (d, type) {
+                    expect(d).to.be.instanceOf(Date);
+                    expect(type).to.be.equal('day');
+                }
+            }).data('datepicker');
+        })
+    });
+
+    describe('onChangeView', function () {
+        it('should add callback when view is changed', function () {
+            var _view;
+
+            dp = $input.datepicker({
+                onChangeView: function (view) {
+                    _view = view;
+                }
+            }).data('datepicker');
+
+            dp.view = 'months';
+            expect(_view).to.be.equal('months')
+        })
+    });
+
+    describe('onChangeMonth', function () {
+        it('should add callback when month is changed', function () {
+            var _month, _year;
+
+            dp = $input.datepicker({
+                startDate: new Date(2016, 0, 22),
+                onChangeMonth: function (month, year) {
+                    _month = month;
+                    _year = year;
+                }
+            }).data('datepicker');
+
+            $('.datepicker--nav-action[data-action="next"]',dp.$datepicker).click();
+
+            expect(_month).to.be.equal(1);
+            expect(_year).to.be.equal(2016)
+        })
+    });
+
+    describe('onChangeYear', function () {
+        it('should add callback when year is changed', function () {
+            var _year;
+
+            dp = $input.datepicker({
+                startDate: new Date(2016, 0, 22),
+                view: 'months',
+                onChangeYear: function (year) {
+                    _year = year;
+                }
+            }).data('datepicker');
+
+            $('.datepicker--nav-action[data-action="next"]',dp.$datepicker).click();
+
+            expect(_year).to.be.equal(2017)
+        })
+    });
+
+    describe('onChangeDecade', function () {
+        it('should add callback when decade is changed', function () {
+            var _decade;
+
+            dp = $input.datepicker({
+                startDate: new Date(2016, 0, 22),
+                view: 'years',
+                onChangeDecade: function (decade) {
+                    _decade = decade;
+                }
+            }).data('datepicker');
+
+            $('.datepicker--nav-action[data-action="next"]',dp.$datepicker).click();
+
+            expect(_decade).to.have.length(2);
+            expect(_decade[0]).to.be.equal(2020);
+            expect(_decade[1]).to.be.equal(2029);
+        })
+    });
+
+});

tests/specs/options.js

@@ -0,0 +1,973 @@
+describe('Options', function () {
+
+    var assert = chai.assert,
+        expect = chai.expect,
+        destroy = true,
+        $altInput,
+        $input, dp;
+
+    before(function () {
+        $input = $('<input>').appendTo('#container');
+        $altInput = $('<input class="alt-field">').appendTo('#container');
+    });
+
+    afterEach(function () {
+        if (dp && destroy) {
+            dp.destroy();
+        }
+
+        destroy = true;
+    });
+
+    after(function () {
+        $input.remove();
+        $altInput.remove();
+    });
+
+    describe('classes', function () {
+        it('should add extra classes to datepicker', function () {
+            dp = $input.datepicker({
+                classes: 'custom-class'
+            }).data('datepicker');
+
+            expect(dp.$datepicker.attr('class')).to.have.string('custom-class')
+
+        })
+    });
+
+    describe('inline', function () {
+        it('if true, should be always visible', function () {
+            dp = $input.datepicker({
+                inline: true
+            }).data('datepicker');
+
+            expect(dp.$datepicker.parent().attr('class')).to.have.string('datepicker-inline');
+        });
+        it('if false, should be hidden', function () {
+            dp = $input.datepicker({
+                inline: false
+            }).data('datepicker');
+
+            expect(dp.$datepicker.parent().attr('class')).to.have.string('datepickers-container');
+        })
+    });
+
+    describe('language', function () {
+        it('should change language to English if it `en`', function () {
+            dp = $input.datepicker({
+                language: 'en'
+            }).data('datepicker');
+
+            expect(dp.loc.days).to.eql($.fn.datepicker.language.en.days);
+        });
+        it('should change language to custom if object is passed', function () {
+            var daysMin = ['В','П','В','С','Ч','П','С'];
+            dp = $input.datepicker({
+                language: {
+                    daysMin: daysMin
+                }
+            }).data('datepicker');
+
+            expect(dp.loc.daysMin).to.eql(daysMin);
+            expect(dp.loc.days).to.eql($.fn.datepicker.language.ru.days);
+        })
+    });
+
+    describe('startDate', function () {
+        it('should change initial viewing date', function () {
+            dp = $input.datepicker({
+                startDate: new Date(2014,11,12)
+            }).data('datepicker');
+
+            expect(dp.$nav.text()).to.have.string('Декабрь');
+            expect(dp.$nav.text()).to.have.string('2014');
+
+        })
+    });
+
+    describe('firstDay', function () {
+        it('should change first day of week', function () {
+            dp = $input.datepicker({
+                firstDay: 2
+            }).data('datepicker');
+
+            var firstCell = $('.datepicker--days-names .datepicker--day-name', dp.$datepicker).eq(0);
+
+            assert.equal(firstCell.text(),'Вт')
+        })
+        it('should change first day of week to `Воскресенье` if it `0`', function () {
+            dp = $input.datepicker({
+                firstDay: 0
+            }).data('datepicker');
+
+            var firstCell = $('.datepicker--days-names .datepicker--day-name', dp.$datepicker).eq(0);
+
+            assert.equal(firstCell.text(),'Вс')
+        })
+    });
+
+    describe('weekends', function () {
+        it('should change days, which should considered to be weekends', function () {
+            dp = $input.datepicker({
+                weekends: [0, 2],
+                firstDay: 0
+            }).data('datepicker');
+
+            var $cells = $('.datepicker--cell-day', dp.$datepicker);
+
+            expect($cells.eq(0).attr('class')).to.have.string('-weekend-')
+            expect($cells.eq(2).attr('class')).to.have.string('-weekend-')
+        })
+    });
+
+    describe('dateFormat', function () {
+        var date = new Date(2015, 6, 4, 11, 5),
+            formats = {
+                '@': date.getTime(),
+                'aa': 'am',
+                'AA': 'AM',
+                'h': 11,
+                'hh': 11,
+                'i': 5,
+                'ii': '05',
+                'dd': '04',
+                'd': 4,
+                'DD': 'Суббота',
+                'D': 'Суб',
+                'mm': '07',
+                'm': 7,
+                'MM': 'Июль',
+                'M': 'Июл',
+                'yyyy' : 2015,
+                'yy': 15,
+                'yyyy1': 2010,
+                'yyyy2': 2019
+            };
+
+        for (var format in formats) {
+            (function (format) {
+                it(format, function () {
+                    dp = $input.datepicker({
+                        dateFormat: 'Selected date: ' + format
+                    }).data('datepicker');
+
+                    dp.selectDate(date);
+                    assert.equal(dp.$el.val(), 'Selected date: ' + formats[format]);
+                })
+            }(format))
+        }
+
+        it('should work with special characters', function () {
+            dp = $input.datepicker({
+                language: 'de',
+                dateFormat: 'Month is MM'
+            }).data('datepicker');
+            dp.selectDate(new Date(2016, 2, 1));
+            expect(dp.$el.val()).to.be.equal('Month is März');
+        })
+    });
+
+    describe('altField', function () {
+        it('should define `$altField` if selector or jQuery object is passed', function () {
+            dp = $input.datepicker({
+                altField: '.alt-field'
+            }).data('datepicker');
+
+            assert(dp.$altField.length);
+        })
+    })
+
+    describe('altFieldFormat', function () {
+        it('should define date format for alternative field', function () {
+            var date = new Date(2015, 11, 17);
+
+            dp = $input.datepicker({
+                altField: '.alt-field',
+                altFieldDateFormat: 'dd-mm-yyyy'
+            }).data('datepicker');
+
+            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');
+        })
+    });
+
+    describe('toggleSelected', function () {
+        it('when true, click on selected cells should remove selection', function () {
+            var date = new Date(2015, 11, 17);
+
+            dp = $input.datepicker().data('datepicker');
+
+            dp.selectDate(date);
+            dp._getCell(date, 'day').click();
+
+            expect(dp.selectedDates).to.have.length(0)
+        });
+
+        it('when false, click on selected cell must do nothing', function () {
+            var date = new Date(2015, 11, 17);
+
+            dp = $input.datepicker({
+                toggleSelected: false
+            }).data('datepicker');
+
+            dp.selectDate(date);
+            dp._getCell(date, 'day').click();
+
+            expect(dp.selectedDates).to.have.length(1)
+        })
+    });
+
+    describe('keyboardNav', function () {
+        var year = 2015,
+            month = 10,
+            day = 18,
+            date = new Date(year, month, day),
+            cases = [
+                {
+                    it: '→: should focus next cell',
+                    keys: [39],
+                    validDate: new Date(year, month, day + 1)
+                },
+                {
+                    it: '←: should focus previous cell',
+                    keys: [37],
+                    validDate: new Date(year, month, day - 1)
+                },
+                {
+                    it: '↑: should focus +7 day cell',
+                    keys: [40],
+                    validDate: new Date(year, month, day + 7)
+                },
+                {
+                    it: '↓: should focus -7 day cell',
+                    keys: [38],
+                    validDate: new Date(year, month, day - 7)
+                },
+                {
+                    it: 'Ctrl + →: should focus next month',
+                    keys: [17, 39],
+                    validDate: new Date(year, month + 1, day)
+                },
+                {
+                    it: 'Ctrl + ←: should focus previous month',
+                    keys: [17, 37],
+                    validDate: new Date(year, month - 1, day)
+                },
+                {
+                    it: 'Shift + →: should focus next year',
+                    keys: [16, 39],
+                    validDate: new Date(year + 1, month, day)
+                },
+                {
+                    it: 'Shift + ←: should focus previous year',
+                    keys: [16, 37],
+                    validDate: new Date(year - 1, month, day)
+                },
+                {
+                    it: 'Alt + →: should focus on +10 year cell',
+                    keys: [18, 39],
+                    validDate: new Date(year + 10, month, day)
+                },
+                {
+                    it: 'Alt + ←: should focus on -10 year cell',
+                    keys: [18, 37],
+                    validDate: new Date(year - 10, month, day)
+                },
+                {
+                    it: 'Ctrl + Shift + ↑: should change view to months',
+                    keys: [16, 17, 38],
+                    view: 'months'
+                }
+            ];
+
+        cases.forEach(function (currentCase) {
+            var keys = currentCase.keys,
+                valid = currentCase.validDate;
+
+            it(currentCase.it, function () {
+                dp = $input.datepicker().data('datepicker');
+                dp.selectDate(date);
+
+                keys.forEach(function (key) {
+                    $input.trigger($.Event('keydown', {which: key}));
+                });
+
+                var focused = dp.focused;
+
+
+                if (currentCase.validDate) {
+                    assert.equal(valid.getFullYear(), focused.getFullYear());
+                    assert.equal(valid.getMonth(), focused.getMonth());
+                    assert.equal(valid.getDate(), focused.getDate());
+                }
+
+                if (currentCase.view) {
+                    assert.equal(currentCase.view, dp.view)
+                }
+            })
+
+        });
+    });
+
+    describe('position', function () {
+        var iDims, dpDims,
+            offset;
+
+        function prepare (position) {
+            dp = $input.datepicker({position: position}).data('datepicker');
+            $input.focus();
+
+            iDims = {
+                width: $input.outerWidth(),
+                height: $input.outerHeight(),
+                left: $input.offset().left,
+                top: $input.offset().top
+            };
+
+            dpDims = {
+                width: dp.$datepicker.outerWidth(),
+                height: dp.$datepicker.outerHeight(),
+                left: dp.$datepicker.offset().left,
+                top: dp.$datepicker.offset().top
+            };
+
+            offset = dp.opts.offset;
+        }
+
+        it('should set `bottom left` position', function () {
+            prepare('bottom left');
+
+            assert.equal(iDims.top + iDims.height + offset, dpDims.top);
+            assert.equal(iDims.left, dpDims.left);
+        });
+        it('should set `top right` position', function () {
+            prepare('top right');
+
+            assert.equal(iDims.top, dpDims.top + dpDims.height + offset);
+            assert.equal(iDims.left + iDims.width, dpDims.left + dpDims.width);
+        });
+        it('should set `right bottom` position', function () {
+            prepare('right bottom');
+
+            assert.equal(iDims.left + iDims.width + offset, dpDims.left);
+            assert.equal(iDims.top + iDims.height, dpDims.top + dpDims.height);
+        });
+        it('should set `left center` position', function () {
+            prepare('left center');
+
+            assert.equal(iDims.left - offset, dpDims.left + dpDims.width);
+            assert.equal(iDims.top + iDims.height/2, dpDims.top + dpDims.height/2);
+        });
+        it('should set `bottom center` position', function () {
+            prepare('bottom center');
+
+            assert.equal(iDims.top + iDims.height + offset, dpDims.top);
+            assert.equal(iDims.left + iDims.width/2, dpDims.left + dpDims.width/2);
+        })
+    });
+
+    describe('offset', function () {
+        var iDims, dpDims,
+            offset;
+
+        var i = 0;
+        while(i < 5) {
+            offset = Math.round(Math.random() * 50);
+            
+            (function (offset) {
+                it('should set offset ' + offset + ' from main axis', function () {
+                    dp = $input.datepicker({
+                        offset: offset
+                    }).data('datepicker');
+                    $input.focus();
+
+                    iDims = {
+                        width: $input.outerWidth(),
+                        height: $input.outerHeight(),
+                        left: $input.offset().left,
+                        top: $input.offset().top
+                    };
+
+                    dpDims = {
+                        width: dp.$datepicker.outerWidth(),
+                        height: dp.$datepicker.outerHeight(),
+                        left: dp.$datepicker.offset().left,
+                        top: dp.$datepicker.offset().top
+                    };
+
+                    assert.equal(iDims.top + iDims.height + offset, dpDims.top);
+                });
+            })(offset);
+            
+            i++;
+        }
+    });
+
+    describe('view', function () {
+        it('should set initial datepicker view to `months`', function () {
+            dp = $input.datepicker({view: 'months'}).data('datepicker');
+            assert.equal('months', dp.view)
+        });
+        it('should set initial datepicker view to `years`', function () {
+            dp = $input.datepicker({view: 'years'}).data('datepicker');
+            assert.equal('years', dp.view)
+        })
+    });
+
+    describe('minView', function () {
+        it('should set minimum possible view', function () {
+            dp = $input.datepicker({
+                view: 'months',
+                minView: 'months'
+            }).data('datepicker');
+
+            $('.datepicker--cell-month', dp.$datepicker).eq(0).click();
+            assert.equal('months', dp.view)
+        });
+
+    });
+
+    describe('showOtherMonths', function () {
+        var date = new Date(2015, 11, 22);
+
+        it('if `true` should show days from other months', function () {
+            dp = $input.datepicker().data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day.-other-month-', dp.$datepicker).eq(0);
+
+            assert($cell.text(), 'must have text')
+        });
+
+        it('if `false` should hide days from other months', function () {
+            dp = $input.datepicker({showOtherMonths: false}).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day.-other-month-', dp.$datepicker).eq(0);
+
+            expect($cell.text()).to.be.empty;
+        });
+
+    });
+
+    describe('selectOtherMonths', function () {
+        var date = new Date(2015, 11, 22);
+
+        it('if `true` you can select cells from other months', function () {
+            dp = $input.datepicker().data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day.-other-month-', dp.$datepicker).eq(0);
+            $cell.click();
+            expect(dp.selectedDates).to.have.length(1)
+        });
+
+        it('if `false` you can not select cells from other months ', function () {
+            dp = $input.datepicker({selectOtherMonths: false}).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day.-other-month-', dp.$datepicker).eq(0);
+            $cell.click();
+            expect(dp.selectedDates).to.have.length(0)
+        });
+
+    });
+
+    describe('moveToOtherMonthsOnSelect', function () {
+        var date = new Date(2015, 11, 22);
+
+        it('if `true` datepicker will translate to other month if date from other month is selected', function () {
+            dp = $input.datepicker().data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day.-other-month-', dp.$datepicker).eq(0);
+            $cell.click();
+
+            assert.equal(dp.date.getMonth(), 10)
+
+        });
+
+        it('if `false` datepicker will stay on same month when selecting dates from other month', function () {
+            dp = $input.datepicker({moveToOtherMonthsOnSelect: false}).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day.-other-month-', dp.$datepicker).eq(0);
+            $cell.click();
+
+            assert.equal(dp.date.getMonth(), 11)
+        });
+
+    });
+
+    describe('showOtherYears', function () {
+        var date = new Date(2015, 11, 22);
+        it('if `true` should show years from other decades', function () {
+            dp = $input.datepicker({
+                view: 'years'
+            }).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-year.-other-decade-', dp.$datepicker).eq(0);
+
+            assert($cell.text(), 'must have text')
+        });
+
+        it('if `false` should hide years from other decades', function () {
+            destroy = false;
+            dp = $input.datepicker({
+                view: 'years',
+                showOtherYears: false
+            }).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-year.-other-decade-', dp.$datepicker).eq(0);
+
+            expect($cell.text()).to.be.empty;
+        });
+
+    });
+
+    describe('selectOtherYears', function () {
+        var date = new Date(2015, 11, 22);
+
+        it('if `true` you can select cells from other decades', function () {
+            dp = $input.datepicker({
+                view: 'years',
+                minView: 'years',
+                selectOtherYears: true
+            }).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-year.-other-decade-', dp.$datepicker).eq(0);
+            $cell.click();
+            expect(dp.selectedDates).to.have.length(1)
+        });
+
+        it('if `false` you can not select cells from other months ', function () {
+            dp = $input.datepicker({
+                view: 'years',
+                minView: 'years',
+                selectOtherYears: false
+            }).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-year.-other-decade-', dp.$datepicker).eq(0);
+            $cell.click();
+            expect(dp.selectedDates).to.have.length(0)
+        });
+
+    });
+
+    describe('moveToOtherYearsOnSelect', function () {
+        var date = new Date(2015, 11, 22);
+
+        it('if `true` datepicker will translate to other decade if date from other decade is selected', function () {
+            dp = $input.datepicker({
+                view: 'years',
+                minView: 'years',
+                moveToOtherYearsOnSelect: true
+            }).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-year.-other-decade-', dp.$datepicker).eq(0);
+            $cell.click();
+
+            assert.equal(dp.date.getFullYear(), 2009)
+
+        });
+
+        it('if `false` datepicker will stay on same decade when selecting dates from other decade', function () {
+            dp = $input.datepicker({
+                view: 'years',
+                minView: 'years',
+                moveToOtherYearsOnSelect: false
+            }).data('datepicker');
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-year.-other-decade-', dp.$datepicker).eq(0);
+            $cell.click();
+
+            assert.equal(dp.date.getFullYear(), 2015)
+        });
+    });
+
+    describe('minDate', function () {
+        it('should set minimum possible date to choose', function () {
+            var date = new Date(2015, 11, 30);
+
+            dp = $input.datepicker({
+                minDate: date
+            }).data('datepicker');
+
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day[data-year="2015"][data-month="11"][data-date="30"]', dp.$datepicker);
+
+            expect($cell.prev().attr('class')).to.have.string('-disabled-')
+        })
+    });
+
+    describe('maxDate', function () {
+        it('should set maximum possible date to choose', function () {
+            var date = new Date(2015, 11, 30);
+
+            dp = $input.datepicker({
+                maxDate: date
+            }).data('datepicker');
+
+            dp.date = date;
+
+            var $cell = $('.datepicker--cell-day[data-year="2015"][data-month="11"][data-date="30"]', dp.$datepicker);
+
+            expect($cell.next().attr('class')).to.have.string('-disabled-')
+        })
+    });
+
+    describe('disableNavWhenOutOfRange', function () {
+        it('if `true` then navigation buttons will be disabled if there is no more possible dates to select to in next or prev month', function () {
+            var date = new Date(2015, 11, 30);
+
+            dp = $input.datepicker({
+                minDate: date,
+                inline: true
+            }).data('datepicker');
+
+            dp.date = date;
+
+            var $prev = $('.datepicker--nav-action[data-action="prev"]', dp.$datepicker);
+
+            expect($prev.attr('class')).to.have.string('-disabled-')
+        })
+    });
+
+    describe('multipleDates', function () {
+        it('if `true` then one can select multiple dates', function () {
+            dp = $input.datepicker({
+                multipleDates: true
+            }).data('datepicker');
+
+            dp.selectDate(new Date(2016, 0, 7));
+            dp.selectDate(new Date(2016, 0, 8));
+            dp.selectDate(new Date(2016, 0, 9));
+
+            expect(dp.selectedDates).to.have.length(3)
+        });
+
+        it('if `number` should limit length of selected dates by its value', function () {
+            dp = $input.datepicker({
+                multipleDates: 3
+            }).data('datepicker');
+
+            dp.selectDate(new Date(2016, 0, 7));
+            dp.selectDate(new Date(2016, 0, 8));
+            dp.selectDate(new Date(2016, 0, 9));
+            dp.selectDate(new Date(2016, 0, 10));
+            dp.selectDate(new Date(2016, 0, 11));
+
+            expect(dp.selectedDates).to.have.length(3)
+        })
+    });
+
+    describe('multipleDatesSeparator', function () {
+        it('defines multiple dates separator sign', function () {
+            dp = $input.datepicker({
+                multipleDates: true,
+                multipleDatesSeparator: ' separator '
+            }).data('datepicker');
+
+            dp.selectDate(new Date(2016, 0, 12));
+            dp.selectDate(new Date(2016, 0, 13))
+
+            expect($input.val()).to.have.string(' separator ')
+        })
+    });
+
+    describe('todayButton', function () {
+        it('should add "today" button if true', function () {
+
+            dp = $input.datepicker({
+                todayButton: true
+            }).data('datepicker');
+
+            var $button = $('.datepicker--button', dp.$datepicker);
+
+            expect($button.length).to.be.equal(1);
+            expect($button.data('action')).to.be.equal('today');
+
+        })
+    });
+
+    describe('clearButton', function () {
+        it('should add "clear" button if true', function () {
+
+            dp = $input.datepicker({
+                clearButton: true
+            }).data('datepicker');
+
+            var $button = $('.datepicker--button', dp.$datepicker);
+
+            expect($button.length).to.be.equal(1);
+            expect($button.data('action')).to.be.equal('clear');
+
+        })
+    });
+
+    describe('showEvent', function () {
+        it('should define event type on which datepicker will be shown', function () {
+            dp = $input.datepicker({
+                showEvent: 'click'
+            }).data('datepicker');
+
+            $input.click();
+
+            expect(dp.visible).to.be.equal(true)
+
+        })
+    });
+
+
+    describe('autoClose', function () {
+        it('if true, when datepicker will close after date was selected', function () {
+            dp = $input.datepicker({
+                autoClose: true
+            }).data('datepicker');
+
+            dp.show();
+            dp.selectDate(new Date());
+
+            expect(dp.visible).to.be.equal(false)
+
+        });
+
+        it('if false, when datepicker will not close after date was selected', function () {
+            dp = $input.datepicker({
+                autoClose: false
+            }).data('datepicker');
+
+            dp.show();
+            dp.selectDate(new Date());
+
+            expect(dp.visible).to.be.equal(true)
+
+        })
+    });
+
+    describe('monthsField', function () {
+        it('defines which field from localization must be used as source for months name in "months view"', function () {
+            dp = $input.datepicker({
+                monthsField: 'months',
+                view: 'months'
+            }).data('datepicker');
+
+            var $cell = $('.datepicker--cell-month').eq(0);
+
+            expect($cell.text()).to.be.equal('Январь');
+        });
+    });
+
+    describe('prevHtml', function () {
+        it('defines html which should be used in "previous" button', function () {
+            dp = $input.datepicker({
+                prevHtml: 'previous'
+            }).data('datepicker');
+
+            var $prev = $('[data-action="prev"]', dp.$datepicker);
+
+            expect($prev.html()).to.be.equal('previous');
+        });
+    });
+
+    describe('nextHtml', function () {
+        it('defines html which should be used in "next" button', function () {
+            dp = $input.datepicker({
+                nextHtml: 'next'
+            }).data('datepicker');
+
+            var $next = $('[data-action="next"]', dp.$datepicker);
+
+            expect($next.html()).to.be.equal('next');
+        });
+    });
+
+    describe('navTitles', function () {
+        it('defines datepicker titles', function () {
+            dp = $input.datepicker({
+                navTitles: {
+                    days: 'Days',
+                    months: 'Months',
+                    years: 'Years'
+                }
+            }).data('datepicker');
+
+            var $title = $('.datepicker--nav-title', dp.$datepicker);
+            expect($title.html()).to.have.string('Days');
+
+            dp.view = 'months';
+            $title = $('.datepicker--nav-title', dp.$datepicker);
+            expect($title.html()).to.have.string('Months');
+
+            dp.view = 'years';
+            $title = $('.datepicker--nav-title', dp.$datepicker);
+            expect($title.html()).to.have.string('Years');
+
+        });
+    });
+
+    describe('timepicker', function () {
+        it('should add timepicker to calendar', function () {
+            dp = $input.datepicker({
+                timepicker: true
+            }).data('datepicker');
+
+            var $time = $('.datepicker--time', dp.$datepicker);
+            expect($time).to.have.length(1)
+
+        })
+    });
+
+    describe('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);
+            dp = $input.datepicker({
+                timepicker: true,
+                onSelect: function (fd, d) {
+                    expect(fd).to.be.equal('09.03.2016 time separator 11:24')
+                },
+                dateTimeSeparator: ' time separator '
+            }).data('datepicker');
+
+            dp.selectDate(date);
+
+        })
+    });
+
+    describe('timeFormat', function () {
+        it('should define time format', function () {
+            var date = new Date(2016,2,9,9,4);
+            dp = $input.datepicker({
+                timepicker: true,
+                timeFormat: 'h - ii',
+                onSelect: function (fd, d) {
+                    expect(fd).to.be.equal('09.03.2016 9 - 04')
+                }
+            }).data('datepicker');
+
+            dp.selectDate(date);
+        })
+    });
+
+    describe('minHours', function () {
+        it('should set minimum hours value', function () {
+            var date = new Date();
+            date.setHours(9);
+            dp = $input.datepicker({
+                timepicker: true,
+                minHours: 10,
+                onSelect: function (fd, d) {
+                    var hours = d.getHours();
+                    expect(hours).to.be.equal(10)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    });
+
+    describe('minMinutes', function () {
+        it('should set minimum minutes value', function () {
+            var date = new Date();
+            date.setMinutes(20);
+            dp = $input.datepicker({
+                timepicker: true,
+                minMinutes: 30,
+                onSelect: function (fd, d) {
+                    var minutes = d.getMinutes();
+                    expect(minutes).to.be.equal(30)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    });
+
+    describe('maxHours', function () {
+        it('should set maximum hours value', function () {
+            var date = new Date();
+            date.setHours(20);
+            dp = $input.datepicker({
+                timepicker: true,
+                maxHours: 18,
+                onSelect: function (fd, d) {
+                    var hours = d.getHours();
+                    expect(hours).to.be.equal(18)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    });
+
+    describe('maxMinutes', function () {
+        it('should set maximum minutes value', function () {
+            var date = new Date();
+            date.setMinutes(50);
+            dp = $input.datepicker({
+                timepicker: true,
+                maxMinutes: 30,
+                onSelect: function (fd, d) {
+                    var minutes = d.getMinutes();
+                    expect(minutes).to.be.equal(30)
+                }
+            }).data('datepicker');
+            dp.selectDate(date);
+        })
+    })
+});

tests/specs/static-methods.js

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

visual-tests.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Air datepicker visual tests</title>
+        <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">
+            var log;
+            function logger (el) {
+                var $el = $(el);
+
+                return function(text) {
+                    var count = $('p', $el).length;
+                    $el.append('<p><span>' + count++ + '.</span> ' + text + '</p>').scrollTop(100000)
+                }
+            }
+
+            $(function () {
+                log = logger('#v-log');
+            })
+        </script>
+    </head>
+    <body>
+        <div class="v-log" id="v-log"></div>
+        <div class="visual-tests">
+            <article>
+                <h1>Basic</h1>
+                <div class="row">
+                    <div class="vt-tile">
+                        <h2>Default</h2>
+                        <div class="datepicker-here" data-language="en"></div>
+                    </div>
+                </div>
+            </article>
+
+            <article>
+                <h1>Range</h1>
+                <div class="row">
+                    <div class="vt-tile">
+                        <h2>{range: true}</h2>
+                        <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" data-language="en" id="dp-3" data-range="true"></div>
+                        <script type="text/javascript">
+                            $('#dp-3').datepicker({
+                                onSelect: function (fd) {
+                                    log(fd)
+                                }
+                            })
+                        </script>
+                    </div>
+                    <div class="vt-tile">
+                        <h2>{range: true, onSelect: ...}</h2>
+                        <input class="datepicker-here" data-language="en" id="dp-4" data-range="true"/>
+                        <script type="text/javascript">
+                            $('#dp-4').datepicker({
+                                onSelect: function (fd) {
+                                    log(fd)
+                                }
+                            })
+                        </script>
+                    </div>
+                </div>
+            </article>
+
+            <article>
+                <h1>Timepicker</h1>
+                <div class="row">
+                    <div class="vt-tile">
+                        <h2>{timepicker: true}</h2>
+                        <div 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-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)
+                                }
+                            })
+                        </script>
+                    </div>
+                    <div class="vt-tile">
+                        <h2>{timepicker: true}</h2>
+                        <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>
+
+        </div>
+    </body>
+</html>