HTML5 <input type = "date"> - onChange Event

Question

Is it possible to detect in the onChange event for <input type="date"> when the user uses a graphical calendar and arrows or a keyboard number ?

I'm only interested in VanillaJS solutions.

Answer 1

Something like that?

 function handler(e){ alert(e.target.value); } 

 <input type="date" id="dt" onchange="handler(event);"/> 

Answer 2

 function elog(ev, object) { console.log(object.id + " - " + ev + ": " + object.value); } 

 <label for="dt1">Date not initially set: </label> <input type="date" id="dt1" oninput="elog('input',this);return false;" onchange="elog('change',this);return false;" onblur="elog('blur',this);return false;" onfocus="elog('focus',this);return false;" onkeyup="elog('keyup-'+event.keyCode,this);return false;" onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}" /> <label for="dt2">Date set to 1.12.1892 initially: </label> <input type="date" id="dt2" value="1892-12-01" oninput="elog('input',this);return false;" onchange="elog('change',this);return false;" onblur="elog('blur',this);return false;" onfocus="elog('focus',this);return false;" onkeyup="elog('keyup-'+event.keyCode,this);return false;" onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}" /> 

I had a similar problem with determining if the user was completed or not completed the date picker. Thus, I tested the change, blur, select, and focus events, as shown in the sample code (extension of the antelove example).

The change event occurs only if the date picker is set to the correct date and the value changes. The input event behaves exactly the same. In some cases, this can cause unwanted behavior. If a valid date has already been set (for example, 01.12.1892), and the user starts to enter a new 4-digit year, the change event will already be triggered after entering the first digit (for example, 1994 => the change event appears after entering the first digit). 'one'). If the server part is used, it may be undesirable to send each change to the server, but only the last and finally selected date (or nothing if the user interrupts the work).

The blur event occurs when the input field loses focus. It also works for the date picker featured on mobile safari (iOS). When the user clicks "done / good", a blur event is triggered, which can be used to work with the selected end date. Also here, a change event occurs when a spinning wheel ever stops and one of the date components changes.

Interestingly, the keypress event is not triggered when the date component changes, however, the keyup event occurs (even if not all date components are installed). I did not find a way to extract the current set value of an incomplete date. Is there an option?

Not relevant, but useful: adding a key handler to listen to key 13 (return / enter) is very useful when users enter a date on a website, they can confirm the date using the enter / return key, so there is no switching between the keyboard. / mouse forced.

Summary: Yes, you can see the changes in each of the date components if the start date is set (or the full date is set in the process) and the change event is processed. It is also possible to track user actions in the date field when the date is completed. Then you can compare the previous and current date values, which allows you to find out where the "cursor" is currently located. I assume that tracking left / right / up / down keys will not work, since it is not known which date component the user clicked on.

Update for Android based on Alexander's comment: It looks like the datepicker element is still highlighted in the Android browser, that is, in focus when the date pointer closes , see the example . In the example, I clicked a date in the date picker popup, and then clicked a region outside of the date picker. After that, I clicked “clear” and again outside the datepicker element. In all cases, clicking outside the date picker (after closing the popup) will trigger a blur event. Since the change event is fired in all cases, perhaps the best way to continue is to implement the modified handler and the blur handler to intercept both cases. But in order to be completely confident in the behavior of interaction styles after wimps (for example, touch), all browsers on mobile phones should be tested. I would not be surprised if the implementations will differ in different mobile browsers.

Answer 3

You can use two onchange events, but you must first initialize your field:

 var date_input = document.getElementById('date_input'); date_input.valueAsDate = new Date(); date_input.onchange = function(){ console.log(this.value); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="date" id='date_input'> 

Hope this helps.

Answer 4

Yes, you can kindly check browser support for date and time support.

Check the functionality of the hopper!

Jsbin

In the case of Chrome, the event will not be fired if the entire date is not entered!

Answer 5

Date format in YYYY-MM-DD

 function getObject(object) { // alert(object); // console.log(object); console.log(object.value); // result 2019-01-03 } 

 <input type="date" id="dt" onchange="getObject(this);"/>