Check If Today is Between Two Dates in JavaScript

Working with and manipulating dates is a long‑standing and sometimes convoluted process in web development. In one of the very early versions of my website (from all the way back in 2001), I went to great lengths to rebrand the site based on the time of day, the weather conditions, and ‑ of course ‑ special dates such as Christmas.

This was achieved using some fairly complex PHP attached to generated query parameters, producing a different version of the site CSS based on date and time. Obviously, with newer technology comes easier ways of achieving similar.

This current version of my site has been live for over two years now, and as the holidays come ever closer, I'm reminded that I haven't ‑ yet ‑ included an automated way to add a little festive cheer to the site around the holidays.

If you revisit in the coming days (between 20^th December and 4^th January as you'll see in the code examples below), you'll see the introduction of a nice animated snow effect. The same one that also displays when it (rarely) actually does snow here in Brighton.

Because this is all achieved client‑side with React, it's relatively straightforward to compare the date today against a start and end date (using Date) and then trigger the festivities!

A brief overview of how Date works

Mozilla has some great ‑ and very detailed ‑ documentation on how Date and Date() work, but for the sake of this article, the pertinent details are:

The Date object is essentially a platform‑independent representation of a single point in time. Date() returns either a Date object, or a string representation depending on whether it is called as a function or a constructor.

When called as a function, Date() returns a string that represents today's date and time:

Date()//=> 'Thu Dec 08 2022 11:53:54 GMT+0000 (Greenwich Mean Time)'

When called as a constructor, Date() accepts a date in yyyy‑mm‑dd (as a string), and returns a Date object:

new Date('2022/12/25')//=> Sun Dec 25 2022 00:00:00 GMT+0000 (Greenwich Mean Time)

When combined with the getTime() method, these return a string that represents the number of milliseconds that have elapsed since the ECMAScript epoch: midnight at the start of January 1^st, 1970 (UTC) ‑ equivalent to the UNIX epoch.

new Date('2022/12/25').getTime()//=> 1671926400000

Putting Date to use

The process for finding out whether today falls between two dates (for example: to determine whether we're currently in the Christmas period) is as simple as:

1. Store the start and end dates in milliseconds using the Date() constructor and getTime() method;
2. Get the current time, again using Date().getTime();
3. Compare the three to see if the current time is greater than the start date and less than the end date;
4. If so, today is between those two dates.

// 1const christmasStart = new Date('2022-12-20').getTime();const christmasEnd = new Date('2022-01-04').getTime();// 2const today = new Date().getTime();// 3 & 4const isChristmas = today > christmasStart && today < christmasEnd;

Making This Repeatable Each Year

You may have noticed in the code above, we're hardcoding the year in our christmasStart and christmasEnd constants. This is all well and good for this Christmas, but I'd like this to happen automatically each year rather than requiring an annual code edit.

Date also surfaces another method that we can use here: getFullYear(). This returns the full year of the date specified.

new Date().getFullYear()//=> 2022new Date('1999/12/31').getFullYear()//=> 1999

We can then use this to pass the start date for this year (and the end date next year in January) as template literals, and just like that it will snow in the header of my homepage every Christmas between the 20^th of December and 4^th of January:

const currentYear = new Date().getFullYear();const christmasStart = new Date(`${currentYear}-12-20`).getTime();const christmasEnd = new Date(`${currentYear + 1}-01-04`).getTime();const today = new Date().getTime();const isChristmas = today > christmasStart && today < christmasEnd;

The Wrap‑Up

Using Date we can convert dates and times (either pre‑defined or simply the date today) to a numerical representation, which it is then very straightforward to compare against.

At the time of writing, TC39 is working on a new Date/Time API called Temporal which (if adopted) may eventually do away with the current pain‑points Date raises in ECMAScript. Naturally ‑ it's not yet ready for production use!