点击图标打开HTML5日期选择器

Question

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

去做 :

• 我必须将事件更改为图标,但我不确定如何实现此目的.
  我点击日历图标时必须打开日期选择器.

这是我的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
}

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

Answer 1

如果您不介意在日期输入字段中包含日历图标,那么跨浏览器的替代方案是将日历图标放在三角形日历选择器指示器的顶部,然后将日历图标设置为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>

此外,可以更改日期输入字段的某些外观(但不是日历日期选择器),因为它的样式类似于文本输入字段.此外,他们还有许多WebKit CSS属性,这里有解释HTML5日期/ 2016的任何样式选项吗？

Answer 2

HTML5的<input>使用type='date'将只对一个工作一些浏览器.此外,作为程序员,您无法控制其外观或任何其他方面(例如显示和隐藏它)(输入类型日期的快速常见问题解答)

因此,如果必须这样做,HTML5 <input type='date'>标记不是一个选项.您将不得不使用JavaScript中构建的东西,例如jQuery UI或Bootstrap日期选择器.

老答案

您必须将事件附加到图标的单击.假设您的HTML看起来像这样:

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

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

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