Pre-populating Date Input Field With Javascript

I am trying to prepopulate a date into an html 'date' input field, but it ignores the values I try to pass: ... ...

Solution 1:

It must be set in ISO-format.

(function () {
    var date = newDate().toISOString().substring(0, 10),
        field = document.querySelector('#date');
    field.value = date;
    console.log(field.value);

})()

http://jsfiddle.net/GZ46K/

Solution 2:

Why Not to Use toISOString()

The <input type='date'> field takes a value in ISO8601 format (reference), but you should not use the Date.prototype.toISOString() function for its value because, before outputting an ISO8601 string, it converts/represents the date/time to UTC standard time (read: changes the time zone) (reference). Unless you happen to be working in or want that time standard, you will introduce a bug where your date will sometimes, but not always, change.

Populate HTML5 Date Input from Date Object w/o Time Zone Change

The only reliable way to get a proper input value for <input type='date'> without messing with the time zone that I've seen is to manually use the date component getters:

let d = newDate();
let datestring = d.getFullYear().toString() + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');
document.getElementById('date').value = datestring;

/* Or if you want to use jQuery...
$('#date').val(datestring);
*/

<inputid='date'type='date'>

Populate HTML5 Date & Time Fields from Date Object w/o Time Zone Change

This is beyond the scope of the original question, but for anyone wanting to populate both date & time HTML5 input fields from a Date object, here is what I came up with:

// Returns a 2-member array with date & time strings that can be provided to an// HTML5 input form field of type date & time respectively. Format will be// ['2020-12-15', '01:27:36'].functiongetHTML5DateTimeStringsFromDate(d) {

  // Date stringlet ds = d.getFullYear().toString() + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');

  // Time stringlet ts = d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0') + ':' + d.getSeconds().toString().padStart(2, '0');

  // Return them in arrayreturn [ds, ts];
}

// Date objectlet d = newDate();

// Get HTML5-ready value stringslet dstrings = getHTML5DateTimeStringsFromDate(d);

// Populate date & time field valuesdocument.getElementById('date').value = dstrings[0]
document.getElementById('time').value = dstrings[1]

/* Or if you want to use jQuery...
$('#date').val(dstrings[0]);
$('#time').val(dstrings[1]);
*/

<inputtype='date'id='date'><inputtype='time'id='time'step="1">

Solution 3:

Thank you j08691. That link was the answer.

To others struggling like me, when they say input is "yyyy-mm-dd" the MEAN it!

You MUST have 4 digits for the year. You MUST have a dash and no spaces. You MUST have 2 digits for day and month.

In my example myDate.getMonth for January would only return "1" (actually it returns "0" because for some reason javascript counts months from 0-11). To get this right I had to do the following:

var myDate, day, month, year, date;
myDate =newDate();
day= myDate.getDate();
if (day<10)
  day= "0" +day;
month= myDate.getMonth() +1;
if (month<10)
  month= "0" +month;
year= myDate.getYear();
date=year+ "-" +month+ "-" +day;
$("#date").val(date);

I hope this helps others not waste hours like I did testing this before October or before the 10th of the month! LOL

Solution 4:

Here is an answer based on Robin Drexlers but in local time.

//Get the local date in ISO formatvar date = newDate();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 10);

//Set the field valuevar field = document.querySelector('#date');
field.value = datestr;

If it's a datetime field you're modifying (as opposed to just the date) don't forget to add the time T00:00, or change the substring to 16 characters for example:

//Get the local date and time in ISO formatvar date = newDate();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 16);

//Set the field valuevar field = document.querySelector('#datetime');
field.value = datestr;

Solution 5:

This below code populates the local date . The accepted answer populates UTC date.

var date = newDate();
  field = document.querySelector('#date-id');
  var day = date.getDate();
  if(day<10){ day="0"+day;}

  var month = date.getMonth()+1;
  if(month<10){ month="0"+month;}

  field.value = date.getFullYear()+"-"+month+"-"+day;