admin管理员组文章数量:1134247
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 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?
Share Improve this question asked Mar 20, 2013 at 17:38 Nathan PNathan P 1,0061 gold badge8 silver badges14 bronze badges 5- if you are asking that I want to get rid of that carrot icon, then I think that is impossible. – defau1t Commented Mar 20, 2013 at 17:49
- @defau1t you CAN get rid of the arrows with some CSS, but I don't think that's what's being asked. Although to be more consistent, one could probably hide the arrows and fire the native event when the user clicks the calendar. – mafafu Commented Mar 20, 2013 at 17:53
- I don't know that you can trigger the native date picker to open, but there might be a setting to tell it to open by default? – Jared Farrish Commented Mar 20, 2013 at 18:06
- 2 @nathan-p, you are welcome ;) jsfiddle.net/e9bat3wh – Eugene Kuzmenko Commented Feb 3, 2015 at 16:40
- Related stackoverflow.com/questions/14946091/… – TylerH Commented Apr 13, 2022 at 15:37
12 Answers
Reset to default 81This answer is outdated, i suggest to use the showPicker() method as described in this answer before trying my outdated solution.
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: "\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">Links:
- List of symbols
- codepen example with font-awesome icon
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
2024 Update
<input type="date" onfocus="this.showPicker()"/>
HTMLInputElement.showPicker() is now compatible with major browsers https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
Outdated answer
Edit 2020: It seems there was a change in chrome, and previous answers do not work anymore.
I made a hacky workaround that you can tune to your needs.
This new method increases size of the calendar icon to overflow it's input container in order to completely cover it. You can tune the position and size by tuning these parameters:
top: -150%;
left: -150%;
width: 300%;
height: 300%;
The bigger, the more stable. But still a hack on top of a hack
Updated July 2020 - Works with new Chrome's calendar-picker
label {
display: inline-block;
position: relative;
line-height: 0;
}
input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
cursor: pointer;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
top: -150%;
left: -150%;
width: 300%;
height: 300%;
cursor: pointer;
}
input:hover + button {
background-color: silver;
}<label>
<input type="date">
<button id="calendar_text">Search Date
本文标签：
javascriptMethod to show native datepicker in ChromeStack Overflow
版权声明：本文标题：javascript - Method to show native datepicker in Chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：http://www.betaflare.com/web/1736854086a1955637.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论