How Do You Parse A Date From An Html5 Date Input?

I have an input on my webpage that I am able to set the date on by getting an ISO string and pulling out the first 10 characters. date = new Date(); dateInput.value = date.toISOStr

Solution 1:

If it's an actual date input on a supporting browser, then it will have a valueAsDate property. There's no need to parse it.

Solution 2:

It's interpreting the date as UTC, which, for most time zones, will make it seem like "yesterday". One solution could be to add the time-zone offset back into the date to "convert" it to your local timezone.

Solution 3:

var newDate = newDate(dateInput.value + 'T00:00');

This will give the correct date in any timezone.

Solution 4:

You can also convert the input string from YYYY-MM-DD to MM/DD/YYYY and it then parse the date to get the correct answer.

EXAMPLE:

Don't use:

newDate(Date.parse('2018-09-28')) // Thu Sep 27 2018 19:00:00 GMT-0500 (Central Daylight Time)

Rather use

newDate(Date.parse('09/28/2018')) // Fri Sep 28 2018 00:00:00 GMT-0500 (Central Daylight Time)

(NOTE: I am in CDT)

Tested in Chrome, Firefox, Safari, old Edge, and IE.

Solution 5:

as said by Marty the problem is the difference between the representation of the timezone of the input (UTC defined by W3C) and the JS timezone (local). The solution is to getTimezoneOffset (which is in minutes) and convert everything to milliseconds:

var today = document.getElementById("myInputDate").valueAsDate;
var tomorrow = newDate(today.valueOf() + 86400000 + (today.getTimezoneOffset() * 60000));

86400000 = milliseconds of a day

today.getTimezoneOffset() * 60000 = timezoneOffset in milliseconds