Как повесить 3 события на 3 разных зоны в input date?

Question

[AlexNew22]

Как сделать так, чтобы при нажатии на дату мы могли менять дату числами, при нажатии на кастомную иконку у нас этот календарик вызвался, а при нажатии на пустоту в инпуте мы открыли новый блок для ввода даты в ручную в других полях?
https://jsfiddle.net/75z1ejrc/

Answer 1

[Владимир Коротенко]

Зачем 3?

<style>
  input {
    width: 250px;
  }
</style>
<input type="date" id='simpledata'>
<script>
  function listener(e) {
    // console.log(e)
    // console.log(`offsetX: ${e.offsetX} offsetY: ${e.offsetY} `);
    if (e.offsetX < 84) {
      console.log("click in date");
    } else if (232 > e.offsetX && e.offsetX > 84) {
      console.log("blank");
    } else {
      console.log("click calendar");
    }
  }
  var data = document.getElementById("simpledata");
  data.addEventListener("click", listener);
</script>

Comments

[AlexNew22]

А как в инпуте нам повесить события вызова календаря или начала ввода даты в поле даты?

[Владимир Коротенко]

нет их
хотя
если постараться
https://developer.mozilla.org/en-US/docs/Web/API/E...
В общем смотрите код.
Начало ввода - событие focus
Открытие календарика - в методе click ветка else
AlexNew22,