Open HTML5 date picker on icon click

Asked 20/8, 2013 at 4:30 Answered 26/11, 2022 at 2:15

Solved javascript extjs sencha-touch html5-canvas

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
}

enter image description here

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

Tasker answered 20/8, 2013 at 4:30 Comment(1)

#32632062 – Scoggins 29/11, 2015 at 18:18

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 there are a number of WebKit CSS properties that are explained here Are there any style options for the HTML5 Date picker?

Tweak answered 17/6, 2017 at 11:58 Comment(0)

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
}

Faubion answered 20/8, 2013 at 4:37 Comment(7)

thanks for the quick reply..the calendar field is always visible..i want to fires that date picker calendar by click on that icon..i have attached screenshot of opened calendar view plz see it ... – Tasker 20/8, 2013 at 4:50

I don't think I understand. What do you need to happen when the icon is clicked? – Faubion 20/8, 2013 at 5:12

In the first screenshot the calendar is hidden and it shows in the second one. Do you need to show the calendar widget on click of the icon? – Faubion 20/8, 2013 at 5:13

Sry..its not firing the calendar..just focussing on to date field..i need to show the open calendar widget on click of the icon – Tasker 20/8, 2013 at 5:23

Can you please share some code? My earlier suggestion was correct, need to show the calendar div that's all. – Faubion 20/8, 2013 at 5:33

Will need to see more code. Need the ID of the actual calendar widget to toggle its visibility. When it opens right click on it and see in the inspector. – Faubion 20/8, 2013 at 12:26

its an html 5 date field..i cannot right click on it when its open..i dont have much code.. just one line of code display that calendar.. – Tasker 20/8, 2013 at 12:49

Most, if not all, browsers focus a form control, if the correspondig label tag is clicked by the user. So one possibile solution is to put the icon into a label tag like this:

<label for="dateinput">Birthday:</label>
<input type="date" id="dateinput">
<label for="dateinput">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA80lEQVRIie2SzQqCQBDHe5/w1kXt1qUFo6NP1Melp8geIvxgyzbJoIJ6gQ1SA6V6AJ1OG0SsaQkWOPCHPfxmf8wwtVoZZcyXKx0TJwe/0TFZZxaYtgOm7UDhvD8aDD0VxazBV5qZwnhPbcfeqNfnCk4qSiiSHg0USW8/p0h84k8qSvgTKE04tBpgTjSwNA0OrcZbAePN8fjBpwookmAhC0BkAY5IzDDBK58qKCJcARbrUES4gvB6gyJSvoCd3Sfv3xBUK6pW9LngHEZfrycII77A3e1vwReSIIzA3e4vXIFuka4xW57ZyHljYBJMsd3hCv6y7o9Nby8uLYYvAAAAAElFTkSuQmCC" style="vertical-align: middle;" alt="Calendar" title="Set focus on birthday field">
</label>

A few things to note though:

The label tag is also used to connect the description of a form control to the form control itself, so assistive technologies (e.g. screenreaders) can communicate to the user, which form control they selected. So misusing the label tag just to display an icon is probably discouraged. Hence the use of two label tags that both are linked to the same form control, one describing it, the other one for the calendar icon.
This solution focuses the date field as if the user clicked right into it. Especially Chrome on Desktop (version 66 at the moment) still requires the user to click a little down arrow to expand the calendar. Firefox, Edge and Chrome on Android seem to work fine though

Wittgenstein answered 16/5, 2018 at 8:33 Comment(0)

I'm answering this, hoping that someone new would find it helpful: My html was like this:

<div class='child_dob input-group <?php echo $user->parent_type>2 ?'hidden':''?>'>
  <input type='date' class='form-control hidden' name='dob[]' value='<?php echo $dob?>'>
  <div class='form-control datedisplay'>
     <?php echo date('m/d/Y',strtotime($dob))?>
  </div>
  <input type='hidden' value='<?php echo $id?>' name='id[]'>
  <div class='input-group-addon'>
     <span class='cursor glyphicon glyphicon-remove remove_child_dob'></span>
  </div>
</div>

$(function()
{
 $(document).on('click','.datedisplay',function()
 {
    $(this).siblings('[type="date"]').removeClass('hidden').focus().click();
    $(this).remove();
 });
});

I've tested it on chrome simulator as well as on android devices and it works perfectly fine. Needs testing on iOS devices though.

Bikol answered 2/5, 2015 at 5:12 Comment(1)

Yes... it works on iOS. I done that in a slightly different way, but built on top of this answer: $('#myInputDate').css('display', 'block'). focus().click().css('display', 'none'), because if I remove the input field user can not access it again. – Quintal 4/9, 2017 at 21:2

<input type="date">

