Html 在 Chrome 中显示本机日期选择器的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15530850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Method to show native datepicker in Chrome
提问by Nathan P
I use <input type="date">fields that gracefully fallback to jQuery when the browser does not have support for the field. Relatively recently, Chrome started offering a native date picker, which is great. But I have found that many users miss the little arrow that brings up the calendar and therefore miss the fact that there is an easy calendar for date selection.
<input type="date">当浏览器不支持该字段时，我使用优雅回退到 jQuery 的字段。相对最近，Chrome 开始提供原生日期选择器，这很棒。但我发现许多用户错过了调出日历的小箭头，因此错过了一个简单的日期选择日历。
To make this more intuitive, it would be great if I could bring up the native datepicker UI when the user moves the focus to the input or clicks another element (like a small calendar icon).
为了使这更直观，如果我能在用户将焦点移动到输入或单击另一个元素（如小日历图标）时调出本机日期选择器 UI，那就太好了。
Is there a method that I can use in Chrome to trigger the datepicker UI?
有没有一种方法可以在 Chrome 中使用来触发日期选择器 UI？
采纳答案by Jared Farrish
I don't think you can trigger the native calendar control to display, but you could highlight it a bit more:
我不认为您可以触发本机日历控件显示，但您可以将其突出显示一点：
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" />You can, as it is, preventit from displaying, e.g, from the docs:
您可以按原样阻止它显示，例如，从文档中：
You can disable the native calendar picker by the following code:
您可以通过以下代码禁用本机日历选择器：
<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>
Here's the documentation from Webkit, where I got the above:
这是来自 Webkit 的文档，我在那里得到了上述内容：
http://trac.webkit.org/wiki/Styling%20Form%20Controls
http://trac.webkit.org/wiki/Styling%20Form%20Controls
Maybe that can be torqued and made to display the date picker, but ask yourself if you'd like every calendar control flying out every time you roamed your mouse across a page?
也许可以扭转并使其显示日期选择器，但问问自己是否希望每次在页面上漫游鼠标时每个日历控件都飞出？
This answer was also helpful:
这个答案也很有帮助：
回答by Andy
Here is a way to trigger the datepicker when users click on the field itself, because computer illiterate users don't know where they should click:
这是一种在用户点击字段本身时触发日期选择器的方法，因为计算机文盲的用户不知道他们应该点击哪里：
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: "BC";
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">Links:
链接：
回答by Micha? ?rajer
The trick is to fire F4KeyboardEvent on input element:
诀窍是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);
here is jsfiddle: http://jsfiddle.net/v2d0vzrr/
这是 jsfiddle：http: //jsfiddle.net/v2d0vzrr/
BTW, there is an interesting bug in chrome. If you open jsfiddle in separate tab, the calendar popup will be shown on current tab. It's already reported.
顺便说一句，chrome 中有一个有趣的错误。如果您在单独的选项卡中打开 jsfiddle，日历弹出窗口将显示在当前选项卡上。已经报道了。
回答by Madacol
I got cinatic's solutionworking on Chrome thank's to Andy's trick, and I added a sample hovering styling.
感谢Andy 的技巧，我在 Chrome 上使用了cinatic 的解决方案，并且我添加了一个示例悬停样式。
div {
position: relative;
}
input {
position: absolute;
opacity: 0;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
input:hover + button {
background-color: silver;
}<div>
<input type="date">
<button id="calendar_text">Search Date </button>
</div>Beware!this styling may trigger unpleasant memories, use at your own risk!
谨防！这种造型可能会引发不愉快的回忆，使用风险自负！
Andy's trick: expands Chrome's datepicker's arrow through out the input
安迪的技巧：在整个输入中扩展 Chrome 的日期选择器的箭头
cinatic's solution: hides the input on top of another element
cinatic 的解决方案：将输入隐藏在另一个元素之上
回答by Philip Murphy
For desktop (and mobile), place input in a div with relative positioning and an icon, with the input styled as follows:
对于桌面（和移动），将输入放置在具有相对定位和图标的 div 中，输入样式如下：
input {
position: absolute;
opacity: 0;
&::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
}
}
This stretches the picker indicator over the complete parent div, so that it always shows the date control when you tap the parent div's icon and/or text.
这会在整个父 div 上拉伸选择器指示器，以便在您点击父 div 的图标和/或文本时始终显示日期控件。
回答by cinatic
I think people want very often to use another icon or element to open the native datepicker box.
我认为人们经常希望使用另一个图标或元素来打开本机日期选择器框。
I figured out that the javascript solution with "click() & .focus()" only worksin webkit and some other desktop browsers but unfortunatly not in FireFox.
我发现带有 "click() & .focus()" 的 javascript 解决方案仅适用于 webkit 和其他一些桌面浏览器，但不幸的是不适用于 FireFox。
But It is possible by another way, by overlaying the inputField over the icon element (or whatever you want to use) and made it invinsible by opacity 0.
但是可以通过另一种方式将 inputField 覆盖在图标元素（或任何您想使用的元素）上，并通过不透明度 0 使其不可见。
This works really greaton mobile devices, for desktop devices i would suggest you to add the onclick event as fallback "$('.dateInpuBox').click().focus()"
这真正伟大的作品在移动设备，桌面设备，我会建议你到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>