Setting the date in date field sets it with one day before

Question

I am using the date input type to display/get dates from a form in HTML:

<input type="date">

To set the date from JavaScript I do:

myInput.valueAsDate = new Date();

This works fine. But if I want to set another date object, for example:

myInput.valueAsDate = new Date(1995, 0, 1);

It displays 12/31/1994–which is exaclty one day before the 1995 New Year eve. If I add 24 as hours argument, the date is displayed correctly, but the date object itself is obviously 2^nd of January, 1995, which is not a good solution to this problem.

console.log(myInput.valueAsDate = new Date(1995, 0, 1));
console.log(myInput.valueAsDate);

<input type="date" id="myInput">

I get this in the console:

Sun Jan 01 1995 00:00:00 GMT+0200 (EET)
Sat Dec 31 1994 02:00:00 GMT+0200 (EET)

Is this a browser issue? Are there any workarounds/solutions?

And finally, I do not want to use any plugin to display/get the dates but I want to use the natative date input element (at least, the question is about it :-)).

I reproduced this in Chromium and Chrome. Firefox seems not to support the date type inputs yet.

@DrewDahlman Oh, looks like it was fixed. I'm using 45.0.2454.85. Post an answer, then! `:-)` If you find the issue in Chromium, I would appreciate it even more. :) — Ionică Bizău, Oct 06 '15 at 14:09
I also use 45.0.2454.101 (64-bit) but I still have the issue in the question. :-) — silviubogan, Oct 06 '15 at 14:10
Ohhhh, OK! So, @DrewDahlman what OS are you using? Me and Silviu are using Ubuntu. — Ionică Bizău, Oct 06 '15 at 14:11
I have a hypothesis: Your profile says you are in Romania. Upon testing, it looks like `new Date(...)` creates a new object with the given time *in your current* time zone. Midnight January 1, 1995 was still 12/31/94 in UTC. Could Chrome be mishandling that? — belph, Oct 06 '15 at 14:22
valueAsDate property is actually a Date without a specific timezone. It binds itself with your local GMT, so the result might be different for different users coming from different timezones. — Manu, Oct 06 '15 at 14:24
That is actually really interesting about the timezone thing. good to know! — Drew Dahlman, Oct 06 '15 at 14:55
@Manu—"*your local GMT*"? Local and GMT are different things except for those whose offset is +0. — RobG, Oct 20 '20 at 00:52
@RobG pardon me, meant local timezone back then :) digging a comment out from 2015 :)) it's clear from the rest of the message.. — Manu, Oct 21 '20 at 17:15

Bobby Tables · Accepted Answer · 2015-10-06T14:42:20.270

8

It's the timezone difference read this.

Apparently when using new Date() you use the current time zone and valueAsDate takes a GMT dateTime

Changing you code to something like this

console.log(myInput.valueAsDate = new Date(1995, 0, 1,12));

should work

Update 1

console.log(myInput.valueAsDate = new Date(Date.UTC(1995, 0, 1));

Should work on all timezones.

edited Oct 06 '15 at 14:42

answered Oct 06 '15 at 14:24

Bobby Tables

2,953
7
29
53

Oh, good point! For posterity, could you post a reference how to transform a date in GMT date time? – Ionică Bizău Oct 06 '15 at 14:27
1

Also, is there any way to ignore the timezone somehow? I would like to just display the date from the date object. – Ionică Bizău Oct 06 '15 at 14:28
1

Will `new Date(1995, 0, 1,12)` work over the globe in all timezones? – Ionică Bizău Oct 06 '15 at 14:33
@IonicăBizău i don't think you can ignore the timezones. But if you create it with just `new Date()` your users will get their current date which is ok. If you get it from a server and you site is global you should care about timezones. so it's working as expected and maybe you shouldn't be searching for a workaround. – Bobby Tables Oct 06 '15 at 14:59
1

I guess the `Date.UTC` thingy is a nice solution. Thanks. :) – Ionică Bizău Oct 06 '15 at 15:05

Setting the date in date field sets it with one day before

1 Answers1

Linked

Related