在Chrome中显示本机日期选择器的方法

Question

<input type="date">当浏览器不支持该字段时，我使用的字段会优雅地回退到jQuery。相对最近，Chrome开始提供本机日期选择器，这很棒。但是我发现许多用户都错过了带起日历的小箭头，因此错过了一个易于选择日期的日历这一事实。

为了使操作更直观，当用户将焦点移至输入或单击其他元素（如小日历图标）时，我可以调出本机datepicker UI会很棒。

我可以在Chrome中使用一种方法来触发日期选择器UI吗？

Answer 1

当用户单击字段本身时，这是一种触发日期选择器的方法，因为不识字的计算机用户不知道应该单击何处：input[type="date"] {&nbsp; &nbsp; position: relative;}/* create a new arrow, because we are going to mess up the native onesee "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */input[type="date"]:after {&nbsp; &nbsp; content: "\25BC";&nbsp;&nbsp; &nbsp; color: #555;&nbsp; &nbsp; padding: 0 5px;}/* change color of symbol on hover */input[type="date"]:hover:after {&nbsp; &nbsp; 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 {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; width: auto;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; color: transparent;&nbsp; &nbsp; background: transparent;}/* adjust increase/decrease button */input[type="date"]::-webkit-inner-spin-button {&nbsp; &nbsp; z-index: 1;}&nbsp;/* adjust clear button */&nbsp;input[type="date"]::-webkit-clear-button {&nbsp; &nbsp; &nbsp;z-index: 1;&nbsp;}<input type="date">