Merge pull request #1 from gbm001/fix_seconds

fix: Fix display of seconds between 0 and 9.
2026-01-14 11:01:22 +08:00 · 2019-03-14 20:59:49 +05:30 · 2019-01-21 17:11:52 +00:00 · 2016-12-31 21:23:00 +05:30
9 changed files with 221 additions and 161 deletions
--- a/dist/css/datepicker.css
+++ b/dist/css/datepicker.css
@ -18,31 +18,46 @@
    background: none;
    border: none; }

+.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
+  color: #dedede; }
+  .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
+    color: #c5c5c5; }
+  .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
+    color: #dedede; }
+  .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
+    color: #fff;
+    background: #a2ddf6; }
+    .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
+      background: #8ad5f4; }
+  .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
+    background-color: rgba(92, 196, 239, 0.1);
+    color: #cccccc; }
+    .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
+      background-color: rgba(92, 196, 239, 0.2); }
+  .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
+    background: none;
+    border: none; }
+
 /* -------------------------------------------------
    Datepicker cells
   ------------------------------------------------- */
 .datepicker--cells {
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap; }
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap; }

 .datepicker--cell {
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
  height: 32px;
  z-index: 1; }
  .datepicker--cell.-focus- {
@ -91,28 +106,22 @@
    cursor: default; }

 .datepicker--days-names {
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
  margin: 8px 0 3px; }

 .datepicker--day-name {
  color: #FF9A19;
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex: 1;
+      flex: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: .8em; }
@ -181,29 +190,20 @@
  position: absolute;
  left: -100000px;
  opacity: 0;
-  transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
-  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
  z-index: 100; }
  .datepicker.-from-top- {
-    -webkit-transform: translateY(-8px);
-            transform: translateY(-8px); }
+    transform: translateY(-8px); }
  .datepicker.-from-right- {
-    -webkit-transform: translateX(8px);
-            transform: translateX(8px); }
+    transform: translateX(8px); }
  .datepicker.-from-bottom- {
-    -webkit-transform: translateY(8px);
-            transform: translateY(8px); }
+    transform: translateY(8px); }
  .datepicker.-from-left- {
-    -webkit-transform: translateX(-8px);
-            transform: translateX(-8px); }
+    transform: translateX(-8px); }
  .datepicker.active {
    opacity: 1;
-    -webkit-transform: translate(0);
-            transform: translate(0);
-    transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
-    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
-    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
+    transform: translate(0);
+    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; }

 .datepicker-inline .datepicker {
  border-color: #d7d7d7;
@ -212,8 +212,7 @@
  left: auto;
  right: auto;
  opacity: 1;
-  -webkit-transform: none;
-          transform: none; }
+  transform: none; }

 .datepicker-inline .datepicker--pointer {
  display: none; }
@ -234,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 {
@ -290,12 +285,10 @@
    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; }
@ -304,16 +297,13 @@

 .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;
@ -348,7 +338,6 @@
    background: none; }

 .datepicker--buttons {
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px;
@ -358,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;
@ -400,26 +385,22 @@
   ------------------------------------------------- */
 .datepicker--time {
  border-top: 1px solid #efefef;
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
  padding: 4px;
  position: relative; }
  .datepicker--time.-am-pm- .datepicker--time-sliders {
-    -webkit-flex: 0 1 138px;
-        -ms-flex: 0 1 138px;
-            flex: 0 1 138px;
+    -ms-flex: 0 1 138px;
+        flex: 0 1 138px;
    max-width: 138px; }
  .-only-timepicker- .datepicker--time {
    border-top: none; }

 .datepicker--time-sliders {
-  -webkit-flex: 0 1 153px;
-      -ms-flex: 0 1 153px;
-          flex: 0 1 153px;
+  -ms-flex: 0 1 153px;
+      flex: 0 1 153px;
  margin-right: 10px;
  max-width: 153px; }

@ -428,32 +409,31 @@
  font-size: 12px; }

 .datepicker--time-current {
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex: 1;
+      flex: 1;
  font-size: 14px;
  text-align: center;
-  margin: 0 0 0 10px; }
+  margin: 0 10px; }

 .datepicker--time-current-colon {
  margin: 0 2px 3px;
  line-height: 1; }

 .datepicker--time-current-hours,
