时间戳

首页 > 解决方案 > 如何使用日历图标制作事件监听器

javascript - 如何使用日历图标制作事件监听器

问题描述

我需要做一个日期选择器

<input type="text" name="Birth" id="calendarInput" required  class="inputField" placeholder="31.12.2001">
<input type="date" name="Birth" id="calendarHiddenInput" pattern="\d{4}-\d{2}-\d{2}"  style="display: none">
<img id="calendarImg" src="images/calendarIcon.png">

当您写平常input[type=date]时，有一个可点击的日历图标，您可以在其中选择一个日期。我想做一个这样的事件监听器：

$('#calendarImg').click(function () {
    $('#calendarHiddenInput').click();
});

但是这个功能不起作用。我想要一个通常但带有小日历图标的日历，当您单击它时会input[type=text]显示日历。 PS当我这样做时，我会从中挑选价值并将其粘贴到input[type=date]
calendarHiddenInputcalendarInput

标签： javascripthtmljquerycss

解决方案

像这样的东西。用您的图像或文本替换“图标”。

document.forms.form01.hiddendate.addEventListener('change', e => {
  e.target.form.date.value = e.target.value;
});
input[type="date"] {
  display: none;
}
<form name="form01">
  <input type="text" name="date" />
  <label>icon<input type="date" name="hiddendate"/></label>
</form>

该<label>元素可用于关注输入元素，即使它是隐藏的。日期选择器（如果有的话）仍然会出现。

推荐阅读