打开HTML5日期选择器，点击图标 [英] Open HTML5 date picker on icon click

问题描述

我有一个HTML5日期选择器。当我点击日期选择器文本框时打开它。我必须将事件更改为一个图标，但我不知道如何实现这一点。当我点击日历图标时，我必须打开日期选择器。

以下是我的datepicker的HTML代码：

  img src =date.pngalt =日期选择器id =datepickericon/> 
< input name =calendarselect {ContactID}class =timeselecttype =dateid =calendar> 
< script> 
 document.getElementById（datepickericon）。onclick = function（e）{
 console.log（'inside click'）; 
 document.getElementById（calendar）。style.visibility =visible; 
 // document.getElementById（calendar）。focus（）; 
 //您可以编写代码来切换
} 
  

点击图标我必须得到打开的日历视图如下图所示

解决方案

HTML5 < input> 与 type ='date'只能使用几个浏览器。另外，作为程序员，你无法控制其外观或任何其他方面（例如显示和隐藏它）（输入类型日期的快速常见问题）

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

---

旧答案

您必须附加事件才能点击图标。假设你的HTML看起来像这样：

 < img src =date.pngalt =Date Pickerid = datepickericon/> 
< input name =calendarselect {ContactID}class =timeselecttype =dateid =calendar> 
  

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

  document.getElementById（datepickericon）。onclick = function（e ）{
 document.getElementById（calendar）。focus（）; 
 //您可以编写代码来切换
} 
  

I have an HTML5 date picker. It is opened when I click on the date picker text box. 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

解决方案

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
}

这篇关于打开HTML5日期选择器，点击图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！