added onlyTimepicker option, closes #102, #75, #108

dist/css/datepicker.css

@@ -221,6 +221,8 @@
 .datepicker--content {
   box-sizing: content-box;
   padding: 4px; }
+  .-only-timepicker- .datepicker--content {
+    display: none; }
 
 .datepicker--pointer {
   position: absolute;
@@ -297,6 +299,8 @@
   border-bottom: 1px solid #efefef;
   min-height: 32px;
   padding: 4px; }
+  .-only-timepicker- .datepicker--nav {
+    display: none; }
 
 .datepicker--nav-title,
 .datepicker--nav-action {
@@ -409,6 +413,8 @@
         -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;

dist/js/datepicker.js

@@ -65,7 +65,7 @@
 
             // timepicker
             timepicker: false,
-            onlyTimePicker: false,
+            onlyTimepicker: false,
             dateTimeSeparator: ' ',
             timeFormat: '',
             minHours: 0,
@@ -161,7 +161,7 @@
                     this._setPositionClasses(this.opts.position);
                     this._bindEvents()
                 }
-                if (this.opts.keyboardNav && !this.opts.onlyTimePicker) {
+                if (this.opts.keyboardNav && !this.opts.onlyTimepicker) {
                     this._bindKeyboardEvents();
                 }
                 this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
@@ -177,7 +177,7 @@
                 this._bindTimepickerEvents();
             }
 
-            if (this.opts.onlyTimePicker) {
+            if (this.opts.onlyTimepicker) {
                 this.$datepicker.addClass('-only-timepicker-');
             }
 
@@ -250,7 +250,7 @@
                 this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
             }
 
-            if (this.opts.onlyTimePicker) {
+            if (this.opts.onlyTimepicker) {
                 this.loc.dateFormat = this.loc.timeFormat;
             }
 
@@ -610,7 +610,7 @@
             this._syncWithMinMaxDates();
             this._defineLocale(this.opts.language);
             this.nav._addButtonsIfNeed();
-            this.nav._render();
+            if (!this.opts.onlyTimepicker) this.nav._render();
             this.views[this.currentView]._render();
 
             if (this.elIsInput && !this.opts.inline) {
@@ -624,6 +624,10 @@
                 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();
@@ -1479,8 +1483,9 @@
         this.d = d;
         this.type = type;
         this.opts = opts;
+        this.$el = $('');
 
-        if (this.opts.onlyTimePicker) return;
+        if (this.opts.onlyTimepicker) return;
         this.init();
     };
 
@@ -1702,7 +1707,7 @@
         },
 
         _render: function () {
-            if (this.opts.onlyTimePicker) return;
+            if (this.opts.onlyTimepicker) return;
             this._renderTypes[this.type].bind(this)();
         },
 
@@ -1721,7 +1726,7 @@
         },
 
         show: function () {
-            if (this.opts.onlyTimePicker) return;
+            if (this.opts.onlyTimepicker) return;
             this.$el.addClass('active');
             this.acitve = true;
         },
@@ -1815,7 +1820,7 @@
         },
 
         _buildBaseHtml: function () {
-            if (!this.opts.onlyTimePicker) {
+            if (!this.opts.onlyTimepicker) {
                 this._render();
             }
             this._addButtonsIfNeed();

src/js/body.js

@@ -21,8 +21,9 @@
         this.d = d;
         this.type = type;
         this.opts = opts;
+        this.$el = $('');
 
-        if (this.opts.onlyTimePicker) return;
+        if (this.opts.onlyTimepicker) return;
         this.init();
     };
 
@@ -244,7 +245,7 @@
         },
 
         _render: function () {
-            if (this.opts.onlyTimePicker) return;
+            if (this.opts.onlyTimepicker) return;
             this._renderTypes[this.type].bind(this)();
         },
 
@@ -263,7 +264,7 @@
         },
 
         show: function () {
-            if (this.opts.onlyTimePicker) return;
+            if (this.opts.onlyTimepicker) return;
             this.$el.addClass('active');
             this.acitve = true;
         },

