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

Можно ли обнаружить в событии onChange для <input type="date">, когда пользователь использует графический календарь и стрелки или номер клавиатуры?

Меня интересуют только решения VanillaJS.

Ответ 1

Что-то вроде этого?

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

Ответ 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;}" />

Ответ 3

Можно использовать два события onchange, но сначала необходимо инициализировать ваше поле:

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'>

Ответ 4

Да, вы можете любезно проверить поддержку браузера для поддержки даты и времени введите описание изображения здесь

Проверьте функциональность бункера!

JSBin

В случае Chrome событие не будет запущено, если не будет введена вся дата!

Ответ 5

Формат даты в ГГГГ-ММ-ДД

function getObject(object)
{
//  alert(object);
//  console.log(object);
  
  console.log(object.value); // result 2019-01-03
}
<input type="date" id="dt" onchange="getObject(this);"/>