added onlyTimepicker option, closes t1m0n#102, t1m0n#75, t1m0n#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);