Hide calendar when input blurs, select 00:00:00 when no time is selected

master
Vitaliy Filippov 2019-07-18 14:06:50 +03:00
parent 843ed7c889
commit 8ea8f1511d
4 changed files with 23 additions and 9 deletions

View File

@ -3,7 +3,7 @@
* Creates a calendar widget which can be used to select the date more easily than using just a text box
*
* Modified: http://yourcmc.ru/git/vitalif-js/calendar
* Version: 2018-10-23
* Version: 2019-07-18
* License: MIT-like, http://www.openjs.com/license.php
*
* Example:
@ -46,6 +46,11 @@ export class Calendar extends preact.Component
componentDidMount()
{
this.componentDidUpdate();
this.props.input.addEventListener('blur', () =>
{
if (!Calendar.stopBlur || Calendar.stopBlur < Date.now()-200)
Calendar.hideCalendar();
});
}
componentDidUpdate()
@ -77,8 +82,8 @@ export class Calendar extends preact.Component
if (this.props.callback)
{
// Safari does not understand new Date('YYYY-MM-DD HH:MM:SS')
t = t ? t.split(/:/) : null;
t = t ? new Date(year-0, month-1, day-0, t[0]-0, t[1]-0, t[2]-0) : new Date(year-0, month-1, day-0);
t = t ? t.split(/:/) : [ 0, 0, 0 ];
t = new Date(year-0, month-1, day-0, t[0]-0, t[1]-0, t[2]-0);
var c = this.props.callback;
c(new Date(t));
}
@ -323,6 +328,7 @@ export class Calendar extends preact.Component
};
Calendar.init();
Calendar.box.style.display = "block";
Calendar.stopBlur = Date.now();
preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box);
}
@ -368,6 +374,7 @@ export class Calendar extends preact.Component
ev.stopPropagation();
else
ev.cancelBubble = true;
Calendar.stopBlur = Date.now();
return true;
});
document.getElementsByTagName("body")[0].insertBefore(div, document.getElementsByTagName("body")[0].firstChild);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* Original: http://www.openjs.com/scripts/ui/calendar/
* Modified: http://yourcmc.ru/git/vitalif-js/calendar
* Version: 2018-11-04
* Version: 2019-07-16
* License: MIT-like, http://www.openjs.com/license.php
*
* Example:
@ -81,12 +81,12 @@ export class Calendar
selectDate(year, month, day)
{
var i = this.input;
var t = i.value.split(/[\s]+/, 2)[1]||'';
var t = i.value.split(/\s+/, 2)[1]||'';
if (this.callback)
{
// Safari does not understand new Date('YYYY-MM-DD HH:MM:SS')
t = t ? t.split(/:/) : null;
t = t ? new Date(year-0, month-1, day-0, t[0]-0, t[1]-0, t[2]-0) : new Date(year-0, month-1, day-0);
t = t ? t.split(/:/) : [ 0, 0, 0 ];
t = new Date(year-0, month-1, day-0, t[0]-0, t[1]-0, t[2]-0);
var c = this.callback;
c(t);
}
@ -332,6 +332,11 @@ export class Calendar
input_or_id.addEventListener('focus', function(ev) {
instance.showCalendar();
});
input_or_id.addEventListener('blur', function(ev) {
if (!instance.stopBlur || instance.stopBlur < Date.now()-200) {
instance.hideCalendar();
}
});
return instance;
}
@ -349,6 +354,8 @@ export class Calendar
ev.stopPropagation();
else
ev.cancelBubble = true;
if (Calendar.instance)
Calendar.instance.stopBlur = Date.now();
return true;
});
document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);