src/js/datepicker.js

@@ -65,7 +65,7 @@
 
             // timepicker
             timepicker: false,
-            onlyTimePicker: false,
+            onlyTimepicker: false,
             dateTimeSeparator: ' ',
             timeFormat: '',
             minHours: 0,
@@ -161,7 +161,7 @@
                     this._setPositionClasses(this.opts.position);
                     this._bindEvents()
                 }
-                if (this.opts.keyboardNav && !this.opts.onlyTimePicker) {
+                if (this.opts.keyboardNav && !this.opts.onlyTimepicker) {
                     this._bindKeyboardEvents();
                 }
                 this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
@@ -177,7 +177,7 @@
                 this._bindTimepickerEvents();
             }
 
-            if (this.opts.onlyTimePicker) {
+            if (this.opts.onlyTimepicker) {
                 this.$datepicker.addClass('-only-timepicker-');
             }
 
@@ -250,7 +250,7 @@
                 this.loc.dateFormat = [this.loc.dateFormat, this.loc.timeFormat].join(this.opts.dateTimeSeparator);
             }
 
-            if (this.opts.onlyTimePicker) {
+            if (this.opts.onlyTimepicker) {
                 this.loc.dateFormat = this.loc.timeFormat;
             }
 
@@ -610,7 +610,7 @@
             this._syncWithMinMaxDates();
             this._defineLocale(this.opts.language);
             this.nav._addButtonsIfNeed();
-            this.nav._render();
+            if (!this.opts.onlyTimepicker) this.nav._render();
             this.views[this.currentView]._render();
 
             if (this.elIsInput && !this.opts.inline) {
@@ -624,6 +624,10 @@
                 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();

src/js/navigation.js

@@ -30,7 +30,7 @@
         },
 
         _buildBaseHtml: function () {
-            if (!this.opts.onlyTimePicker) {
+            if (!this.opts.onlyTimepicker) {
                 this._render();
             }
             this._addButtonsIfNeed();

src/sass/datepicker.scss

@@ -70,6 +70,10 @@
 .datepicker--content {
   box-sizing: content-box;
   padding: $datepickerPadding;
+
+  .-only-timepicker- & {
+    display: none;
+  }
 }
 
 //  Pointer

src/sass/navigation.scss

@@ -10,6 +10,10 @@
   border-bottom: 1px solid map_get($datepickerBorderColor, nav);
   min-height: $datepickerNavigationHeight;
   padding: $datepickerPadding;
+
+  .-only-timepicker- & {
+    display: none;
+  }
 }
 
 .datepicker--nav-title,

src/sass/timepicker.scss

@@ -71,6 +71,10 @@ $rangeThumbBg: #dedede;
       max-width: 138px;
     }
   }
+
+  .-only-timepicker- & {
+    border-top: none;
+  }
 }
 
 .datepicker--time-sliders {

tests/specs/options.js

@@ -856,6 +856,26 @@ describe('Options', function () {
         })
     });
 
+    describe('onlyTimepicker', function () {
+        it('only timepicker should be visible', function () {
+            dp = $input.datepicker({
+                timepicker: true,
+                onlyTimepicker: true
+            }).data('datepicker');
+
+            var $time = $('.datepicker--time', dp.$datepicker),
+                $cells = $('.datepicker--cells', dp.$datepicker),
+                $nav = $('.datepicker--nav-title', dp.$datepicker),
+                _class = dp.$datepicker.hasClass('-only-timepicker-');
+
+            expect($time).to.have.length(1);
+            expect($cells).to.have.length(0);
+            expect($nav).to.have.length(0);
+            expect(_class).to.be.equal(true);
+
+        })
+    });
+
     describe('dateTimeSeparator', function () {
         it('should define separator between date string and time', function () {
             var date = new Date(2016,2,9,11,24);