关键词：
【中文标题】点击图标打开 HTML5 日期选择器【英文标题】：Open HTML5 date picker on icon click 【发布时间】：2013-08-22 00:40:16 【问题描述】：我有一个 HTML5 日期选择器。 当我单击日期选择器文本框时，它会打开。
待办事项：
我必须将事件更改为图标，但我不确定如何实现。我必须在单击日历图标时打开日期选择器。这是我的日期选择器的 HTML 代码：
<img src="date.png" id="datepickericon" />
<input name="calendarselectContactID" 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
通过单击图标，我必须获得如下图所示的打开日历视图
【问题讨论】：
***.com/questions/32631562/… 【参考方案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 属性，在此处进行了说明 Are there any style options for the HTML5 Date picker?
【讨论】：
【参考方案2】：HTML5 <input> 和 type='date' 仅适用于 few browsers。此外，作为程序员，您无法控制其外观或任何其他方面（例如显示和隐藏）(Quick FAQs on input type date)
因此，如果您必须这样做，HTML5 <input type='date'> 标记不是一个选项。您必须使用内置于 JavaScript 中的东西，例如 jQuery UI 或 Bootstrap 日期选择器。
旧答案
您必须为单击图标附加一个事件。假设您的 HTML 看起来像这样：
<img src="date.png" id="datepickericon" />
<input name="calendarselectContactID" class="timeselect" type="date" id="calendar">
您必须检查图标上的onclick 事件并显示或隐藏日历。
document.getElementById("datepickericon").onclick = function(e)
document.getElementById("calendar").focus();
// You could write code to toggle this
【讨论】：
感谢您的快速回复..日历字段始终可见..我想通过单击该图标来触发该日期选择器日历..我已附上打开的日历视图的屏幕截图，请查看。 .. 我想我不明白。点击图标时需要发生什么？ 在第一个屏幕截图中日历是隐藏的，它显示在第二个屏幕截图中。您是否需要在单击图标时显示日历小部件？ 对不起..它没有触发日历..只是关注日期字段..我需要在点击图标时显示打开的日历小部件 你能分享一些代码吗？我之前的建议是正确的，需要显示日历div 就可以了。【参考方案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 设备上进行测试。
【讨论】：
是的...它适用于 iOS。我以稍微不同的方式做到了这一点，但建立在这个答案之上：$('#myInputDate').css('display', 'block'). focus().click().css('display', 'none')，因为如果我删除输入字段，用户将无法再次访问它。【参考方案4】：
您可以将日期元素粘贴到图标上并输入 opactiy:0; 并将字体大小与图标的大小设置为日期，然后它会崩溃
【讨论】：
【参考方案5】：如果用户单击相应的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;" title="Set focus on birthday field">
</label>有几点需要注意：
label 标记还用于将表单控件的描述连接到表单控件本身，因此辅助技术（例如屏幕阅读器）可以与用户交流他们选择的表单控件。因此，可能不鼓励滥用label 标签来显示图标。因此使用了两个label 标签，它们都链接到同一个表单控件，一个描述它，另一个用于日历图标。
此解决方案聚焦日期字段，就好像用户直接单击它一样。尤其是桌面版 Chrome（目前为 66 版）仍然需要用户单击一个向下箭头来展开日历。 Android 上的 Firefox、Edge 和 Chrome 似乎运行良好
【讨论】：
【参考方案6】：<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;
【讨论】：
【参考方案7】：您可以查看日期选择器的 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" 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;
【讨论】：
图像/图标打开日期选择器
】图像/图标打开日期选择器【英文标题】：Animage/iconopensthedateselector【发布时间】：2015-07-1103:43:50【问题描述】：我有一个HTML/PHP网站，其中有一个图像图标（看起来像一个日历），我希望用户单击并打开默认的日期选择器。用... 查看详情
使 eternicode 日期选择器在点击时打开，而不是焦点
】使eternicode日期选择器在点击时打开，而不是焦点【英文标题】：Makeeternicodedatepickeropenonclick,notfocus【发布时间】：2014-01-0521:13:27【问题描述】：eternicodetwitterbootstrapdatepicker会在其附加到的<input>字段获得焦点时立即弹... 查看详情
如何在 vue 中隐藏日期选择器的默认日历图标
...黑色图标是html的默认设置。而我想要实现的，首先我想点击整个输入字段来选择日期，而不是只点击黑色图标。另外，我想删除黑色图标。这是我在vue中的输入组件：< 查看详情
jQuery ui 日期选择器位置
...的Jqueryuidatepicker位置相对于隐藏的输入类型有问题。我在点击FontAwesome图标时触发了日期选择器，并将所选日期保存在隐藏的输入类型中。所有工作但日期选择器日历位置不在图标下方。【问题讨论】：请发布您的html和javascript... 查看详情
如何更改 WPF 日期选择器的图标？
】如何更改WPF日期选择器的图标？【英文标题】：HowtochangetheiconoftheWPFdatepicker?【发布时间】：2012-12-1116:54:01【问题描述】：我正在做一个wpf应用程序，其中我的应用程序中有两个日期选择器。我想知道是否有任何快速的方法（... 查看详情
html5 输入元素“日期” - 如何显示日历元素
...望能够拥有以下内容：从视图中隐藏的“”元素开始。当点击主页元素时，显示元素，日历打开当用户在日历上选择日期时，该元素 查看详情
WPF 日期选择器图标大小
】WPF日期选择器图标大小【英文标题】：WPFDatePickerIconSize【发布时间】：2016-09-0303:58:16【问题描述】：我有一个这样的DatePicker：<DatePickerGrid.Row="7"HorizontalAlignment="Left"FontSize="43"CalendarStyle="StaticResourcestyleCalendar"/>问题是，增加... 查看详情
相机文件选择器未在 WebView android 中打开
...传图像。文件上传工作正常..但相机动作没有工作..当我点击相机图标时它什么也没做..我还检查了logcat是否发 查看详情
材质 UI 日期选择器日历在页面渲染时立即打开
...问题描述】：我有一个来自MaterialUI的日历，它只有在我点击它时才会打开，所以它会像这样开始然后打开这个无论如何我可以拥有它以便在页面呈现后立即打开它？我不确定我是否遗漏了一些开箱即用的材料提供给我们的道具... 查看详情
如何在按钮下方设置日期选择器
...ton【发布时间】：2011-08-0100:52:29【问题描述】：我想通过点击按钮打开一个日期选择器。但是当我点击按钮时，它会在屏幕的左上角显示一个日历。我想在按钮下方看到它。我该怎么做？另外，我怎样才能改变日历的大小以使它... 查看详情
按 esc 后无法打开日期选择器
】按esc后无法打开日期选择器【英文标题】：Unabletoopendatepickerafterpressingesc【发布时间】：2021-11-1909:22:54【问题描述】：我在只读文本框上有angularjs日期选择器，单击文本框时，会弹出日期选择器，按esc关闭日期选择器，但再次... 查看详情
在日期选择器中选择日期后如何打开时间选择器
】在日期选择器中选择日期后如何打开时间选择器【英文标题】：Howtoopentimepickerafterselectingdateindatepicker【发布时间】：2020-02-2111:53:49【问题描述】：当日期选择器返回selecteddate时，代码应自动显示时间选择器。当时间选择器返... 查看详情
日期范围选择器 html5
】日期范围选择器html5【英文标题】：daterangepickerhtml5【发布时间】：2015-12-1505:57:54【问题描述】：我想推出一个日期范围选择器，如下图所示。idealoutput这是我现在正在执行的更新代码以及我现在拥有的输出。$(function()$("#fromperi... 查看详情
禁用日期的 HTML5 日期选择器在 Angular 中不起作用
】禁用日期的HTML5日期选择器在Angular中不起作用【英文标题】：HTML5DatepickerwithdisableddatesnotworkinginAngular【发布时间】：2018-08-2200:18:29【问题描述】：我想在日期选择器(HTML5)中禁用过去的日期。当我在没有任何条件的情况下（自... 查看详情
点击日期字段时如何调出日期选择器？
】点击日期字段时如何调出日期选择器？【英文标题】：Howtobringupadatepickerwhenadatefieldistapped?【发布时间】：2015-06-2316:03:21【问题描述】：我有一个带有日期文本字段的视图。我希望当前日期默认为“今天”，但如果用户想要输... 查看详情
网页的日期选择器，只允许点击特定日期
】网页的日期选择器，只允许点击特定日期【英文标题】：Datepickerforwebpagethatcanallowonlyspecificdatestobeclicked【发布时间】：2010-12-2519:32:20【问题描述】：是否有Javascript或某些库可以为网页创建日期选择器（类似于JqueryUIDatePicker，... 查看详情
为啥 IE8 中不显示 Jquery 日期选择器图标？
】为啥IE8中不显示Jquery日期选择器图标？【英文标题】：Whyisn\'tJquerydatepickericonshowinginIE8?为什么IE8中不显示Jquery日期选择器图标？【发布时间】：2012-01-1906:55:20【问题描述】：我的html页面中有以下代码。图标存在且图片路径有... 查看详情
使用纯 Javascript 隐藏默认日期选择器 UI [重复]
...想用键盘输入。我可以阻止默认日期选择器打开吗？当我点击或单击输入字段时会打开它？<inputtype="date"id="picke 查看详情