<input type="date">当浏览器不支持该字段时，我使用优雅回退到 jQuery 的字段。相对最近，Chrome 开始提供原生日期选择器，这很棒。但我发现许多用户错过了调出日历的小箭头，因此错过了一个简单的日期选择日历。
为了使这更直观，如果我能在用户将焦点移动到输入或单击另一个元素（如小日历图标）时调出本机日期选择器 UI，那就太好了。
有没有一种方法可以在 Chrome 中使用来触发日期选择器 UI？
在 Chrome 中显示本机日期选择器的方法
IT技术
javascript
html
2021-01-23 23:34:47
6个回答
这是一种在用户点击字段本身时触发日期选择器的方法，因为计算机文盲的用户不知道他们应该点击哪里：
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">链接：
我不认为您可以触发本机日历控件显示，但您可以将其突出显示一点：
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
也许可以扭转并使其显示日期选择器，但问问自己是否希望每次在页面上漫游鼠标时每个日历控件都飞出？
这个答案也很有帮助：
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 的解决方案：将输入隐藏在另一个元素之上
诀窍是F4在输入元素上触发KeyboardEvent：
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，日历弹出窗口将显示在当前选项卡上。已经报道了。
参考安迪的回答，我让整个区域都可以点击并删除了日历图标。
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">