prevent HTML5 date field from triggering change event on keypress - html

Question

When using a HTML5 date field, every key input triggers the change event on the field on Chrome.
See jsFiddle and try to input the date manually to see the effect:
https://jsfiddle.net/hx3zcenj/4/
document.getElementById('dateFilter').addEventListener('change', function(){
document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
}); //triggers on every keypress
I would like this event to trigger like it does in a normal text field, i.e. after either selecting the date from the picker or on blur. I don't want it to trigger every time I input a character.
This is mostly relevant for Chrome, since other browsers deal with this field in different ways.

Answer 1

Once the date input has all the three fields, i.e. dd, mm and yyyy; it starts triggering. Which is logical as the date has all the fields and the date is a valid date, though might not be valid for business case.
You can bind the blur event which will do your job. And provide the other attributes like min and max which will also trigger errors.
And if you are going to bind the change event, then first thing you should do is check that data is valid and in the range.

Answer 2

How about using the focusout event instead. This will trigger when they leave the field/change the focus
document.getElementById('dateFilter').addEventListener('focusout', function() {
document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
});
<input type="date" id="dateFilter">
<div id="msgContainer"></div>