<input type="date> onchange fires too much

google-chrome, html, javascript

Solution

<input type="date" id="mydate">

And Js:

let mydate=window.document.getElementById("mydate");
let olddate=mydate.value;
let isChanged = function(){
  if(mydate.value!== olddate){
    olddate=mydate.value;
    return true;
  };
  return false;
};
mydate.addEventListener("blur", function(){
  if(isChanged())
    alert("changed!");
});

Problem

In Chrome at least, the `<input type="date>` `onchange` event fires on every keystroke that changes the date, which means if you are typing the year, for example, it will fire on every keystroke. But, they aren't done changing the date yet! Seems like this is what `oninput` should be doing. I thought `onchange` was for the change as a whole. When I'm typing 0,1,1,5,1,9,8,7 (01/15/1987), that's not 8 changes, that's 1. You could say, well, check the value `onblur`, but then my event will fire even if they are just tabbing through the field and it didn't change. My handler is a generic ajax postback routine that doesn't / can't check the old vs new value. Isn't there an event that fires only on a change (but when they are done changing)? Maybe in `onblur` I could check the old value but I'm not sure how. ``` <input type="date" onchange="alert('changed')"> ```

Original source