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, 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:

<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();     // You could write code to toggle this } 

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

Answer 1

If you don't mind having the calendar icon inside the date input field then a cross browser alternative would be to position a calendar icon over top of the triangle calendar picker indicator and then set the calendar icon to pointer-events: none which will cause all click events to be passed through to the triangle calendar picker indicator underneath. I'm not entirely sure how consistent the position of the calendar picker indicator is in different browsers but it should be pretty similar. See the example below.

.sd-container {    position: relative;    float: left;  }    .sd {    border: 1px solid #1cbaa5;    padding: 5px 10px;    height: 30px;    width: 150px;  }    .open-button {    position: absolute;    top: 10px;    right: 3px;    width: 25px;    height: 25px;    background: #fff;    pointer-events: none;  }    .open-button button {    border: none;    background: transparent;  }

<form>    <div class="sd-container">      <input class="sd" type="date" name="selected_date" />      <span class="open-button">        <button type="button">📅</button>      </span>    </div>  </form>

Also it is possible to change some of the appearance of the date input field (but not the calendar date picker) as it styles similar to a text input field. In addition their are a number of WebKit CSS properties that are explained here Are there any style options for the HTML5 Date picker?

Answer 2

The HTML5 <input> 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 <input type='date'> 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:

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

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 }