JavaScript date objects

A few notes on JavaScript Date object, based on trying to do some basic things with them in Observable notebooks.

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:

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():

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

(new Date("2021-01-15T14:31:00Z")).toString()
"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:

let diff = end.getTime() - start.getTime();
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:

(new Date).toLocaleDateString("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
})
"Sunday, January 16, 2022"
(new Date).toLocaleTimeString("en-US")
"12:12:29 PM"

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

// This outputs in my timezone, PST:
(new Date("2021-01-22T15:03:00Z")).toLocaleTimeString("en-US")
"7:03:00 AM"
// This keeps the output in UTC:
(new Date("2021-01-22T15:03:00Z")).toLocaleTimeString(
    "en-US", {timeZone: "UTC"}
)
"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

Related

• javascript Manipulating query strings with URLSearchParams - 2020-10-04
• javascript Working around the size limit for nodeValue in the DOM - 2020-08-21
• sqlite Unix timestamp in milliseconds in SQLite - 2023-04-08
• django Show the timezone for datetimes in the Django admin - 2021-03-02
• sqlite The SQLite now argument is stable within the same query - 2023-02-05
• typescript Very basic tsc usage - 2020-09-06
• observable-plot Histogram with tooltips in Observable Plot - 2021-08-21
• npm Annotated package.json for idb-keyval - 2022-02-10
• javascript Using Tesseract.js to OCR every image on a page - 2021-11-09
• javascript Copy rich text to the clipboard - 2023-03-10

Created 2022-01-16T12:16:03-08:00, updated 2022-01-16T13:20:28-08:00 · History · Edit