javascript - Open HTML5 date picker on icon click -

i have html5 date picker. opened when click on date picker text box. have change event icon, i'm not sure how achieve this. have open date picker when click on calendar icon.

here html code datepicker:

   <img src="date.png" alt="date picker" id="datepickericon" /> <input name="calendarselect{contactid}" class="timeselect" type="date" id="calendar"> <script> document.getelementbyid("datepickericon").onclick = function(e){ console.log('inside click');     document.getelementbyid("calendar").style.visibility="visible";     // document.getelementbyid("calendar").focus();     // write code toggle } 

by clicking on icon have open calendar view following image

the html5 <input> type='date' work few browsers. also, programmer have no control on appearance or other aspect (such showing , hiding it) (quick faqs on input type date)

thus, if must this, html5 <input type='date'> tag not option. you'll have use build in javascript such jquery ui or bootstrap date picker.

---

old answer

you have attach event click of icon. assuming html looks this:

<img src="date.png" alt="date picker" id="datepickericon" /> <input name="calendarselect{contactid}" class="timeselect" type="date" id="calendar"> 

you'll have check onclick event on icon , show or hide calendar.

document.getelementbyid("datepickericon").onclick = function(e){     document.getelementbyid("calendar").focus();     // write code toggle }