當瀏覽器不支持該字段時，我使用<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