add current time

This commit is contained in:
t1m0n 2016-01-26 15:43:34 +03:00
parent 36090db009
commit 97d0402721
6 changed files with 40 additions and 5 deletions

View File

@ -392,12 +392,18 @@
Timepicker
------------------------------------------------- */
.datepicker--time {
padding: 4px; }
padding: 4px;
position: relative; }
.datepicker--time-label {
display: block;
font-size: 12px; }
.datepicker--time-current {
font-size: 12px;
position: absolute;
right: 4px; }
.datepicker--time-row {
display: -webkit-flex;
display: -ms-flexbox;

File diff suppressed because one or more lines are too long

13
dist/js/datepicker.js vendored
View File

@ -1717,7 +1717,8 @@ var Datepicker;
(function (window, $, datepicker) {
var template = '<div class="datepicker--time">' +
' <label class="datepicker--time-label">#{hourLabel}</label>' +
'<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
'<label class="datepicker--time-label">#{hourLabel}</label>' +
'<div class="datepicker--time-row">' +
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
'</div>' +
@ -1767,9 +1768,18 @@ var Datepicker;
this.$timepicker = $(_template).appendTo(this.d.$datepicker);
this.$ranges = $('[type="range"]', this.$timepicker);
this.$currentTime = $('.datepicker--time-current', this.$timepicker);
},
_render: function () {
},
_updateTime: function () {
var h = this.hours < 10 ? '0'+this.hours : this.hours,
m = this.minutes < 10 ? '0' + this.minutes : this.minutes,
html = h + ':' + m;
this.$currentTime.html(html);
},
_onChangeRange: function (e) {
@ -1778,6 +1788,7 @@ var Datepicker;
name = $target.attr('name');
this[name] = value;
this._updateTime();
this.d._trigger('timeChange', [this.hours, this.minutes])
}
};

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,7 @@
(function (window, $, datepicker) {
var template = '<div class="datepicker--time">' +
' <label class="datepicker--time-label">#{hourLabel}</label>' +
'<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
'<label class="datepicker--time-label">#{hourLabel}</label>' +
'<div class="datepicker--time-row">' +
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
'</div>' +
@ -50,9 +51,18 @@
this.$timepicker = $(_template).appendTo(this.d.$datepicker);
this.$ranges = $('[type="range"]', this.$timepicker);
this.$currentTime = $('.datepicker--time-current', this.$timepicker);
},
_render: function () {
},
_updateTime: function () {
var h = this.hours < 10 ? '0'+this.hours : this.hours,
m = this.minutes < 10 ? '0' + this.minutes : this.minutes,
html = h + ':' + m;
this.$currentTime.html(html);
},
_onChangeRange: function (e) {
@ -61,6 +71,7 @@
name = $target.attr('name');
this[name] = value;
this._updateTime();
this.d._trigger('timeChange', [this.hours, this.minutes])
}
};

View File

@ -6,6 +6,7 @@
.datepicker--time {
padding: $datepickerPadding;
position: relative;
}
.datepicker--time-label {
@ -13,6 +14,12 @@
font-size: 12px;
}
.datepicker--time-current {
font-size: 12px;
position: absolute;
right: $datepickerPadding;
}
.datepicker--time-row {
display: flex;
align-items: center;