在Chrome中显示本机日期选择器的方法 [英] Method to show native datepicker in Chrome

问题描述

当浏览器不支持该字段时，我使用< input type =date> 字段，它们优雅地回退到jQuery。相对最近，Chrome开始提供本地日期选择器，这非常棒。但我发现很多用户错过了带有日历的小箭头，因此错过了日期选择的简单日历。

为了使这更直观，它会是如果我可以在用户将焦点移至输入或点击另一个元素（如小日历图标）时调出本机日期选择器用户界面，那就太好了。

是否有方法我可以在Chrome中使用触发datepicker用户界面？

解决方案

我不认为您可以触发本机日历控件显示，但你可以突出显示它：

input [type = date]：hover :: - webkit-calendar-picker-indicator {color：red ;} input [type =date]：hover：after {content：Date Picker;颜色：＃555; padding-right：5px;} input [type =date] :: - webkit-inner-spin-button {/ * display：none; <悬停时崩溃Chrome * / -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

也许这样做可以扭转并显示日期选择器，但问问自己是否希望每次都有日历控件飞出你在一个页面上漫游你的鼠标？

这个答案也很有帮助：

https://stackoverflow.com/a/15107073/451969

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.

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).

Is there a method that I can use in Chrome to trigger the datepicker UI?

解决方案

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, prevent it 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:

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:

https://stackoverflow.com/a/15107073/451969

这篇关于在Chrome中显示本机日期选择器的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！