<input type="date">当浏览器不支持该字段时，我使用优雅地回退到 jQuery 的字段。最近，Chrome 开始提供原生日期选择器，这很棒。但我发现许多用户错过了调出日历的小箭头，因此错过了一个简单的日历选择日期这一事实。
为了使这更直观，如果我可以在用户将焦点移至输入或单击另一个元素（如小日历图标）时调出本机日期选择器 UI，那就太好了。
有没有一种方法可以在 Chrome 中使用来触发 datepicker UI？
问问题
65095 次
11 回答
58
这是一种在用户单击字段本身时触发日期选择器的方法，因为计算机文盲用户不知道应该单击哪里：
input[type="date"] {
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 {
content: "\25BC";
color: #555;
padding: 0 5px;
}
/* change color of symbol on hover */
input[type="date"]: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 {
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 {
z-index: 1;
}
/* adjust clear button */
input[type="date"]::-webkit-clear-button {
z-index: 1;
}<input type="date">链接：
于 2017-08-02T13:05:32.307 回答
25
我不认为您可以触发本机日历控件显示，但您可以将其突出显示多一点：
input[type="date"]:hover::-webkit-calendar-picker-indicator {
color: red;
}
input[type="date"]:hover:after {
content: " Date Picker ";
color: #555;
padding-right: 5px;
}
input[type="date"]::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
}<input type="date" />您可以按原样阻止它显示，例如，从文档中显示：
您可以通过以下代码禁用本机日历选择器：
<style>
::-webkit-calendar-picker-indicator {
display: none;
}
</style>
<input type=date id=dateInput>
<script>
dateInput.addEventListener('keydown', function(event) {
if (event.keyIdentifier == "Down") {
event.preventDefault()
}
}, false);
</script>
这是来自 Webkit 的文档，其中我得到了上述内容：
http://trac.webkit.org/wiki/Styling%20Form%20Controls
也许可以扭转并使其显示日期选择器，但问问自己是否希望每次在页面上漫游鼠标时每个日历控件都飞出？
这个答案也很有帮助：
于 2013-03-20T18:33:59.003 回答
18
编辑 2020： chrome 似乎发生了变化，以前的答案不再起作用。
我做了一个 hacky 解决方法，您可以根据自己的需要进行调整。
这种新方法增加了日历图标的大小以溢出它的输入容器以完全覆盖它。您可以通过调整以下参数来调整位置和大小：
top: -150%;
left: -150%;
width: 300%;
height: 300%;
越大越稳定。但仍然是黑客之上的黑客
2020 年 7 月更新 - 适用于新 Chrome 的日历选择器
label {
display: inline-block;
position: relative;
line-height: 0;
}
input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
cursor: pointer;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
top: -150%;
left: -150%;
width: 300%;
height: 300%;
cursor: pointer;
}
input:hover + button {
background-color: silver;
}<label>
<input type="date">
<button id="calendar_text">Search Date </button>
</label>There's still an issue in Firefox, when a date is selected and you click near the right border, the input will clear, because the input's clear button is right there.
我对 cinatic 的解决方案进行了调整，使其可以在 Chrome 上运行，并根据 2020 年 Chrome 的最新变化调整了Andy 的技巧
安迪的技巧：通过输入扩展 Chrome 的日期选择器的箭头
cinatic 的解决方案：将输入隐藏在另一个元素的顶部
于 2018-11-26T14:59:58.833 回答
16
诀窍是在输入元素上触发F4KeyboardEvent：
function openPicker(inputDateElem) {
var ev = document.createEvent('KeyboardEvent');
ev.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);
inputDateElem.dispatchEvent(ev);
}
var cal = document.querySelector('#cal');
cal.focus();
openPicker(cal);
这是jsfiddle：http: //jsfiddle.net/v2d0vzrr/
顺便说一句，chrome 中有一个有趣的错误。如果您在单独的选项卡中打开 jsfiddle，日历弹出窗口将显示在当前选项卡上。已经报道了。
于 2015-06-17T14:54:20.603 回答
8
参考Andy 的回答，我将整个区域设为可点击并移除了日历图标。
Andy 片段中的结果在左侧有一个不可点击的小区域。（铬 87.0.4280.66）
input.picker[type="date"] {
position: relative;
}
input.picker[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding: 0;
color: transparent;
background: transparent;
}<input class="picker" type="date">于 2020-12-04T06:08:11.947 回答
5
对于桌面（和移动），将输入放置在具有相对定位和图标的 div 中，输入样式如下：
input {
position: absolute;
opacity: 0;
&::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
}
}
这会将选取器指示器拉伸到完整的父 div 上，以便在您点击父 div 的图标和/或文本时始终显示日期控件。
于 2018-03-08T15:59:19.010 回答
3
我认为人们经常希望使用另一个图标或元素来打开本机日期选择器框。
我发现带有“click() & .focus()”的 javascript 解决方案仅适用于 webkit 和其他一些桌面浏览器，但不幸的是不适用于 FireFox。
但是可以通过另一种方式，通过将 inputField 覆盖在图标元素（或您想要使用的任何内容）上，并通过不透明度 0 使其无敌。
这在移动设备上非常有用，对于桌面设备，我建议您将 onclick 事件添加为后备 "$('.dateInpuBox').click().focus()"
.myBeautifulIcon {
position: relative;
width: 50px;
}
.dateInputBox {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}<div class="myBeautifulIcon">
ICON
<input class="dateInputBox" type="date" />
</div>于 2015-07-14T18:00:18.760 回答
2
2021 年 Firefox / Chrome 更新Madacol回复。
受到其他回复的启发，当您单击按钮右侧（重置输入）时，我进一步推动了Madacol 的解决方案，以消除 Firefox 下的不良行为。这里是。
.datepicker{
display: inline-flex;
position: relative;
overflow: clip;
}
.datepicker:focus-within {
outline: black auto 2px;
}
.datepicker > input[type=date] {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
opacity: 0;
cursor:pointer;
}
.datepicker > input[type=date]::-webkit-calendar-picker-indicator {
position: absolute;
top: -150%;
left: -150%;
width: 300%;
height: 300%;
cursor: pointer;
}<!-- Tested on 2021-09 under latest chrome and firefox -->
<label class="datepicker">
<input type="date" value="2021-09-30" />
</label>于 2021-09-30T16:24:00.497 回答
2
Chrome 99 应该通过添加一个showPicker()方法来解决这个问题。从 Chrome 97（发布日期 2021-01-04）开始，它也可用于开发测试（即在功能标志后面）。
于 2022-01-04T11:33:32.573 回答
1
您可以创建另一个本机触发浏览器日期选择器的标签。在火狐上测试：
<input type="date" id="started[date]" name="started[date]">
<label class="btn btn-info btn-date" type="button" for="started[time]">
<i class="far fa-calendar-alt"></i>
</label>
于 2020-09-22T00:55:32.280 回答
0
我只想为任何寻求更简单、更快的解决方案的人添加我的答案。.onfocus我只在输入中使用两个事件.onblur
<input type="text" name="date_picked" onfocus="(this.type='date')" onblur="(this.type='text')">
据我所知，适用于所有浏览器。
于 2021-12-24T10:11:49.073 回答