I had some code that worked well before:

(new Date()).toLocaleDateString("en", { dateStyle: "medium", timeStyle: "medium" })

in Google Chrome (right now I am using the latest version 87.0.4280.67), and it seemed from March 2020 to Nov 2020, it has stopped working and it'd throw an error:

Uncaught TypeError: Invalid option : timeStyle

and the MDN docs doesn't mention it whatsoever, and I remember the MDN docs was exactly where it was suggesting to use timeStyle in the past. Instead, I see options such as

{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }

How does it work now and are there some pre-defined formats that can be used?

I had some code that worked well before:

(new Date()).toLocaleDateString("en", { dateStyle: "medium", timeStyle: "medium" })

in Google Chrome (right now I am using the latest version 87.0.4280.67), and it seemed from March 2020 to Nov 2020, it has stopped working and it'd throw an error:

Uncaught TypeError: Invalid option : timeStyle

and the MDN docs doesn't mention it whatsoever, and I remember the MDN docs was exactly where it was suggesting to use timeStyle in the past. Instead, I see options such as

{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }

How does it work now and are there some pre-defined formats that can be used?

• javascript

Share Improve this question Follow edited Nov 26, 2020 at 12:32 nonopolarity asked Nov 26, 2020 at 12:14 nonopolaritynonopolarity 151k142142 gold badges490490 silver badges782782 bronze badges 5

• @Andreas it throws an error. What do you expect? Anybody can type that into Chrome and see the error. What kind of "sample" do you want? – nonopolarity Commented Nov 26, 2020 at 12:19
• Here is a demo. Weirdly it works on Chrome but not in Firefox. – VLAZ Commented Nov 26, 2020 at 12:20
• Does this answer your question? Javascript: Firefox ignores dateStyle and timeStyle options in both Date.toLocaleString and Intl.DateTimeFormat – jonrsharpe Commented Nov 26, 2020 at 12:21
• "Anybody can type that into Chrome and see the error." I'm not getting an error. Moreover, even if I did, then perhaps in another 6 months I'd stop getting the error. Or I get a different one. Future visitors will have a hard time seeing if this applies to them. – VLAZ Commented Nov 26, 2020 at 12:22
• Also note that MDN does mention "The locales and options arguments are not supported in all browsers yet." – jonrsharpe Commented Nov 26, 2020 at 12:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is what I found so far that work well:

Although toLocaleDateString still takes a locale and options as indicated on MDN:

dateObj.toLocaleDateString([locales[, options]])

it does not work like before. To be able to use the pre-defined formats such as a full, long, medium, or short date or time, the Intl.DateTimeFormat is used instead:

The DateTimeFormat object is not to be supplied to toLocaleDateString for it to work:

(new Date()).toLocaleDateString(new Intl.DateTimeFormat("en", { dateStyle: "medium", timeStyle: "medium" }))   
// => "11/26/2020"

This would work:

new Intl.DateTimeFormat('en', { dateStyle: "medium", timeStyle: "medium" }).format(new Date())    
// => "Nov 26, 2020, 4:52:55 AM"

There are currently two docs and this page doesn't have the information while this one does.

As of MDN toLocaleDateString

The toLocaleDateString() method returns a string with a language sensitive representation of the date portion of this date.

So I guess the timeStyle option is invalid because the method only regards the date portion anyway, thus the option has no effect. For me using toLocaleString instead of toLocaleDateString works in Google Chrome:

(new Date()).toLocaleString("en", { dateStyle: "medium", timeStyle: "medium" })