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

Question

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

javascriptextjssencha-touchhtml5-canvas

31

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

待办事项：

我需要将事件更改为图标，但我不确定如何实现。
我必须在单击日历图标时打开日期选择器。

这是我的日期选择器的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
}

点击图标后，我希望能够获得如下图片所示的打开日历视图 enter image description here

- Dibish

http://stackoverflow.com/questions/32631562/how-do-i-open-the-window-in-a-date-type-input-through-code/33986228#33986228 - Jay Shukla

8个回答

9

HTML5中的<input>标签和type='date'属性只在少数浏览器中可用。此外，作为程序员，您无法控制其外观或任何其他方面（例如显示和隐藏）（请参见HTML5中日期型输入类型的常见问题）。因此，如果必须这样做，则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
}

- prtksxna

1

感谢您的快速回复。日历字段始终可见。我想通过单击该图标来触发日期选择器日历。我已经附上了打开的日历视图的截图，请查看。 - Dibish

我不认为我理解了。当图标被点击时，你需要发生什么？ - prtksxna

3

抱歉，它并没有触发日历，只是将焦点放在日期字段上。我需要在单击图标时显示打开日历小部件。 - Dibish

你能分享一些代码吗？我之前的建议是正确的，只需要显示日历“div”就可以了。 - prtksxna

这是一个HTML 5日期字段。当它打开时，我无法右键单击它。我的代码不多，只有一行代码来显示那个日历。 - Dibish

显示剩余2条评论

3

我是一个有用的助手，可以为您翻译文本。

希望我的回答对新手有所帮助：我的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();
 });
});

我已经在 Chrome 模拟器以及 Android 设备上进行了测试，效果完美。不过还需要在 iOS 设备上测试。

- Sayed

1

是的...它可以在iOS上运行。我用了稍微不同的方法，但是基于这个答案构建：$('#myInputDate').css('display', 'block').focus().click().css('display', 'none')，因为如果我删除输入字段，用户将无法再次访问它。 - Nowdeen

3

大多数浏览器在用户单击对应的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>

需要注意的几件事:

label 标签也用于将表单控件的描述连接到表单控件本身，这样辅助技术（例如屏幕阅读器）可以向用户传达他们选择的表单控件。因此，仅仅为了显示一个图标而滥用 label 标签可能是不被鼓励的。因此使用两个 label 标签来连接同一个表单控件，一个用于描述表单控件，另一个用于日历图标。
此解决方案将日期字段作为用户直接点击进入它一样处理。特别是桌面版Chrome（目前版本为66）仍需要用户单击一个小下箭头才能展开日历。但是Firefox、Edge和Android版Chrome似乎都工作良好。

- Tekki

3

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

- priya ghule

2

您可以将日期元素粘贴到图标上，并将输入不透明度设置为0；将日期的字体大小设置为与图标相同的大小，那么它就会正常显示。

- Yishai Stern

0

这将起作用。您可以简单地使用图标或图像使用onclick触发日历。

<form name="searchPending">
    <div class="input-icon form-group">
                      <i class="ti-calendar" onclick="searchPending.selectDate.showPicker()"></i>
                      <input name="selectDate" type="date"  onfocus="this.showPicker()" class="form-control m-b" placeholder="Sep 23, 2022"  />
                    </div>
</form>

- Gagan Babber

0

您可以查看CodePen链接以获取日期选择器。

https://codepen.io/ragi_jay/pen/NWdbJMG

HTML

<div class="tek-date-container tek-flow-modal-date-picker">
<input class="tek-input tek-date-input-box" type="date"  placeholder="Date" name="startDate" id="tek_start_date" value="" />

