mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
add current time
This commit is contained in:
parent
36090db009
commit
97d0402721
8
dist/css/datepicker.css
vendored
8
dist/css/datepicker.css
vendored
@ -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;
|
||||
|
||||
2
dist/css/datepicker.min.css
vendored
2
dist/css/datepicker.min.css
vendored
File diff suppressed because one or more lines are too long
13
dist/js/datepicker.js
vendored
13
dist/js/datepicker.js
vendored
@ -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])
|
||||
}
|
||||
};
|
||||
|
||||
2
dist/js/datepicker.min.js
vendored
2
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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])
|
||||
}
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user