Method to show native datepicker in Chrome
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
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