当浏览器不支持该字段时，我使用<input type="date">字段，它们优雅地回退到jQuery。相对最近，Chrome开始提供本地日期选择器，这非常棒。但是我发现很多用户错过了带有日历的小箭头，因此错过了日期选择的简单日历。在Chrome中显示本机日期选择器的方法
为了使这个更直观，这将是巨大的，如果当用户移动焦点到输入或点击另一个元素（如一个小日历图标），我可以弹出本地日期选择器UI。
有没有一种方法可以在Chrome中用来触发datepicker UI？
我不认为你可以触发本地日历控件来显示，但你可以高亮显示多一点：
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
也许可以扭转，并作出显示日期选择器，但如果你会问自己每当您将鼠标移动到页面上时，每个日历控件都会飞出去？
这个答案也是有帮助的：
有办法做到这一点 - 请参阅我的回答 – 2015-06-17 14:59:07
诀窍是火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/
BTW， Chrome中有一个有趣的错误。如果您在单独的选项卡中打开jsfiddle，则日历弹出窗口将显示在当前选项卡上。 已经是reported。
initKeyboardEvent已被弃用，除了使用'initKeyboardEvent'外，是否有上述脚本的替代方案。 – karmendra 2015-11-29 10:54:36
至少在铬你应该使用 inputDateElem.focus（）; 调度前 – bortunac 2016-02-20 13:30:06
这不起作用，至少现在不行了。 MDN状态 - '注意：手动触发事件不会生成与该事件相关的默认操作。例如，手动触发按键事件不会导致该字母出现在焦点文本输入中。对于UI事件，这对于安全原因很重要，因为它阻止脚本模拟与浏览器本身交互的用户操作。“（https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent） – tiblu 2016-11-22 16:04:55
我想人们很想经常使用另一个图标或元素来打开本机日期选择框。
我想通了，用JavaScript解决方案“点击（）& .focus（）”仅工作在WebKit的和其他一些桌面浏览器，但不幸的是不能在Firefox。
但是，通过将inputField覆盖在图标元素（或任何您想使用的）上并通过不透明度0使其变得不可靠，可以通过其他方式实现。
这作品上移动设备真的很棒，桌面设备，我建议你添加的onclick事件作为后备 “$（ 'dateInpuBox'）。点击（）。对焦（）”
.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>It works !: $（'。dateInpuBox'）。click（）。focus（） – 2016-04-01 19:11:27
这里是触发日期选择器，当用户在该领域本身单击，因为电脑盲用户不知道的方式，他们应该点击：
个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">链接：
如果你这样做，你会失去小上/下按钮的功能。 – Postlagerkarte 2018-02-09 14:02:27
@Postlagerkarte这就是为什么我描述了如何让它们再次在代码片段下工作。这个片段是为了给你一个想法，你应该根据自己的需要进行调整。 – Andy 2018-02-16 22:31:32
我调整了代码片段，以支持清除，上下按钮。 – Andy 2018-02-16 23:05:08
对于桌面（和移动），将输入与相对定位和图标一个div，输入风格如下：
input {
position: absolute;
opacity: 0;
&::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
}
}
这会将选取器指标延伸到完整的父div上，以便在您点按父div的图标和/或文本时始终显示日期控制。
如果你问我想摆脱那个胡萝卜图标，那么我认为这是不可能的。 – defau1t 2013-03-20 17:49:54
@ defau1t你可以用一些CSS去除箭头，但我不认为这是被问到的。尽管更一致，但用户可以隐藏箭头并在用户点击日历时触发本地事件。 – mafafu 2013-03-20 17:53:20
我不知道你可以触发本地日期选择器打开，但可能有一个设置来告诉它默认打开？ – 2013-03-20 18:06:04