jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

now can change value in text inputs

Browse Source
This commit is contained in:
t1m0n 2016-01-28 12:02:41 +03:00
parent 0969257010
commit 476a18bef0
7 changed files with 314 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
dist/css/datepicker.css vendored
View File

@ -414,11 +414,34 @@
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-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 16px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center; }
.datepicker--time-current input[type='text'] {
box-sizing: content-box;
border: none;
padding: 0 3px;
margin: 0;
outline: none;
box-shadow: none;
font-size: 16px;
width: 18px;
height: 23px; }
.datepicker--time-current > {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
.datepicker--time-row {
display: -webkit-flex;

2
dist/css/datepicker.min.css vendored
View File

File diff suppressed because one or more lines are too long

142
dist/js/datepicker.js vendored
View File

@ -182,9 +182,11 @@ var Datepicker;
_bindEvents : function () {
this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
this.$el.on('blur.adp', this._onBlur.bind(this));
this.$el.on('input.adp', this._onInput.bind(this));
$(window).on('resize.adp', this._onResize.bind(this));
$('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
},
_bindKeyboardEvents: function () {
@ -950,11 +952,11 @@ var Datepicker;
_onMouseUpDatepicker: function (e) {
this.inFocus = false;
this.$el.focus()
e.originalEvent.inFocus = true;
if (!e.originalEvent.timepickerFocus) this.$el.focus();
},
_onInput: function () {
console.log(234);
var val = this.$el.val();
if (!val) {
@ -968,6 +970,18 @@ var Datepicker;
}
},
_onMouseUpBody: function (e) {
if (e.originalEvent.inFocus) return;
if (this.visible && !this.inFocus) {
this.hide();
}
},
_onMouseUpEl: function (e) {
e.originalEvent.inFocus = true;
},
_onKeyDown: function (e) {
var code = e.which;
this._registerKey(code);
@ -1727,8 +1741,13 @@ var Datepicker;
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
' </div>' +
'</div>' +
'<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
'</div>';
'<div class="datepicker--time-current">' +
' <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
' <span>:</span>' +
' <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
'</div>',
inputTimeout = 10;
datepicker.Timepicker = function (inst, opts) {
this.d = inst;
this.opts = opts;
@ -1736,6 +1755,8 @@ var Datepicker;
var date = this.d.parsedDate;
this.minutes = date.minutes;
this.hours = date.hours;
this._minutes = date.minutes;
this._hours = date.hours;
this.init();
};
@ -1750,6 +1771,11 @@ var Datepicker;
}
this.$ranges.on(input, this._onChangeRange.bind(this));
this.$currentInputs.on('mouseup', this._onMouseUpInput.bind(this));
this.$currentInputs.on('keydown', this._onKeyPressInput.bind(this));
this.$currentInputs.on('input', this._onInputInput.bind(this));
this.$currentInputs.on('blur', this._onBlurInput.bind(this));
this.$currentInputs.on('paste', this._onPasteInput.bind(this));
},
_buildHTML: function () {
@ -1758,12 +1784,12 @@ var Datepicker;
hourMin: '00',
hourMax: '23',
hourStep: '1',
hourValue: date.hours,
hourValue: date.fullHours,
hourLabel: 'Часы',
minMin: '00',
minMax: '59',
minStep: '1',
minValue: date.minutes,
minValue: date.fullMinutes,
minLabel: 'Минуты'
},
_template = datepicker.template(template, data);
@ -1771,6 +1797,9 @@ var Datepicker;
this.$timepicker = $(_template).appendTo(this.d.$datepicker);
this.$ranges = $('[type="range"]', this.$timepicker);
this.$currentTime = $('.datepicker--time-current', this.$timepicker);
this.$currentInputs = $('input[type="text"]', this.$timepicker);
this.$hoursText = $('[name="hours-current"]', this.$timepicker);
this.$minutesText = $('[name="minutes-current"]', this.$timepicker);
},
_render: function () {
@ -1781,7 +1810,9 @@ var Datepicker;
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);
this.$hoursText.val(h);
this.$minutesText.val(m)
},
_onChangeRange: function (e) {
@ -1792,6 +1823,103 @@ var Datepicker;
this[name] = value;
this._updateTime();
this.d._trigger('timeChange', [this.hours, this.minutes])
},
_onMouseUpInput: function (e) {
e.originalEvent.inFocus = true;
e.originalEvent.timepickerFocus = true;
},
_onKeyPressInput: function (e) {
var $el = $(e.target),
field = $el.data('field'),
max = $el.data('max'),
_this = this,
charCode = e.which,
action = $el.data('action'),
parsedVal,
initialValue = $el.val(),
val = $el.val();
setTimeout(function () {
val = $el.val();
parsedVal = parseInt(val);
if (parsedVal > max) {
$el.val(initialValue);
return;
}
if (val.length == 2) {
if (action == 'next' && charCode >= 48 && charCode <= 57) {
_this.$minutesText.focus().select();
}
}
if (!val.length) {
if (action == 'prev' && charCode == 8) {
_this.$hoursText.focus();
_this.$hoursText[0].selectionStart = 2;
_this.$hoursText[0].selectionEnd = 2;
}
}
}, inputTimeout);
return charCode >= 48 && charCode <= 57
|| (charCode >= 37 && charCode <= 40)
|| (charCode >= 96 && charCode <= 105)
|| charCode == 17
|| charCode == 13
|| charCode == 46
|| charCode == 8
|| charCode == 9;
},
_onInputInput: function (e) {
var $el = $(e.target),
_this = this,
field = $el.data('field'),
max = $el.data('max'),
val = parseInt($el.val());
setTimeout(function () {
val = parseInt($el.val());
if (val > max) {
val = max;
$el.val(val);
} else if (!val) {
val = _this['_' + field]
}
_this[field] = val;
$('[name="' + field + '"]').val(val);
_this.d._trigger('timeChange',[_this.hours, _this.minutes])
}, inputTimeout)
},
_onBlurInput: function (e) {
var $el = $(e.target),
val = $el.val();
if (val.length == 1) {
val = '0' + val;
$el.val(val);
}
},
_onPasteInput: function (e) {
var $el = $(e.target),
val = $el.val(),
_this = this;
setTimeout(function () {
val = $el.val().replace(/\D/gi, '');
$el.val(val);
}, inputTimeout)
}
};
})(window, jQuery, Datepicker);

