element 日期选择图标_打开HTML5日期选择器，点击图标

I have an HTML5 date picker. It is opened when I click on the date picker text box. I have to change the event to an icon, but I'm not sure how to achieve this. I have to open the date picker when I click on the calendar icon.

Here is the HTML code for my datepicker:

document.getElementById("datepickericon").onclick = function(e){

console.log('inside click');

document.getElementById("calendar").style.visibility="visible";

// document.getElementById("calendar").focus();

// You could write code to toggle this

}

By clicking on icon i have to get the open calendar view like following image

解决方案

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

}