javascript 单击图标打开 HTML5 日期选择器

Open HTML5 date picker on icon click

提问by Dibish

I have an HTML5 date picker.
It is opened when I click on the date picker text box.

我有一个 HTML5 日期选择器。
当我单击日期选择器文本框时它会打开。

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:

这是我的日期选择器的 HTML 代码：

<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

通过单击图标，我必须获得如下图所示的打开日历视图

回答by Simon Watson

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: nonewhich 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.

如果您不介意在日期输入字段中有日历图标，那么跨浏览器的替代方法是将日历图标放置在三角形日历选择器指示器的顶部，然后将日历图标设置为pointer-events: none将导致所有点击事件传递到下方的三角形日历选择器指示器。我不完全确定日历选择器指示器的位置在不同浏览器中的一致性如何，但它应该非常相似。请参阅下面的示例。

.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?

还可以更改日期输入字段（但不是日历日期选择器）的某些外观，因为它的样式类似于文本输入字段。此外，还有许多 WebKit CSS 属性在此处进行了说明。HTML5 日期选择器有任何样式选项吗？

回答by prtksxna

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)

HTML5 <input>withtype='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 UIor Bootstrapdate picker.

因此，如果您必须这样做，则 HTML5<input type='date'>标记不是一个选项。您必须使用 JavaScript 中构建的内容，例如jQuery UI或Bootstrap日期选择器。

---

---

Old Answer

旧答案

You have to attach an event to the click of the icon. Assuming your HTML looks something like this:

您必须将事件附加到图标的点击。假设您的 HTML 如下所示：

<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 onclickevent on the icon and show or hide the calendar.

您必须检查onclick图标上的事件并显示或隐藏日历。

document.getElementById("datepickericon").onclick = function(e){
    document.getElementById("calendar").focus();
    // You could write code to toggle this
}

回答by Sayed

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

我正在回答这个问题，希望新人会发现它有帮助：我的 html 是这样的：

<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.

我已经在 chrome 模拟器和 android 设备上测试过它，它工作得很好。不过需要在 iOS 设备上进行测试。

回答by Yishai Stern

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

您可以将日期元素粘贴到图标上并输入 opactiy:0; 并为日期提供与图标一样大的字体大小，然后它会崩溃

回答by Tekki

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

如果label用户单击相应的标记，则大多数（如果不是全部）浏览器都会聚焦表单控件。因此，一种可能的解决方案是将图标放入这样的label标签中：

<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 labeltag 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 labeltag just to display an icon is probably discouraged. Hence the use of two labeltags 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

• 该label标签还用于将表单控件的描述连接到表单控件本身，因此辅助技术（例如屏幕阅读器）可以向用户传达他们选择的表单控件。因此，label可能不鼓励仅仅为了显示图标而滥用标签。因此使用了两个label标签，它们都链接到同一个表单控件，一个描述它，另一个用于日历图标。
• 此解决方案聚焦日期字段，就好像用户直接单击它一样。尤其是桌面版 Chrome（目前为 66 版）仍然需要用户单击向下的小箭头来展开日历。Android 上的 Firefox、Edge 和 Chrome 似乎运行良好

回答by priya ghule

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