How do you parse a date from an HTML5 date input?

Question

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.toISOString().substr(0,10);

This works perfectly. My problem is that when I try to get the date back out. I am getting the date one day off.

var newDate = new Date(dateInput.value);

I have also tried the following code to make up for it, but it is not always correct either

new Date(Date.parse(element.value) + 86400000)

So my question is: Is there an elegant way to get the correct date consistently. I have been looking around for a little while, but it seems there is not a lot of consistency with date parsing in Javascript.

I have figured out a way to use the string it gives me by just never converting it into a Date, but I am still baffled as to why it is behaving like this. — duckbrain
– duckbrain, Commented May 30, 2013 at 14:46

robertc · Accepted Answer · 2013-05-29 23:09:26Z

28

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.

answered May 29, 2013 at 23:09

robertc

76k19 gold badges201 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

duckbrain Over a year ago

That's cool. I did not know about that property, but it is giving me the same problem. The date is one day behind what I put in the box. I wonder if it is my browser. I am using Chrome 27.0.1453.94 m. I tried it on Internet Explorer, and it does not support the property (surprise).

duckbrain Over a year ago

Firefox does not support it at all. Too bad. I only need it to work on Web-kit based browsers anyway. (iPhone and Android).

robertc Over a year ago

@Duckbrain Are you sure the date is one day behind? What timezone are you in?

Hugh Rawlinson Over a year ago

Actually there is a need to parse it. HTML5 input type="date" elements revert to standard text input elements in old browsers. This is to maintain compatibility. Therefore, rather than using the valueAsDate property, it would be better to parse the value of the element to allow users to input the date manually (formatted according to a label hidden with modernizr/@media queries).

robertc Over a year ago

@CodeO'Clock "If it's an actual date input on a supporting browser"

|

wezten · Accepted Answer · 2018-01-25 09:52:45Z

10

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

This will give the correct date in any timezone.

answered Jan 25, 2018 at 9:52

wezten

2,3663 gold badges26 silver badges53 bronze badges

1 Comment

Crine Over a year ago

Works perfectly. This answer should be the accepted answer since.

Marty Kiker · Accepted Answer · 2013-09-27 17:02:43Z

8

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.

answered Sep 27, 2013 at 17:02

Marty Kiker

1801 silver badge7 bronze badges

2 Comments

duckbrain Over a year ago

You are absolutely right. I am no longer working on this project, but this is the correct answer to the question.

robertc Over a year ago

@Duckbrain That's why I asked you what timezone you were in...

Mendy · Accepted Answer · 2020-06-25 17:44:00Z

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:

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

Rather use

new Date(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.

Liam · Accepted Answer · 2018-09-10 10:49:18Z

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 = new Date(today.valueOf() + 86400000 + (today.getTimezoneOffset() * 60000));

86400000 = milliseconds of a day

today.getTimezoneOffset() * 60000 = timezoneOffset in milliseconds

Mendy · Accepted Answer · 2020-11-05 20:40:00Z

Try using .toLocaleString to get the date into the input, and add the time when parsing it, like this:

date = new Date(); dateInput.value = date.toLocaleString("sv-SE", { hour: "2-digit", minute: "2-digit", second: "2-digit" });

And to get the value into a Date object use:

new Date(inputdateInput.value + "T00:00");

I wrote a little post about converting between Date objects and date inputs here

Collectives™ on Stack Overflow

How do you parse a date from an HTML5 date input?

6 Answers 6

6 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Linked

Related