HTML has a special input type for dates, like this: <input type="date">
. In supporting browsers (pretty good), users will get UI for selecting a date. Super useful stuff, especially since it falls back to a usable text
input. But how do you set it to a particular day?
To set a particular day, you’ll need to set the value
to a YYYY-MM-DD format, like this:
<input type="date" value="1980-08-26">
Minor note: placeholder
won’t do anything in a browser that supports date inputs. Date inputs can have min
and max
, so only a date between a particular range can be selected. Those take the same format. Just for fun we’ve used a step value here to make only Tuesday selectable:
<input type="date" min="2017-08-15" max="2018-08-26" step="7">
How about defaulting the input to the value of today? Unfortunately, there is no HTML-only solution for that, but it’s possible with JavaScript.
<input id="today" type="date">
let today = new Date().toISOString().substr(0, 10);
document.querySelector("#today").value = today;
// or...
document.querySelector("#today").valueAsDate = new Date();
It’s also possible to select a specific week or month. Prefilling those is like this:
<input type="week" value="2014-W02">
<input type="month" value="2018-08">
If you need both date and time, there is an input for that as well. Just for fun
<input type="datetime-local" value="2017-06-13T13:00">
Or just time! Here we’ll use step again just for fun to limit it to 15 minute increments:
<input type="time" value="13:00" step="900">
Live Demo
See the Pen Prefilling HTML date inputs by Chris Coyier (@chriscoyier) on CodePen.
Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
25 | 120 | No | 13 | TP |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
117 | 117 | 4.4 | 17.1 |
Not sure why you’re asking your visitor for today’s date. I usually timestamp any form entry with a hidden field that grabs time and date – in the format I’d like in php.
The web is big place ;)
Perhaps a “food log” where you could be entering a log for today, or yesterday, or 4 days ago. But the default is today.
I developed a harvesting inventory system for gardens. I use a datetime-local input with js running the current datetime. Both the date and time are important because certain herbs are best picked at specific times of the day to maximize oil concentrations. Like Chris says the web is a big place.
We have a internal web app for creating meetings and events, most of the time the start date is actually today´s date.
I’m not sure using
toISOString
is a good idea – it formats the date in relation to the UTC timezone, so it could generate an incorrect date. Or better, the date of another timezone.Sadly, the usual drill is to build the string like this:
I wonder why Chrome and Edge style all of those date inputs with monospace font…
Current version of Firefox is 55, so technically not directly supported in Firefox until 57 is released in mid-Nov. Caniuse has a footnote that says it can be used in release 55 by “using the dom.forms.datetime flag”. How do you do that?
Open Firefox, go to the address “about:config”, validate the notice, then search for the string “dom.forms.datetime” and double-click on it, you will activate the support for these inputs in your browser.
How do most people handle dates and other input types at the moment, I suspect most developers are using some kind of JavaScript date picker.
Is using the built in browser input types really now something that mainstream sites have started using? Lack of Safari support is a downer, that browser seems to be lagging behind in several areas.
I have implemented this on our webshop.
At first it’s a simple field. With Modernizr (Modernizr.inputtypes.date) I detect support for date field. Depending support I either convert it to a date field or load a js datepicker.
It’s worth the effort as we have a lot of mobile users which benefit the most of native datepicker. JS datepickers have to many tiny buttons.
As we are located in Belgium and we have our dates in the dd/mm/yy format you do have to do some js-conversions otherwise you could directly use the date-inputfield with the value prefilled.
I wrote a harvest inventory for my gardens. In it I use the datetime-local input with some js to grab today’s date. The time is important due too the fact that some herbs need to be picked at certain times of day to maximize their oil yields(mints/lemon grass/oregano/tea leaves/basil)
Here is the most basic chunks of code I use to make it work.
Leave it to good old Safari to be the only modern browser that doesn’t support this….looks like I’ll be sticking with jQuery’s datepicker for a few more years. At least you can style that, too, and let’s be honest- designers are going to want styled datepickers.
You can style some of the date picker elements in Webkit
MomentJs is awesome for dealing with dates, if anyone is interested.
Hi guys,
Its good , when you want get date from user for several cause such as birthday or order max time deliver , its high needed :)
nice!
How to style this crazy thing?
Removing every on hover controllers with
input[type=date] {
&::-webkit-clear-button {
display: none;
}
&::-webkit-inner-spin-button {
display: none;
}
&::-webkit-calendar-picker-indicator {
display: none;
}
}
will make this thing useless, no calendar popup, no nothing. Is there any way to enable and style the calendar popup (without 3rd party stuff) without having picker-indicator displayed? Would be great to read article on this.