Можно ли вызвать событие ввода / изменения, когда что-то изменилось в input type = "date"?

Question

let date = document.getElementsByTagName('input')[0];
date.addEventListener('input',function(){
  console.log('input');
});

<input type="date">

let date = document.getElementsByTagName('input')[0];
date.addEventListener('change',function(){
  console.log('change');
});

<input type="date">

Это один и тот же код, я просто использовал два разных типа событий.

Проблема в том, что событие происходит при изменении всех трех частей даты. Например, если у меня событие yyyy-mm-21 или 2020-04-dd не срабатывает.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

здесь говорится, что есть только эти два события, которые понимает input type = "date". Как мне поступить, если я хочу запускать событие каждый раз, когда меняю что-то в дате?

и, пожалуйста, НЕТ JQUERY

Answer 1

Вы можете быть немного креативными со всеми существующими событиями «изменения». В зависимости от того, что вы хотите сделать на каждом мероприятии. Это просто для того, чтобы показать некоторые опции, очевидно, вы можете назначить любую функциональность, необходимую для каждого события.

let date = document.querySelector('input[type="date"]');

let myAwesomeFunction = function(event){
  console.log('event.type: ', event.type, ' value: ', event.target.value );
};

date.addEventListener('change', myAwesomeFunction);
date.addEventListener('click', myAwesomeFunction);
date.addEventListener('keyup', myAwesomeFunction);
date.addEventListener('keydown', myAwesomeFunction);
date.addEventListener('blur', myAwesomeFunction);
date.addEventListener('focus', myAwesomeFunction);
date.addEventListener('focusout', myAwesomeFunction);

<input type="date">

К сожалению, вы не получите значение, пока не будут установлены все поля (день, месяц, год). (Пожалуйста, прокомментируйте, если у кого-то есть решение для этого)

Answer 2

Используйте onkeyup для включения каждой клавиши и onchange для запуска, когда пользователь выбирает дату из средства выбора.

let date = document.getElementsByTagName('input')[0];
date.addEventListener('keyup',function(){
  console.log('keyup');
});
date.addEventListener('change',function(){
  console.log('change');
});

<input type="date">