Prefilling a Date Input | CSS-Tricks

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

Comments

Roger Poole

# August 29, 2017

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.

Chris Coyier

Permalink to comment# August 29, 2017

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.

Leo Frost

# August 30, 2017

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.

$.fn.setNow = function (onlyBlank) {
  var now = new Date($.now())
    , year
    , month
    , date
    , hours
    , minutes
    , formattedDateTime
    ;

  year = now.getFullYear();
  month = now.getMonth().toString().length === 1 ? '0' + (now.getMonth() + 1).toString() : now.getMonth() + 1;
  date = now.getDate().toString().length === 1 ? '0' + (now.getDate()).toString() : now.getDate();
  hours = now.getHours().toString().length === 1 ? '0' + now.getHours().toString() : now.getHours();
  minutes = now.getMinutes().toString().length === 1 ? '0' + now.getMinutes().toString() : now.getMinutes();


  formattedDateTime = year + '-' + month + '-' + date + 'T' + hours + ':' + minutes;

  if ( onlyBlank === true && $(this).val() ) {
    return this;
  }

  $(this).val(formattedDateTime);

  return this;
}

$(function () {
    // Handler for .ready() called.
    $('input[type="datetime-local"]').setNow();

});

Ray Torres

Permalink to comment# August 31, 2017

We have a internal web app for creating meetings and events, most of the time the start date is actually today´s date.

MaxArt

# August 29, 2017

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:

const dateString = date.getFullYear() + '-'
  + ('0' + (date.getMonth() + 1)).slice(-2) + '-'
  + ('0' + date.getDate()).slice(-2);

Ben

# August 29, 2017

I wonder why Chrome and Edge style all of those date inputs with monospace font…

Greg Foreman

# August 29, 2017

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?

Ben

Permalink to comment# August 30, 2017

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.

Muhammad Rehan Saeed

# August 30, 2017

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.

Arno

Permalink to comment# September 7, 2017

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.

Leo Frost

# August 30, 2017

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.

$.fn.setNow = function (onlyBlank) {
  var now = new Date($.now())
    , year
    , month
    , date
    , hours
    , minutes
    , formattedDateTime
    ;

year = now.getFullYear();
  month = now.getMonth().toString().length === 1 ? '0' + (now.getMonth() + 1).toString() : now.getMonth() + 1;
  date = now.getDate().toString().length === 1 ? '0' + (now.getDate()).toString() : now.getDate();
  hours = now.getHours().toString().length === 1 ? '0' + now.getHours().toString() : now.getHours();
  minutes = now.getMinutes().toString().length === 1 ? '0' + now.getMinutes().toString() : now.getMinutes();

formattedDateTime = year + '-' + month + '-' + date + 'T' + hours + ':' + minutes;

if ( onlyBlank === true && $(this).val() ) {
    return this;
  }

$(this).val(formattedDateTime);

return this;
}

$(function () {
    // Handler for .ready() called.
    $('input[type="datetime-local"]').setNow();

});

Jordan

# August 30, 2017

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.

Todd

Permalink to comment# August 31, 2017

You can style some of the date picker elements in Webkit

Todd

# August 31, 2017

MomentJs is awesome for dealing with dates, if anyone is interested.

Iman YCH

# September 10, 2017

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!

postnuclearmorning

# September 14, 2017

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.

This comment thread is closed. If you have important information to share, please contact us.