3 Neat Features of JavaScript's Much-Maligned Date Class

JavaScript's Date class is a common source of frustration, and there's countless blog posts on the internet describing precisely why Date is so hard to work with:

1) Formatting is limited and hard to work with, and doesn't have great browser support
2) The string formats that the Date() constructor accepts are quirky and hard to grasp
3) Limited timezone support
4) And many more

The limitations of Date are a big reason why developers are so excited about the new Temporal API. But don't write off the Date class completely. Believe it or not, the Date class has a few delightful features that we love.

1) You can compare dates using < and >

One tragic limitation of the Date() class is that neither === nor == can determine whether two dates are equal.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 === d3; // false
d1 == d3; // false

But, oddly enough, < and > work for determining whether one date is before or after another. You don't need Moment's or date-fns' isAfter() function.

d1 < d2; // false
d1 < d3; // false

d2 < d1; // true

2) Subtracting two dates returns the difference between the dates in milliseconds

The addition operator + notoriously doesn't work well with JavaScript dates. Adding 1000 to a date just returns a string with 1000 concatenated to the end of the date as a string.

const d = new Date();

d + 1000; // 'Tue Sep 21 2021 18:06:39 GMT-0400 (Eastern Daylight Time)1000'

However, if you subtract two Date instances, you get back the difference in milliseconds.

const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 - d3; // 0
d1 - d2; // 1 year in milliseconds, 1000 * 60 * 60 * 24 * 365

Even better, if subtract a number from a date, JavaScript converts the date to the unix timestamp and subtracts the number from that. So, while you can't easily add to a date, you can subtract from a date.

const d1 = new Date('2019-06-01');

d1; // 2019-06-01T00:00:00.000Z

new Date(d1 - 1000 * 60 * 60 * 24 * 365); // 2018-06-01T00:00:00.000Z

For example, to add 1 year to a date (modulo leap years, leap seconds, etc.) you can subtract a negative number from the date as shown below.

const d2 = new Date('2018-06-01');

new Date(d2 - -1 * 1000 * 60 * 60 * 24 * 365); // 2019-06-01T00:00:00.000Z

3) Basic Timezone Formatting

Most developers don't know that you can format dates in arbitrary timezones using the toLocaleString() method. The tradeoff is that some older browsers, like IE, don't support IANA timezone names. Here's an example of basic date formatting in JavaScript with timezones.

const date = new Date('2019-06-01T08:00:00.000Z');
// "June 01, 2019, 2 AM"
date.toLocaleString('en-US', {
  month: 'long',
  day: '2-digit',
  year: 'numeric',
  hour: '2-digit',
  timeZone: 'America/Denver' // 6 hours behind UTC
});

While toLocaleString() isn't perfect, it does provide some rudimentary formatting, including timezone support. We still recommend using Moment or date-fns for most apps, but you can get away with toLocaleString() for some basic formatting.