JavaScript date objects

A few notes on JavaScriptDate 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 theDate() constructor breaks in interesting ways: it assumes they are in the browser's current timezone, and it breaks in Safari producing anInvalid Date error.

This worked instead:

newDate(o.datetime.replace(" ","T")+":00Z"))

Safari requires dates to look like this - without theT you getInvalid Date:

2022-03-05T14:35:00Z

Adding the trailingZ 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():

(newDate("2021-01-15T14:31:00")).toString()"Fri Jan 15 2021 14:31:00 GMT-0800 (Pacific Standard Time)"(newDate("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 theZ gets displayed as06:31:00 while the one without theZ is shown as14: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:

letdiff=end.getTime()-start.getTime();letminutes=Math.round(diff/60*1000);

Displaying dates

The closest JavaScript gets to Python's handystrftime() method is the much more unwieldlytoLocaleDateString() method. Some examples:

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

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

// This outputs in my timezone, PST:(newDate("2021-01-22T15:03:00Z")).toLocaleTimeString("en-US")"7:03:00 AM"// This keeps the output in UTC:(newDate("2021-01-22T15:03:00Z")).toLocaleTimeString("en-US",{timeZone:"UTC"})"3:03:00 PM"

MDN documentation:

Discussion

Lots of useful comments on this inreplies 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 theno longer recommended Moment.js
date-fns as a more modular modern alternative
GitHub'stime-elements web components
There's a new browser standard for JavaScript date operations coming in the future called Temporal,described in detail here

javascriptManipulating query strings with URLSearchParams - 2020-10-04
javascriptWorking around the size limit for nodeValue in the DOM - 2020-08-21
sqliteUnix timestamp in milliseconds in SQLite - 2023-04-08
djangoShow the timezone for datetimes in the Django admin - 2021-03-02
sqliteThe SQLite now argument is stable within the same query - 2023-02-05
typescriptVery basic tsc usage - 2020-09-06
observable-plotHistogram with tooltips in Observable Plot - 2021-08-21
npmAnnotated package.json for idb-keyval - 2022-02-10
javascriptUsing Tesseract.js to OCR every image on a page - 2021-11-09
javascriptCopy 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