Open HTML5 date picker on icon click

Question

I have an HTML5 date picker.
It is opened when I click on the date picker text box.

Todo :

• I have to change the event to an icon,

Answer 1

The HTML5 with type='date' will only work with a few browsers. Also, as a programmer you have no control over its appearance or any other aspect (such as showing and hiding it) (Quick FAQs on input type date)

Thus, if you must do this, the HTML5 tag is not an option. You'll have to use something build in JavaScript such as jQuery UI or Bootstrap date picker.

---

Old Answer

You have to attach an event to the click of the icon. Assuming your HTML looks something like this:

You'll have to check for the onclick event on the icon and show or hide the calendar.

document.getElementById("datepickericon").onclick = function(e){
    document.getElementById("calendar").focus();
    // You could write code to toggle this
}