How to convert JavaScript Date object to string that is compatible with datetime-local input?

Question

Basically I have a Date object. How can convert it to a string compatile with datetime-local format yyyy-MM-ddThh:mm?

I tried Date.toISOString method, but it doesn't work as it appends .SSSZ at the end. Gives me the following output The specified value "2017-04-10T17:02:00.320Z" does not conform to the required format. The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS"..

Does anyone have any clean solution to this problem?

@charlietfl I did my research more than enough Sir. I was clearly asking for a clean, native solution since I'm using native constructions. — spalonytoster
– spalonytoster, Commented Apr 10, 2017 at 18:00
I disagree about the "clearly a lack of research" comment. I too have spent much time trying to perform the simple task of setting the default value of a datetime-local input to today's date. Of course the date format can be manually manipulated to fit the required format, but it seems like it would be such a common task that there would be a "clean" way to do it. The toISOString().substring(0, 16) worked great for me. — BizzyBob
– BizzyBob, Commented May 19, 2017 at 4:53
As it turns out, I ended up using moment.js because I was getting the wrong timeszone using the toISOString().substring(0, 16) solution. — BizzyBob
– BizzyBob, Commented May 19, 2017 at 5:19

spalonytoster · Accepted Answer · 2017-04-10 18:08:45Z

21

I used moment.js library to format the date accordingly. This line of code does the trick moment(date).format("YYYY-MM-DDTkk:mm").

edited Apr 10, 2017 at 18:08

answered Apr 10, 2017 at 17:32

spalonytoster

4511 gold badge4 silver badges10 bronze badges

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

2 Comments

dizad87 Over a year ago

did you mean hh instead of the kk?

corpico Over a year ago

Use HH (0-23), not kk (1-24) and not hh (1-12)

T.J. Crowder · Accepted Answer · 2017-04-10 17:25:05Z

12

Either theDate.toISOString().substring(0, 16), or build the string yourself with the getFullYear, getUTCDate, getUTCMonth (remember it starts at 0), etc. methods. Or use a library to do it.

answered Apr 10, 2017 at 17:25

community wiki

T.J. Crowder

2 Comments

spalonytoster Over a year ago

I was afraid that I couldn't do it without string manipulation or external lib. Thank you for the answer.

tobek Over a year ago

Warning! This can mess up the timezone. E.g. if a user in PST selects 4pm, the value in the input field will be 2021-05-17T16:00. If you convert that with (new Date("2021-05-17T16:00")).toISOString() you get 2021-05-17T23:00:00.000Z, the time in UTC. When you cut with substring you just get 2021-05-17T23:00 which is not the value the user entered, and if you feed it back into the datetime-local input the user will find themselves inputting a local tz datetime and when the input field updates it will show a UTC datetime. @Lino Rabolini's answer handles this.

Lino Rabolini · Accepted Answer · 2018-12-17 10:28:27Z

I'm running into the same problem, but I didn't want to use moment or any other big lib just for a simple calculation.

I just used the ISO date but added the timezone offset, so the input doesn't go crazy when using the arrows to navigate the date values.

const offset = new Date().getTimezoneOffset() * 1000 * 60
const getLocalDate = value => {
    const offsetDate = new Date(value).valueOf() - offset
    const date = new Date(offsetDate).toISOString()
    return date.substring(0, 16)
}

basically it adds the timezone offset and converts that to an ISO date, but then we strip the timezone with the substring(0, 16)

this gives us the correct "timezoned ISO" date.

I'm giving it a try but so far it works okay. I wish this gets resolved natively, it is weird that it doesn't work out of the box.

Mehdi · Accepted Answer · 2020-05-01 13:54:24Z

8

use moment.js to format the date to the corresponding one:

moment(new Date()).format('YYYY-MM-DDTHH:mm')

but not: moment(date).format("YYYY-MM-DDTkk:mm") the previous answer is wrong !!
kk is between 1 - 24 (which is not compatible with the textfield DateTime local)

edited May 1, 2020 at 13:54

answered Oct 30, 2018 at 23:13

Mehdi

3965 silver badges7 bronze badges

1 Comment

corpico Over a year ago

For those still wondering, HH is 0-23 while kk is 1-24. kk breaks when showing midnight.

Collectives™ on Stack Overflow

How to convert JavaScript Date object to string that is compatible with datetime-local input?

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related