2
dist/js/datepicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
src/js/datepicker.js
View File

@ -182,9 +182,11 @@ var Datepicker;
_bindEvents : function () {
this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
this.$el.on('blur.adp', this._onBlur.bind(this));
this.$el.on('input.adp', this._onInput.bind(this));
$(window).on('resize.adp', this._onResize.bind(this));
$('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
},
_bindKeyboardEvents: function () {
@ -950,11 +952,11 @@ var Datepicker;
_onMouseUpDatepicker: function (e) {
this.inFocus = false;
this.$el.focus()
e.originalEvent.inFocus = true;
if (!e.originalEvent.timepickerFocus) this.$el.focus();
},
_onInput: function () {
console.log(234);
var val = this.$el.val();
if (!val) {
@ -968,6 +970,18 @@ var Datepicker;
}
},
_onMouseUpBody: function (e) {
if (e.originalEvent.inFocus) return;
if (this.visible && !this.inFocus) {
this.hide();
}
},
_onMouseUpEl: function (e) {
e.originalEvent.inFocus = true;
},
_onKeyDown: function (e) {
var code = e.which;
this._registerKey(code);

124
src/js/timepicker.js
View File

@ -10,8 +10,13 @@
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
' </div>' +
'</div>' +
'<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
'</div>';
'<div class="datepicker--time-current">' +
' <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
' <span>:</span>' +
' <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
'</div>',
inputTimeout = 10;
datepicker.Timepicker = function (inst, opts) {
this.d = inst;
this.opts = opts;
@ -19,6 +24,8 @@
var date = this.d.parsedDate;
this.minutes = date.minutes;
this.hours = date.hours;
this._minutes = date.minutes;
this._hours = date.hours;
this.init();
};
@ -33,6 +40,11 @@
}
this.$ranges.on(input, this._onChangeRange.bind(this));
this.$currentInputs.on('mouseup', this._onMouseUpInput.bind(this));
this.$currentInputs.on('keydown', this._onKeyPressInput.bind(this));
this.$currentInputs.on('input', this._onInputInput.bind(this));
this.$currentInputs.on('blur', this._onBlurInput.bind(this));
this.$currentInputs.on('paste', this._onPasteInput.bind(this));
},
_buildHTML: function () {
@ -41,12 +53,12 @@
hourMin: '00',
hourMax: '23',
hourStep: '1',
hourValue: date.hours,
hourValue: date.fullHours,
hourLabel: 'Часы',
minMin: '00',
minMax: '59',
minStep: '1',
minValue: date.minutes,
minValue: date.fullMinutes,
minLabel: 'Минуты'
},
_template = datepicker.template(template, data);
@ -54,6 +66,9 @@
this.$timepicker = $(_template).appendTo(this.d.$datepicker);
this.$ranges = $('[type="range"]', this.$timepicker);
this.$currentTime = $('.datepicker--time-current', this.$timepicker);
this.$currentInputs = $('input[type="text"]', this.$timepicker);
this.$hoursText = $('[name="hours-current"]', this.$timepicker);
this.$minutesText = $('[name="minutes-current"]', this.$timepicker);
},
_render: function () {
@ -64,7 +79,9 @@
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);
this.$hoursText.val(h);
this.$minutesText.val(m)
},
_onChangeRange: function (e) {
@ -75,6 +92,103 @@
this[name] = value;
this._updateTime();
this.d._trigger('timeChange', [this.hours, this.minutes])
},
_onMouseUpInput: function (e) {
e.originalEvent.inFocus = true;
e.originalEvent.timepickerFocus = true;
},
_onKeyPressInput: function (e) {
var $el = $(e.target),
field = $el.data('field'),
max = $el.data('max'),
_this = this,
charCode = e.which,
action = $el.data('action'),
parsedVal,
initialValue = $el.val(),
val = $el.val();
setTimeout(function () {
val = $el.val();
parsedVal = parseInt(val);
if (parsedVal > max) {
$el.val(initialValue);
return;
}
if (val.length == 2) {
if (action == 'next' && charCode >= 48 && charCode <= 57) {
_this.$minutesText.focus().select();
}
}
if (!val.length) {
if (action == 'prev' && charCode == 8) {
_this.$hoursText.focus();
_this.$hoursText[0].selectionStart = 2;
_this.$hoursText[0].selectionEnd = 2;
}
}
}, inputTimeout);
return charCode >= 48 && charCode <= 57
|| (charCode >= 37 && charCode <= 40)
|| (charCode >= 96 && charCode <= 105)
|| charCode == 17
|| charCode == 13
|| charCode == 46
|| charCode == 8
|| charCode == 9;
},
_onInputInput: function (e) {
var $el = $(e.target),
_this = this,
field = $el.data('field'),
max = $el.data('max'),
val = parseInt($el.val());
setTimeout(function () {
val = parseInt($el.val());
if (val > max) {
val = max;
$el.val(val);
} else if (!val) {
val = _this['_' + field]
}
_this[field] = val;
$('[name="' + field + '"]').val(val);
_this.d._trigger('timeChange',[_this.hours, _this.minutes])
}, inputTimeout)
},
_onBlurInput: function (e) {
var $el = $(e.target),
val = $el.val();
if (val.length == 1) {
val = '0' + val;
$el.val(val);
}
},
_onPasteInput: function (e) {
var $el = $(e.target),
val = $el.val(),
_this = this;
setTimeout(function () {
val = $el.val().replace(/\D/gi, '');
$el.val(val);
}, inputTimeout)
}
};
})(window, jQuery, Datepicker);

19
src/sass/timepicker.scss
View File

@ -41,9 +41,28 @@ $rangeThumbBg: #dedede;
}
.datepicker--time-current {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: 1;
text-align: center;
input[type='text'] {
box-sizing: content-box;
border: none;
padding: 0 3px;
margin: 0;
outline: none;
box-shadow: none;
font-size: 16px;
width: 18px;
height: 23px;
}
> {
flex: 1;
}
}
.datepicker--time-row {