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

Question

<input type="date">当浏览器不支持该字段时，我使用的字段会优雅地回退到jQuery。相对最近，Chrome开始提供本机日期选择器，这很棒。但是我发现许多用户都错过了带起日历的小箭头，因此错过了一个易于选择日期的日历这一事实。为了使操作更直观，当用户将焦点移至输入或单击其他元素（如小日历图标）时，我可以调出本机datepicker UI会很棒。我可以在Chrome中使用一种方法来触发日期选择器UI吗？

Answer 1

当用户单击字段本身时，这是一种触发日期选择器的方法，因为不识字的计算机用户不知道应该单击何处：

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">