title: Open HTML5 date picker on icon click
body: <p>I have an HTML5 date picker. <br>It is opened when I click on the date picker text box. </p>
  
  <p><strong>Todo :</strong></p>
  
  <ul>
  <li>I have to change the event to an icon, but I'm not sure how to achieve this.<br> I have to open the date picker when I click on the calendar icon. </li>
  </ul>
  
  <p>Here is the HTML code for my datepicker:</p>
  
  <pre><code>&lt;img src="date.png" alt="Date Picker" id="datepickericon" /&gt;
  &lt;input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar"&gt;
  &lt;script&gt;
  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
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/HMLpn.png" alt="enter image description here"></p>
  
  <p>By clicking on icon i have to get the open calendar view like following image 
  <img src="https://i.stack.imgur.com/xsPOu.png" alt="enter image description here"></p>