-.datepicker--time-current-minutes {
+.datepicker--time-current-minutes,
+.datepicker--time-current-seconds {
  line-height: 1;
-  font-size: 19px;
+  font-size: 14px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  position: relative;
  z-index: 1; }
  .datepicker--time-current-hours:after,
-  .datepicker--time-current-minutes:after {
+  .datepicker--time-current-minutes:after,
+  .datepicker--time-current-seconds:after {
    content: '';
    background: #f0f0f0;
    border-radius: 4px;
@ -465,26 +445,24 @@
    z-index: -1;
    opacity: 0; }
  .datepicker--time-current-hours.-focus-:after,
-  .datepicker--time-current-minutes.-focus-:after {
+  .datepicker--time-current-minutes.-focus-:after,
+  .datepicker--time-current-seconds.-focus-:after {
    opacity: 1; }

 .datepicker--time-current-ampm {
  text-transform: uppercase;
-  -webkit-align-self: flex-end;
-      -ms-flex-item-align: end;
-          align-self: flex-end;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
  color: #9c9c9c;
  margin-left: 6px;
  font-size: 11px;
  margin-bottom: 1px; }

 .datepicker--time-row {
-  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
  font-size: 11px;
  height: 17px;
  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
@ -493,9 +471,8 @@
  .datepicker--time-row input[type='range'] {
    background: none;
    cursor: pointer;
-    -webkit-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    -ms-flex: 1;
+        flex: 1;
    height: 100%;
    padding: 0;
    margin: 0;
@ -593,30 +570,9 @@
    width: 1px;
    left: calc(50% - 1px);
    top: calc(50% + 1px);
-    -webkit-transform: translateY(-100%);
-            transform: translateY(-100%); }
+    transform: translateY(-100%); }
  .datepicker--time-icon:before {
    width: .4em;
    height: 1px;
    top: calc(50% + 1px);
    left: calc(50% - 1px); }
-
-.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
-  color: #dedede; }
-  .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
-    color: #c5c5c5; }
-  .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
-    color: #dedede; }
-  .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
-    color: #fff;
-    background: #a2ddf6; }
-    .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
-      background: #8ad5f4; }
-  .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
-    background-color: rgba(92, 196, 239, 0.1);
-    color: #cccccc; }
-    .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
-      background-color: rgba(92, 196, 239, 0.2); }
-  .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
-    background: none;
-    border: none; }
--- a/dist/css/datepicker.min.css
+++ b/dist/css/datepicker.min.css
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@ -70,8 +70,11 @@
            maxHours: 24,
            minMinutes: 0,
            maxMinutes: 59,
+            minSeconds: 0,
+            maxSeconds: 59,
            hoursStep: 1,
            minutesStep: 1,
+            secondsStep: 1,

            // events
            onSelect: '',
@ -302,7 +305,8 @@
                    parsedSelected.month,
                    parsedSelected.date,
                    parsedSelected.hours,
-                    parsedSelected.minutes
+                    parsedSelected.minutes,
+                    parsedSelected.seconds
                );

                formattedDates = selectedDates.map(function (date) {
@ -318,11 +322,11 @@
                        parsedDate.month,
                        parsedDate.date,
                        parsedDate.hours,
-                        parsedDate.minutes
+                        parsedDate.minutes,
+                        parsedDate.seconds
                    );
                })
            }
-
            this._prevOnSelectValue = formattedDates;
            this.opts.onSelect(formattedDates, dates, this);
        },
@ -410,6 +414,10 @@
                    result = replacer(result, boundary('MM'), this.loc.months[d.month]);
                case /M/.test(result):
                    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):
@ -477,6 +485,7 @@
            if (this.timepicker) {
                date.setHours(this.timepicker.hours);
                date.setMinutes(this.timepicker.minutes)
+                date.setSeconds(this.timepicker.seconds)
            }

            if (_this.view == 'days') {
@ -644,6 +653,7 @@
                if (lastSelectedDate) {
                    lastSelectedDate.setHours(this.timepicker.hours);
                    lastSelectedDate.setMinutes(this.timepicker.minutes);
+                    lastSelectedDate.setSeconds(this.timepicker.seconds);
                }
            }

