CODEWITHSUNDEEP
javascripthtmldateinput
MyTimeFinder
MyTimeFinder

Reputation: 1807

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:

<html>
...
<input id='date' type='date'>
...
</html>

<script>
...
var myDate = new Date();
$("#date").val(myDate);
...

I have also tried passing the date object as a string

var myDate = new Date().toDateString();
$("#date").val(myDate);

When I open the form, the date field is blank. If I eliminate the type="date" tag, the value shows up as a string, but then I don't have access to the datepicker. How do I pre-populate a date input and still have use of the datepicker? I'm stumped.

Thanks.

Upvotes: 28

Views: 53331

Answers (6)

gwelter
gwelter

Reputation: 1173

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. We pad each component according to the HTML date format specification (reference):

let d = new Date();
let datestring = d.getFullYear().toString().padStart(4, '0') + '-' + (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);
*/
<input id='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'].
function getHTML5DateTimeStringsFromDate(d) {

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

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

  // Return them in array
  return [ds, ts];
}

// Date object
let d = new Date();

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

// Populate date & time field values
document.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]);
*/
<input type='date' id='date'>
<input type='time' id='time' step="1">

Upvotes: 18

Laura
Laura

Reputation: 151

I don't have the reputation points to comment on another answer, so I'll just add a new answer. And since I'm adding an answer, I'll give more details than I would've in a comment.

There's an easier way to zero pad than all of the juggling that everyone is doing here.

var date = new Date();

var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day   = ('0' + date.getDate()).slice(-2);
var year  = date.getFullYear();

var htmlDate = year + '-' + month + '-' + day;

console.log("Date: " + htmlDate);

Today, the output would be

Date: 2020-01-07

The code is building a dynamic string by prepending a quoted zero, then taking the last 2 characters with slice(-2). This way, if the zero makes it 01, the last 2 are 01. If the zero makes it 011, then the last two are 11.

As for the month starting at zero silliness, you can also add 1 dynamically before prepending the zero and everything still works. You just have to do the math operation before turning it into a string.

As a side note, I've noticed that when you update a date field, you have to hide the field before setting the value and show it after setting. I don't do this often enough, so I have to re-struggle each time I need to deal with it. Hopefully this will help someone from the future.

waves to future people

Upvotes: 1

mattbell87
mattbell87

Reputation: 575

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

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

//Set the field value
var 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 format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 16);

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

Upvotes: 3

sanath_p
sanath_p

Reputation: 2218

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

  var date = new Date();
  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;

Upvotes: 2

MyTimeFinder
MyTimeFinder

Reputation: 1807

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 = new Date();
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

Upvotes: 7

Robin Drexler
Robin Drexler

Reputation: 4457

It must be set in ISO-format.

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

})()

http://jsfiddle.net/GZ46K/

Upvotes: 58

Related Questions