JavaScript date objects#

Parsing ISO format strings into a Date object#

I had date times that looked like this:

2022-03-05 14:35

Passing this string to the Date() constructor breaks in interesting ways: it assumes they are in the browser’s current timezone, and it breaks in Safari producing an Invalid Date error.

This worked instead:

1
new Date(o.datetime.replace(" ", "T") + ":00Z"))

Safari requires dates to look like this - without the T you get Invalid Date:

2022-03-05T14:35:00Z

Adding the trailing Z causes the date to be treated as if it was UTC. This can be helpful if you plan to work with them in a mostly timezone-unaware fashion, though see the note about using {timeZone: "UTC"} with the formatting methods later in this document.

Timezones#

JavaScript date objects REALLY want to be helpful with timezones. Consider the following examples, here using .toString():

1
(new Date("2021-01-15T14:31:00")).toString()
2
"Fri Jan 15 2021 14:31:00 GMT-0800 (Pacific Standard Time)"
3

4
(new Date("2021-01-15T14:31:00Z")).toString()
5
"Fri Jan 15 2021 06:31:00 GMT-0800 (Pacific Standard Time)"

In both cases the .toString() method converts to my current timezone, Pacific Standard Time. Note how the one with the Z gets displayed as 06:31:00 while the one without the Z is shown as 14:31:00.

Differences between dates#

I wanted to calculate the number of minutes difference between a start date and an end date. Subtracting the two gives you a difference between them as in integer number of milliseconds! So this gives you minutes:

1
let diff = end.getTime() - start.getTime();
2
let minutes = Math.round(diff / 60 * 1000);

Displaying dates#

The closest JavaScript gets to Python’s handy strftime() method is the much more unwieldly toLocaleDateString() method. Some examples:

1
(new Date).toLocaleDateString("en-US", {
2
  weekday: "long",
3
  year: "numeric",
4
  month: "long",
5
  day: "numeric",
6
})
7
"Sunday, January 16, 2022"
8
(new Date).toLocaleTimeString("en-US")
9
"12:12:29 PM"

These are also timezone aware. Passing timeZone: "UTC" to them can be useful, for example:

1
// This outputs in my timezone, PST:
2
(new Date("2021-01-22T15:03:00Z")).toLocaleTimeString("en-US")
3
"7:03:00 AM"
4
// This keeps the output in UTC:
5
(new Date("2021-01-22T15:03:00Z")).toLocaleTimeString(
6
    "en-US", {timeZone: "UTC"}
7
)
8
"3:03:00 PM"

MDN documentation:

• toLocaleDateString()
• toLocaleTimeString()

Discussion#

Lots of useful comments on this in replies on Twitter, including recommendations for these libraries:

• Intl.DateTimeFormat() for even more advanced formatting options in the browser standards
• Luxon - the more modern alternative to the no longer recommended Moment.js
• date-fns as a more modular modern alternative
• GitHub’s time-elements web components
• There’s a new browser standard for JavaScript date operations coming in the future called Temporal, described in detail here