@ -1187,6 +1197,7 @@
                            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);
                            return;
@ -1248,7 +1259,7 @@
            this.silent = false;
        },

-        _onTimeChange: function (e, h, m) {
+        _onTimeChange: function (e, h, m, s) {
            var date = new Date(),
                selectedDates = this.selectedDates,
                selected = false;
@ -1260,6 +1271,7 @@

            date.setHours(h);
            date.setMinutes(m);
+            date.setSeconds(s);

            if (!selected && !this._getCell(date).hasClass('-disabled-')) {
                this.selectDate(date);
@ -1275,6 +1287,7 @@
            if (this.timepicker) {
                date.setHours(this.timepicker.hours);
                date.setMinutes(this.timepicker.minutes);
+                date.setSeconds(this.timepicker.seconds)
            }
            this.selectDate(date);
        },
@ -1398,7 +1411,9 @@
            hours: date.getHours(),
            fullHours:  date.getHours() < 10 ? '0' + date.getHours() :  date.getHours() ,
            minutes: date.getMinutes(),
-            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes()
+            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes(),
+            seconds: date.getSeconds(),
+            fullSeconds:  date.getSeconds() < 10 ? '0' + date.getSeconds() :  date.getSeconds()
        }
    };

@ -1956,6 +1971,8 @@
        '   <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">' +
@ -1964,6 +1981,9 @@
        '   <div class="datepicker--time-row">' +
        '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
        '   </div>' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
+        '   </div>' +
        '</div>' +
        '</div>',
        datepicker = $.fn.datepicker,
