Select Page

Prefilling a Date Input

HTML has a special input type for dates, like this: . 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:

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:

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.

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:



If you need both date and time, there is an input for that as well. Just for fun

Or just time! Here we’ll use step again just for fun to limit it to 15 minute increments:

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 Opera Firefox IE Edge Safari
20 9 57 No 13 No

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
11 10 No 4.4 59 55

Prefilling a Date Input is a post from CSS-Tricks

Source:

About The Author

Leave a reply

Your email address will not be published. Required fields are marked *

www.000webhost.com