HTML5 <input type=“date”> - onChange Event

2019-02-21 13:18发布

问题:

Is possible to detect in event onChange for <input type=“date”>, when user using graphical calendar and arrows or using keybord number?

I am only interested in VanillaJS solutions.

回答1:

Something like this?

function handler(e){
  alert(e.target.value);
}
<input type="date" id="dt" onchange="handler(event);"/>



回答2:

You could use two events onchange event but your field should be initialized first :

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.



回答3:

Format Date 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);"/>



回答4:

Yes you can but kindly check support for the browser for date time support

Check the bin for functional example!

JSBin

In case of Chrome the event will not be fired unless the whole date is input!