How to calculate number of days between two dates?

javascript

date-manipulation

time-zone

date-fns

moment-js

byAlex Kataev·Nov 21, 2024

To calculate the days between dates, we employ JavaScript's native Date object. We begin by subtracting the earlier date from the later date, returning a difference in milliseconds. Finally, we convert this millisecond value to days by dividing it by 86400000 (the total number of milliseconds in a day). Here's a succinct script to illustrate:

// Creating Date objects for your start and end dates
// Note: Replace "YYYY-MM-DD" with your actual dates
const date1 = new Date("YYYY-MM-DD");
const date2 = new Date("YYYY-MM-DD");

// Subtracting the dates (in milliseconds) and converting to days
const differenceInDays = Math.round((date2 - date1) / 86400000);
console.log(differenceInDays);  // Exciting moment: Prints number of days

Parsing and date manipulations

Before diving into specifics, it's vital that we parse the input dates precisely. The Date constructor is capable of parsing a wide array of date strings, nonetheless, ISO 8601 format (YYYY-MM-DD) is favored due to its clarity and consistency.

// No dates were harmed in the making of these examples
const parsedDate1 = new Date("2023-01-25");
const parsedDate2 = new Date("2023-02-01");

Should you face a NaN situation, utilize the isNaN function to salvage the situation smoothly. Errors are just nature's way of saying "try again!"

Tackling time zone conundrums

When dealing with dates, the ghosts of time zones and Daylight Saving Time (DST) could haunt your results. Good thing JavaScript is a ghostbuster by default—it uses the browser's local time zone. However, to shoo away the inconsistencies caused by different time zones, treat dates as UTC:

function parseAsUTC(dateString) {
  const date = new Date(dateString);
  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
}

// When the going gets tough, the tough get going... to UTC! 
const utcDate1 = parseAsUTC("2023-01-25");
const utcDate2 = parseAsUTC("2023-02-01");

This deft move aligns the dates with the universal time clock, leaving no room for pesky time zone offsets.

Libraries to the rescue

Humble JavaScript can only do so much without its library allies. Libraries like Moment.js, date-fns, and Luxon come packed to handle subtleties such as leap years and DST changes. They also provide a cleaner syntax for date calculations- a coder's dream!

To give you a taste, here's how to calculate days between dates using Moment.js' diff method:

// Not to brag, but I have a moment on my hands
const moment1 = moment("2023-01-25");
const moment2 = moment("2023-02-01");
const differenceInDays = moment2.diff(moment1, 'days');

The differenceInDays function from date-fns and diff function from Luxon are similar archers with different arrows:

// date-fns: Because who doesn't like a good function?
import { differenceInDays } from 'date-fns';
console.log(differenceInDays(new Date("2023-02-01"), new Date("2023-01-25")));

// Luxon: For when you think time is a luxury 
const { DateTime } = require("luxon");
const luxon1 = DateTime.fromISO("2023-01-25");
const luxon2 = DateTime.fromISO("2023-02-01");
const differenceInDays = luxon2.diff(luxon1, 'days').days;

Just remember, these libraries don't bring you coffee. Yet.

Pitfalls and tips

Formatting: Don't lose form with formatting! Incorrectly formatted dates end in Invalid Date errors.
Library Versions: Last week's libraries can't tackle this week's problems. Use the latest stable version.
Refactoring: Make your function stretch like a gymnast. You may need to calculate hours or minutes instead of days!
Leap Seconds: Keep calm and ignore leap seconds, just like JavaScript does!

Script's date retrieval techniques

Input retrieval proves vital in the realm of web applications. You could reach for the choice of easy access on the window object or follow the more travelled path of standardized APIs like getElementById. Here's the conundrum:

The quick-and-dirty way looks something like this:

// Hoping input fields with id=startDate and endDate are onboard
const startDate = window.startDate.value;
const endDate = window.endDate.value;

However, the knight in shining armor, i.e., the more reliable way for production-related code would be:

// getElementById shall lead the way!
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;