How to make whole html input type date field clickable for calendar popup?

Question

In the HTML input type date field when we click on an icon, the calendar is popup. But I want to make it pop up when we click in the dd/mm/yyyy field?

Answer 1

Listen for the focus event on the element, then invoke the HTMLInputElement.showPicker() method:

document.getElementById("datePicker").addEventListener('focus', function(event) {
  event.target.showPicker();
});

<input type="date" id="datePicker" />

^{Note: Unfortunately this doesn't work in the snippet above due to the restrictions of calling showPicker() cross-origin combined with the cross-origin implications of the Stack Snippets feature itself, but should work in practice.}

However, you should consider that this particular method has relatively abysmal support (only ~66% of all browsers implement it as of this writing).