rome.js knowing when the user is finished

Question

I am using rome.js for a date picker. When the user is finished enter the date, I need the date picker to go away and be replaced on the page by text showing the date. The problem is, I'm not sure how to tell when the user is done picking the date. I don't really want to have to add another control for them to put away the date picker, but would like to infer this from the user's actions.

One thought I had was to look for the hide event - when coupled with autoHideOnClick and autoHideOnBlur I thought I could tell that the user had entered a new date and was done. However, what I find is that I immediately get this event as soon as the picker is created - even if the input element has focus when I create the picker, the picker doesn't pop up immediately. In addition, the hide event sometimes happens even when the user is still enter the date, such as if they enter the date and then want to still enter the time manually.

I had similar issues with the blur event on the input element I create - for instance it fires when the picker is opened .

How am I supposed to know when the user has finished enter the date/time?

Answer 1

I think you could add a keydown event handler to the date input and on each keydown stroke, validate the date and if it's valid one change the display property of the date-picker (class name is rd-container) to "none".

Here is the pseudo code. I verfied on https://www.cssscript.com/demo/highly-customizable-date-and-time-picker-with-rome-js/

dateInput.onkeydown = function () {
   if(dateInput.text is valid) { //validate the date here.
     $(".rd-container").css("display","none");
   }
}

you can use the same function to detect if user "pastes" date text into your input element by listening to "onpaste" event.

dateInput.onpaste = function () {
   if(dateInput.text is valid) { //validate the date here.
     $(".rd-container").css("display","none");
   }
}