Working with Dates and Times in JavaScript

Mastering Dates and Times in JavaScript

Handling dates and times is a common task in any application — whether you’re showing timestamps, calculating durations, or scheduling events. JavaScript provides built-in support for working with dates through the Date object, though it comes with some quirks. In this module, we’ll explore how to effectively use the Date object, its methods, and how to deal with common issues like time zones and formatting.

Table of Contents

1. Creating Dates in JavaScript
2. Getting Date and Time Components
3. Setting Date and Time
4. Date Formatting Techniques
5. Working with Timestamps
6. Date Arithmetic (Add/Subtract Dates)
7. Comparing Dates
8. Dealing with Time Zones and UTC
9. Using Intl.DateTimeFormat
10. Third-Party Libraries: moment.js, dayjs
11. Conclusion

1. Creating Dates in JavaScript

There are multiple ways to create a Date object:

let now = new Date(); // Current date and time
let specificDate = new Date("2025-04-19"); // ISO format
let fromComponents = new Date(2025, 3, 19); // year, month (0-indexed), day

⚠️ Note: Months are 0-indexed (January is 0, December is 11).

2. Getting Date and Time Components

Use Date methods to extract parts of the date:

let date = new Date();

date.getFullYear(); // e.g., 2025
date.getMonth();    // 0-11
date.getDate();     // 1-31
date.getDay();      // 0-6 (0 = Sunday)
date.getHours();    // 0-23
date.getMinutes();
date.getSeconds();
date.getMilliseconds();

3. Setting Date and Time

You can modify date components:

let date = new Date();

date.setFullYear(2030);
date.setMonth(11); // December
date.setDate(25);

Each setter method updates the date object in place.

4. Date Formatting Techniques

JavaScript does not have built-in elegant formatting (yet), but there are ways:

let date = new Date();

date.toDateString();    // "Sat Apr 19 2025"
date.toTimeString();    // "10:45:00 GMT+0530 (India Standard Time)"
date.toLocaleDateString(); // Localized date
date.toISOString();     // "2025-04-19T05:15:00.000Z"

5. Working with Timestamps

A timestamp is the number of milliseconds since January 1, 1970 (Unix Epoch):

let now = Date.now(); // same as new Date().getTime()
console.log(now);     // e.g., 1745059800000

6. Date Arithmetic (Add/Subtract Dates)

To add days/hours/etc., you typically use timestamps:

let date = new Date();
date.setDate(date.getDate() + 7); // Add 7 days

let nextMonth = new Date();
nextMonth.setMonth(nextMonth.getMonth() + 1); // Add 1 month

To find the difference between two dates:

let d1 = new Date("2025-04-01");
let d2 = new Date("2025-04-19");

let diff = d2 - d1; // In milliseconds
let days = diff / (1000 * 60 * 60 * 24);
console.log(days); // 18

7. Comparing Dates

You can compare dates just like numbers:

let d1 = new Date("2025-01-01");
let d2 = new Date("2025-12-31");

console.log(d1 < d2); // true
console.log(d1 === d2); // false (different objects)

console.log(d1.getTime() === d2.getTime()); // Use this to compare values

8. Dealing with Time Zones and UTC

JavaScript dates are based on the local machine’s time zone unless you use UTC methods:

date.getUTCHours(); // instead of getHours()
date.toUTCString(); // formatted in UTC

Time zone issues can create bugs in date-sensitive apps. Always be careful with cross-region data.

9. Using Intl.DateTimeFormat

You can format dates in a locale-aware way:

let date = new Date();

let formatter = new Intl.DateTimeFormat("en-GB", {
  year: "numeric",
  month: "long",
  day: "numeric",
});

console.log(formatter.format(date)); // "19 April 2025"

This is great for user-facing applications and supports over 100 locales.

10. Third-Party Libraries

While JavaScript’s native Date object works, it has limitations. Use libraries for complex tasks:

• moment.js – legacy but still useful
• dayjs – lightweight alternative
• date-fns – functional, modular date library
• luxon – modern, time zone aware

Example using dayjs:

import dayjs from "dayjs";

let today = dayjs();
let tomorrow = today.add(1, "day");
console.log(tomorrow.format("YYYY-MM-DD"));

11. Conclusion

Handling dates and times can be tricky in JavaScript, but with a strong grasp of the Date object, its methods, and best practices for formatting and comparison, you’ll be well-equipped. For production apps, consider using modern libraries for better control and internationalization support.