<span class="tek-btn-date">

  <div class="tek-cal-icon">
  <button type="button">
  
    <img src="data:image/svg+xml,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.3 22' style='enable-background:new 0 0 19.3 22%3b' xml:space='preserve'%3e %3cstyle type='text/css'%3e .st0%7bfill:%235961FF%3b%7d %3c/style%3e %3cg id='Layer_2_1_'%3e %3cg id='Layer_1-2'%3e %3cpath class='st0' d='M17.2%2c2.8h-2.1V0.5c0-0.3-0.2-0.5-0.4-0.5c0%2c0%2c0%2c0-0.1%2c0h-0.3c-0.3%2c0-0.5%2c0.2-0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v2.2H5.5 V0.5C5.5%2c0.2%2c5.3%2c0%2c5.1%2c0C5%2c0%2c5%2c0%2c5%2c0H4.6C4.3%2c0%2c4.1%2c0.2%2c4.1%2c0.5v2.2h-2C1%2c2.7%2c0%2c3.7%2c0%2c4.8v15.1C0%2c21%2c0.9%2c22%2c2%2c22c0%2c0%2c0.1%2c0%2c0.1%2c0 h15.1c1.2%2c0%2c2.1-0.9%2c2.1-2.1V4.8C19.3%2c3.7%2c18.3%2c2.8%2c17.2%2c2.8z M2.1%2c4.1h15.1c0.4%2c0%2c0.7%2c0.3%2c0.7%2c0.7c0%2c0%2c0%2c0%2c0%2c0v2.1H1.4V4.8 C1.4%2c4.4%2c1.7%2c4.1%2c2.1%2c4.1C2.1%2c4.1%2c2.1%2c4.1%2c2.1%2c4.1z M17.2%2c20.6H2.1c-0.4%2c0-0.7-0.3-0.7-0.7c0%2c0%2c0%2c0%2c0%2c0V8.3h16.5V20 C17.9%2c20.4%2c17.6%2c20.6%2c17.2%2c20.6z M6.4%2c13.8H4.6c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0 h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C6.9%2c13.5%2c6.6%2c13.8%2c6.4%2c13.8z M10.5%2c13.8H8.8c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1 v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C11%2c13.6%2c10.8%2c13.8%2c10.5%2c13.8z M14.6%2c13.8 h-1.7c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1 v1.7C15.1%2c13.6%2c14.9%2c13.8%2c14.6%2c13.8z M10.5%2c17.9H8.8c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5 c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C11%2c17.7%2c10.8%2c17.9%2c10.5%2c17.9z M6.4%2c17.9H4.6c-0.3%2c0-0.5-0.2-0.5-0.4 c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7 C6.9%2c17.6%2c6.6%2c17.9%2c6.4%2c17.9z M14.6%2c17.9h-1.7c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0 h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C15.1%2c17.7%2c14.9%2c17.9%2c14.6%2c17.9z'/%3e %3c/g%3e %3c/g%3e %3c/svg%3e" alt="calendar" class="tek-calendar-img" id="tekStartDateClick">
   </button></div>
</span>

CSS

.tek-date-container {
  position: relative;
  float: left;
 }

.tek-input {
   border: 1px solid #cacaca;
   padding: 3px 10px;
  height: 30px;
  width:  280px;

 }

.tek-btn-date{
 position: absolute;
top: 10px;
right: 8px;
width: 25px;
height: 25px;
background: #fff;
pointer-events: none;
}

.tek-btn-date button {
 border: none;
 background: transparent;
}

.tek-cal-icon{
   display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  border: none;
 background: transparent;

}
.tek-calendar-img {
   width: 20px;
 }
.tek-date-input-box {
   font-family: "Roboto",sans-serif !important;
  border-radius: 5px;
  font-size: 14px;
  border: none !important;
  padding: 5px;
  outline: none;
  font-size: 14px;
  background: none;
  box-shadow: none;
}

.tek-flow-modal-date-picker {
   display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #cacaca;
  border-radius: 3px;
 }

- ragini jayakumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Watson · Accepted Answer

如果您不介意将日历图标放在日期输入字段内部，那么一个跨浏览器的替代方案是将日历图标定位在三角形日历选择器指示器上方，并将日历图标设置为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日期选择器有哪些样式选项？