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:
placeholder won’t do anything in a browser that supports date inputs. Date inputs can have
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:
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:
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
|iOS Safari||Opera Mobile||Opera Mini||Android||Android Chrome||Android Firefox|