@ -1999,6 +2019,7 @@
            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;
        },

        /**
@ -2010,6 +2031,7 @@
        _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
@ -2023,6 +2045,7 @@
        _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()) {
@ -2034,12 +2057,15 @@
        _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;
        },

        /**
@ -2059,6 +2085,12 @@
            } else if (this.minutes > this.maxMinutes) {
                this.minutes = this.maxMinutes;
            }
+
+            if (this.seconds < this.minSeconds) {
+                this.seconds = this.minSeconds;
+            } else if (this.seconds > this.maxSeconds) {
+                this.seconds = this.maxSeconds;
+            }
        },

        _buildHTML: function () {
@ -2072,7 +2104,11 @@
                    minMin: this.minMinutes,
                    minMax: lz(this.maxMinutes),
                    minStep: this.opts.minutesStep,
-                    minValue: lz(this.minutes)
+                    minValue: lz(this.minutes),
+                    secMin: this.minSeconds,
+                    secMax: lz(this.maxSeconds),
+                    secStep: this.opts.secondsStep,
+                    secValue: lz(this.seconds)
                },
                _template = dp.template(template, data);

@ -2080,8 +2116,10 @@
            this.$ranges = $('[type="range"]', this.$timepicker);
            this.$hours = $('[name="hours"]', this.$timepicker);
            this.$minutes = $('[name="minutes"]', this.$timepicker);
+            this.$seconds = $('[name="seconds"]', this.$timepicker);
            this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
            this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
+            this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);

            if (this.d.ampm) {
                this.$ampm = $('<span class="datepicker--time-current-ampm">')
@ -2094,10 +2132,12 @@

        _updateCurrentTime: function () {
            var h =  dp.getLeadingZeroNum(this.displayHours),
-                m = dp.getLeadingZeroNum(this.minutes);
+                m = dp.getLeadingZeroNum(this.minutes),
+                s = dp.getLeadingZeroNum(this.seconds);

            this.$hoursText.html(h);
            this.$minutesText.html(m);
+            this.$secondsText.html(s);

            if (this.d.ampm) {
                this.$ampm.html(this.dayPeriod);
@ -2113,7 +2153,12 @@
            this.$minutes.attr({
                min: this.minMinutes,
                max: this.maxMinutes
-            }).val(this.minutes)
+            }).val(this.minutes);
+            
+            this.$seconds.attr({
+                min: this.minSeconds,
+                max: this.maxSeconds
+            }).val(this.seconds);
        },

        /**
@ -2206,7 +2251,7 @@

            this[name] = $target.val();
            this._updateCurrentTime();
-            this.d._trigger('timeChange', [this.hours, this.minutes]);
+            this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);

            this._handleDate(this.d.lastSelectedDate);
            this.update()
--- a/dist/js/datepicker.min.js
+++ b/dist/js/datepicker.min.js
--- a/docs/css/style.css
+++ b/docs/css/style.css
--- a/src/js/datepicker.js
+++ b/src/js/datepicker.js
@ -70,8 +70,11 @@
            maxHours: 24,
            minMinutes: 0,
            maxMinutes: 59,
+            minSeconds: 0,
+            maxSeconds: 59,
            hoursStep: 1,
            minutesStep: 1,
+            secondsStep: 1,

            // events
            onSelect: '',
@ -302,7 +305,8 @@
                    parsedSelected.month,
                    parsedSelected.date,
                    parsedSelected.hours,
-                    parsedSelected.minutes
+                    parsedSelected.minutes,
+                    parsedSelected.seconds
                );

                formattedDates = selectedDates.map(function (date) {
@ -318,11 +322,11 @@
                        parsedDate.month,
                        parsedDate.date,
                        parsedDate.hours,
-                        parsedDate.minutes
+                        parsedDate.minutes,
+                        parsedDate.seconds
                    );
                })
            }
-
            this._prevOnSelectValue = formattedDates;
            this.opts.onSelect(formattedDates, dates, this);
        },
@ -410,6 +414,10 @@
                    result = replacer(result, boundary('MM'), this.loc.months[d.month]);
                case /M/.test(result):
                    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):
@ -477,6 +485,7 @@
            if (this.timepicker) {
                date.setHours(this.timepicker.hours);
                date.setMinutes(this.timepicker.minutes)
+                date.setSeconds(this.timepicker.seconds)
            }

            if (_this.view == 'days') {
@ -644,6 +653,7 @@
                if (lastSelectedDate) {
                    lastSelectedDate.setHours(this.timepicker.hours);
                    lastSelectedDate.setMinutes(this.timepicker.minutes);
+                    lastSelectedDate.setSeconds(this.timepicker.seconds);
                }
            }

@ -1187,6 +1197,7 @@
                            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);
                            return;
@ -1248,7 +1259,7 @@
            this.silent = false;
        },

-        _onTimeChange: function (e, h, m) {
+        _onTimeChange: function (e, h, m, s) {
            var date = new Date(),
                selectedDates = this.selectedDates,
                selected = false;
@ -1260,6 +1271,7 @@

            date.setHours(h);
            date.setMinutes(m);
+            date.setSeconds(s);

            if (!selected && !this._getCell(date).hasClass('-disabled-')) {
                this.selectDate(date);
@ -1275,6 +1287,7 @@
            if (this.timepicker) {
                date.setHours(this.timepicker.hours);
                date.setMinutes(this.timepicker.minutes);
+                date.setSeconds(this.timepicker.seconds)
            }
            this.selectDate(date);
        },
@ -1398,7 +1411,9 @@
            hours: date.getHours(),
            fullHours:  date.getHours() < 10 ? '0' + date.getHours() :  date.getHours() ,
            minutes: date.getMinutes(),
-            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes()
+            fullMinutes:  date.getMinutes() < 10 ? '0' + date.getMinutes() :  date.getMinutes(),
+            seconds: date.getSeconds(),
+            fullSeconds:  date.getSeconds() < 10 ? '0' + date.getSeconds() :  date.getSeconds()
        }
    };

--- a/src/js/timepicker.js
+++ b/src/js/timepicker.js
@ -4,6 +4,8 @@
        '   <span class="datepicker--time-current-hours">#{hourVisible}</span>' +
        '   <span class="datepicker--time-current-colon">:</span>' +
        '   <span class="datepicker--time-current-minutes">#{minValue}</span>' +
+        '   <span class="datepicker--time-current-colon">:</span>' +
+        '   <span class="datepicker--time-current-seconds">#{secValue}</span>' +
        '</div>' +
        '<div class="datepicker--time-sliders">' +
        '   <div class="datepicker--time-row">' +
@ -12,6 +14,9 @@
        '   <div class="datepicker--time-row">' +
        '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
        '   </div>' +
+        '   <div class="datepicker--time-row">' +
+        '      <input type="range" name="seconds" value="#{secValue}" min="#{secMin}" max="#{secMax}" step="#{secStep}"/>' +
+        '   </div>' +
        '</div>' +
        '</div>',
        datepicker = $.fn.datepicker,
@ -47,6 +52,7 @@
            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;
        },

        /**
@ -58,6 +64,7 @@
        _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
@ -71,6 +78,7 @@
        _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()) {
@ -82,12 +90,15 @@
        _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;
        },

        /**
@ -107,6 +118,12 @@
            } else if (this.minutes > this.maxMinutes) {
                this.minutes = this.maxMinutes;
            }
+
+            if (this.seconds < this.minSeconds) {
+                this.seconds = this.minSeconds;
+            } else if (this.seconds > this.maxSeconds) {
+                this.seconds = this.maxSeconds;
+            }
        },

        _buildHTML: function () {
@ -120,7 +137,11 @@
                    minMin: this.minMinutes,
                    minMax: lz(this.maxMinutes),
                    minStep: this.opts.minutesStep,
-                    minValue: lz(this.minutes)
+                    minValue: lz(this.minutes),
+                    secMin: this.minSeconds,
+                    secMax: lz(this.maxSeconds),
+                    secStep: this.opts.secondsStep,
+                    secValue: lz(this.seconds)
                },
                _template = dp.template(template, data);

@ -128,8 +149,10 @@
            this.$ranges = $('[type="range"]', this.$timepicker);
            this.$hours = $('[name="hours"]', this.$timepicker);
            this.$minutes = $('[name="minutes"]', this.$timepicker);
+            this.$seconds = $('[name="seconds"]', this.$timepicker);
            this.$hoursText = $('.datepicker--time-current-hours', this.$timepicker);
            this.$minutesText = $('.datepicker--time-current-minutes', this.$timepicker);
+            this.$secondsText = $('.datepicker--time-current-seconds', this.$timepicker);

            if (this.d.ampm) {
                this.$ampm = $('<span class="datepicker--time-current-ampm">')
@ -142,10 +165,12 @@

        _updateCurrentTime: function () {
            var h =  dp.getLeadingZeroNum(this.displayHours),
-                m = dp.getLeadingZeroNum(this.minutes);
+                m = dp.getLeadingZeroNum(this.minutes),
+                s = dp.getLeadingZeroNum(this.seconds);

            this.$hoursText.html(h);
            this.$minutesText.html(m);
+            this.$secondsText.html(s);

            if (this.d.ampm) {
                this.$ampm.html(this.dayPeriod);
@ -161,7 +186,12 @@
            this.$minutes.attr({
                min: this.minMinutes,
                max: this.maxMinutes
-            }).val(this.minutes)
+            }).val(this.minutes);
+            
+            this.$seconds.attr({
+                min: this.minSeconds,
+                max: this.maxSeconds
+            }).val(this.seconds);
        },

        /**
@ -254,7 +284,7 @@

            this[name] = $target.val();
            this._updateCurrentTime();
-            this.d._trigger('timeChange', [this.hours, this.minutes]);
+            this.d._trigger('timeChange', [this.hours, this.minutes, this.seconds]);

            this._handleDate(this.d.lastSelectedDate);
            this.update()
--- a/src/sass/timepicker.scss
+++ b/src/sass/timepicker.scss
@ -94,7 +94,7 @@ $rangeThumbBg: #dedede;
  flex: 1;
  font-size: 14px;
  text-align: center;
-  margin: 0 0 0 10px;
+  margin: 0 10px;
 }

 .datepicker--time-current-colon {
@ -103,9 +103,10 @@ $rangeThumbBg: #dedede;
 }

 .datepicker--time-current-hours,
-.datepicker--time-current-minutes {
+.datepicker--time-current-minutes,
+.datepicker--time-current-seconds {
  line-height: 1;
-  font-size: 19px;
+  font-size: 14px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  position: relative;
  z-index: 1;
@ -132,7 +133,7 @@ $rangeThumbBg: #dedede;

 .datepicker--time-current-ampm {
  text-transform: uppercase;
-  align-self: flex-end;
+  align-self: flex-start;
  color: map_get($datepickerTextColor, navArrows);
  margin-left: 6px;
  font-size: 11px;
--- a/visual-tests.html
+++ b/visual-tests.html
@ -3,8 +3,9 @@
    <head>
        <meta charset="UTF-8">
        <title>Air datepicker visual tests</title>
-        <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
+        <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="dist/js/datepicker.js"></script>
+        <script type="text/javascript" src="dist/js/i18n/datepicker.en.js"></script>
        <link rel="stylesheet" href="dist/css/datepicker.css"/>
        <link rel="stylesheet" href="docs/css/style.css"/>
        <script type="text/javascript">
@ -31,7 +32,7 @@
                <div class="row">
                    <div class="vt-tile">
                        <h2>Default</h2>
-                        <div class="datepicker-here"></div>
+                        <div class="datepicker-here" data-language="en"></div>
                    </div>
                </div>
            </article>
@ -41,11 +42,11 @@
                <div class="row">
                    <div class="vt-tile">
                        <h2>{range: true}</h2>
-                        <div class="datepicker-here" data-range="true"></div>
+                        <div class="datepicker-here" data-language="en" data-range="true"></div>
                    </div>
                    <div class="vt-tile">
                        <h2>{range: true, onSelect: ...}</h2>
-                        <div class="datepicker-here" id="dp-3" data-range="true"></div>
+                        <div class="datepicker-here" data-language="en" id="dp-3" data-range="true"></div>
                        <script type="text/javascript">
                            $('#dp-3').datepicker({
                                onSelect: function (fd) {
@ -56,7 +57,7 @@
                    </div>
                    <div class="vt-tile">
                        <h2>{range: true, onSelect: ...}</h2>
-                        <input class="datepicker-here" id="dp-4" data-range="true"/>
+                        <input class="datepicker-here" data-language="en" id="dp-4" data-range="true"/>
                        <script type="text/javascript">
                            $('#dp-4').datepicker({
                                onSelect: function (fd) {
@ -73,17 +74,29 @@
                <div class="row">
                    <div class="vt-tile">
                        <h2>{timepicker: true}</h2>
-                        <div class="datepicker-here" data-timepicker="true"></div>
+                        <div id="test" class="datepicker-here" data-language="en" data-timepicker="true"></div>
+                        <script type="text/javascript">
+                            $('#test').datepicker({
+                                toggleSelected: false,
+                                inline: true,
+                                timeFormat: 'hh:ii:ss',
+                                onSelect: function (fd) {
+                                    console.log(arguments)
+                                    log(fd)
+                                }
+                            })
+                        </script>
                    </div>
                    <div class="vt-tile">
                        <h2>{onChange: ..., toggleSelected: false, range: true}</h2>
-                        <input id="dp-5" class="datepicker-here" data-timepicker="true" />
+                        <input id="dp-5" class="datepicker-here" data-language="en" data-timepicker="true" />
                        <script type="text/javascript">
                            $('#dp-5').datepicker({
                                toggleSelected: false,
                                inline: true,
                                range: true,
                                onSelect: function (fd) {
+                                    console.log(arguments)
                                    log(fd)
                                }
                            })
@ -91,11 +104,11 @@
                    </div>
                    <div class="vt-tile">
                        <h2>{timepicker: true}</h2>
-                        <input class="datepicker-here" data-timepicker="true" />
+                        <input class="datepicker-here" data-language="en" data-timepicker="true" />
                    </div>
                    <div class="vt-tile">
                        <h2>{timepicker: true, minDate: new Date()}</h2>
-                        <input class="datepicker-here" id="dp-6"/>
+                        <input class="datepicker-here" data-language="en" id="dp-6"/>
                        <script type="text/javascript">
                            $('#dp-6').datepicker({
                                minDate: new Date(),
Author	SHA1	Message	Date
Faris Ansari	ed37b94d95	Merge pull request #1 from gbm001/fix_seconds fix: Fix display of seconds between 0 and 9.	2019-03-14 20:59:49 +05:30
Andrew McLeod	e5307a4037	fix: Fix display of seconds between 0 and 9.	2019-01-21 17:11:52 +00:00
Faris Ansari	7911fb1de7	added seconds in timepicker	2016-12-31 21:23:00 +05:30