input[type="date"], input[type="month"]{
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after,input[type="month"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    content: "\f073";
    color: #555;
    padding: 0 5px;
}

/* change color of symbol on hover */
input[type="date"]:hover:after,input[type="month"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button,input[type="month"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 input[type="date"]::-webkit-clear-button, input[type="month"]::-webkit-clear-button {
     z-index: 1;
 }

Inessa answered 7/10, 2019 at 4:50 Comment(0)

you can paste the element of the date over the icon and give the input opactiy:0; and give font-size as big as the icon is to the date and then it will wrock

Accost answered 30/10, 2017 at 13:26 Comment(0)

You can take a look at the codepen link for the datepicker.

https://codepen.io/ragi_jay/pen/NWdbJMG

HTML

<div class="tek-date-container tek-flow-modal-date-picker">
<input class="tek-input tek-date-input-box" type="date"  placeholder="Date" name="startDate" id="tek_start_date" value="" />

<span class="tek-btn-date">

  <div class="tek-cal-icon">
  <button type="button">
  
    <img src="data:image/svg+xml,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.3 22' style='enable-background:new 0 0 19.3 22%3b' xml:space='preserve'%3e %3cstyle type='text/css'%3e .st0%7bfill:%235961FF%3b%7d %3c/style%3e %3cg id='Layer_2_1_'%3e %3cg id='Layer_1-2'%3e %3cpath class='st0' d='M17.2%2c2.8h-2.1V0.5c0-0.3-0.2-0.5-0.4-0.5c0%2c0%2c0%2c0-0.1%2c0h-0.3c-0.3%2c0-0.5%2c0.2-0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v2.2H5.5 V0.5C5.5%2c0.2%2c5.3%2c0%2c5.1%2c0C5%2c0%2c5%2c0%2c5%2c0H4.6C4.3%2c0%2c4.1%2c0.2%2c4.1%2c0.5v2.2h-2C1%2c2.7%2c0%2c3.7%2c0%2c4.8v15.1C0%2c21%2c0.9%2c22%2c2%2c22c0%2c0%2c0.1%2c0%2c0.1%2c0 h15.1c1.2%2c0%2c2.1-0.9%2c2.1-2.1V4.8C19.3%2c3.7%2c18.3%2c2.8%2c17.2%2c2.8z M2.1%2c4.1h15.1c0.4%2c0%2c0.7%2c0.3%2c0.7%2c0.7c0%2c0%2c0%2c0%2c0%2c0v2.1H1.4V4.8 C1.4%2c4.4%2c1.7%2c4.1%2c2.1%2c4.1C2.1%2c4.1%2c2.1%2c4.1%2c2.1%2c4.1z M17.2%2c20.6H2.1c-0.4%2c0-0.7-0.3-0.7-0.7c0%2c0%2c0%2c0%2c0%2c0V8.3h16.5V20 C17.9%2c20.4%2c17.6%2c20.6%2c17.2%2c20.6z M6.4%2c13.8H4.6c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0 h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C6.9%2c13.5%2c6.6%2c13.8%2c6.4%2c13.8z M10.5%2c13.8H8.8c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1 v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C11%2c13.6%2c10.8%2c13.8%2c10.5%2c13.8z M14.6%2c13.8 h-1.7c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1 v1.7C15.1%2c13.6%2c14.9%2c13.8%2c14.6%2c13.8z M10.5%2c17.9H8.8c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5 c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C11%2c17.7%2c10.8%2c17.9%2c10.5%2c17.9z M6.4%2c17.9H4.6c-0.3%2c0-0.5-0.2-0.5-0.4 c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7 C6.9%2c17.6%2c6.6%2c17.9%2c6.4%2c17.9z M14.6%2c17.9h-1.7c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0 h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C15.1%2c17.7%2c14.9%2c17.9%2c14.6%2c17.9z'/%3e %3c/g%3e %3c/g%3e %3c/svg%3e" alt="calendar" class="tek-calendar-img" id="tekStartDateClick">
   </button></div>
</span>

CSS

.tek-date-container {
  position: relative;
  float: left;
 }

.tek-input {
   border: 1px solid #cacaca;
   padding: 3px 10px;
  height: 30px;
  width:  280px;

 }

.tek-btn-date{
 position: absolute;
top: 10px;
right: 8px;
width: 25px;
height: 25px;
background: #fff;
pointer-events: none;
}

.tek-btn-date button {
 border: none;
 background: transparent;
}

.tek-cal-icon{
   display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  border: none;
 background: transparent;

}
.tek-calendar-img {
   width: 20px;
 }
.tek-date-input-box {
   font-family: "Roboto",sans-serif !important;
  border-radius: 5px;
  font-size: 14px;
  border: none !important;
  padding: 5px;
  outline: none;
  font-size: 14px;
  background: none;
  box-shadow: none;
}

.tek-flow-modal-date-picker {
   display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #cacaca;
  border-radius: 3px;
 }

Combination answered 31/3, 2021 at 8:16 Comment(0)

This will work. You can simply use an icon or an image to trigger the calendar using onclick.

<form name="searchPending">
    <div class="input-icon form-group">
                      <i class="ti-calendar" onclick="searchPending.selectDate.showPicker()"></i>
                      <input name="selectDate" type="date"  onfocus="this.showPicker()" class="form-control m-b" placeholder="Sep 23, 2022"  />
                    </div>
</form>

Painful answered 26/11, 2022 at 2:15 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Old Answer

Recommended topics

Hot tags