Open HTML5 date picker on icon click

问题

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

回答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?

回答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
}

回答3:

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.

回答4:

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

回答5:

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

回答6:

<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;
 }

来源：https://stackoverflow.com/questions/18326982/open-html5-date-picker-on-icon-click

标签

javascript

extjs

sencha-touch

html5-canvas