Dates in JavaScript

Abhishek Gupta's photo
Abhishek Gupta
·

4 min read

Table of contents

The Date object in JavaScript is used for handling dates and times. It provides a wide range of methods for creating, manipulating, and formatting dates. Here's a comprehensive guide to understanding and using the Date object in JavaScript.

Creating Date Objects

You can create a Date object using the Date constructor in several ways:

Current Date and Time

let now = new Date();
console.log(now);  // Current date and time

Specific Date and Time

let specificDate = new Date('2024-05-25T10:20:30Z');
console.log(specificDate);  // Specific date and time in UTC

Date Components (Year, Month, Day, etc.)

let dateComponents = new Date(2024, 4, 25, 10, 20, 30);
console.log(dateComponents);  // Month is 0-based (4 = May)

Milliseconds Since Epoch

let millisecondsDate = new Date(1653484830000);
console.log(millisecondsDate);  // Date corresponding to milliseconds since January 1, 1970

Methods of the Date Object

Getting Date and Time Components

  • getFullYear(): Returns the year (4 digits).

  • getMonth(): Returns the month (0-11).

  • getDate(): Returns the day of the month (1-31).

  • getDay(): Returns the day of the week (0-6, where 0 is Sunday).

  • getHours(): Returns the hour (0-23).

  • getMinutes(): Returns the minutes (0-59).

  • getSeconds(): Returns the seconds (0-59).

  • getMilliseconds(): Returns the milliseconds (0-999).

  • getTime(): Returns the number of milliseconds since the Unix Epoch (January 1, 1970).

let date = new Date();
console.log(date.getFullYear());    // e.g., 2024
console.log(date.getMonth());       // e.g., 4 (May)
console.log(date.getDate());        // e.g., 25
console.log(date.getDay());         // e.g., 6 (Saturday)
console.log(date.getHours());       // e.g., 10
console.log(date.getMinutes());     // e.g., 20
console.log(date.getSeconds());     // e.g., 30
console.log(date.getMilliseconds());// e.g., 500
console.log(date.getTime());        // e.g., 1653484830500

Setting Date and Time Components

  • setFullYear(year): Sets the year.

  • setMonth(month): Sets the month (0-11).

  • setDate(day): Sets the day of the month (1-31).

  • setHours(hours): Sets the hour (0-23).

  • setMinutes(minutes): Sets the minutes (0-59).

  • setSeconds(seconds): Sets the seconds (0-59).

  • setMilliseconds(milliseconds): Sets the milliseconds (0-999).

  • setTime(milliseconds): Sets the time in milliseconds since January 1, 1970.

let date = new Date();
date.setFullYear(2025);
date.setMonth(11);  // December (0-based)
date.setDate(31);
date.setHours(23);
date.setMinutes(59);
date.setSeconds(59);
date.setMilliseconds(999);
console.log(date);  // December 31, 2025, 23:59:59.999

Parsing and Formatting Dates

Parsing Date Strings

  • Date.parse(dateString): Parses a date string and returns the number of milliseconds since January 1, 1970.
let timestamp = Date.parse('2024-05-25T10:20:30Z');
console.log(timestamp);  // e.g., 1714166430000

Converting Dates to Strings

  • toString(): Converts the date to a string.

  • toDateString(): Converts the date to a string (date only).

  • toTimeString(): Converts the date to a string (time only).

  • toISOString(): Converts the date to an ISO 8601 string.

  • toLocaleDateString(): Converts the date to a locale-specific string (date only).

  • toLocaleTimeString(): Converts the date to a locale-specific string (time only).

  • toLocaleString(): Converts the date to a locale-specific string (date and time).

let date = new Date();
console.log(date.toString());            // e.g., "Sat May 25 2024 10:20:30 GMT+0000 (Coordinated Universal Time)"
console.log(date.toDateString());        // e.g., "Sat May 25 2024"
console.log(date.toTimeString());        // e.g., "10:20:30 GMT+0000 (Coordinated Universal Time)"
console.log(date.toISOString());         // e.g., "2024-05-25T10:20:30.000Z"
console.log(date.toLocaleDateString());  // e.g., "5/25/2024"
console.log(date.toLocaleTimeString());  // e.g., "10:20:30 AM"
console.log(date.toLocaleString());      // e.g., "5/25/2024, 10:20:30 AM"

Comparing Dates

You can compare dates using comparison operators:

let date1 = new Date('2024-05-25');
let date2 = new Date('2024-12-31');

console.log(date1 > date2);  // false
console.log(date1 < date2);  // true
console.log(date1 === date2);// false (they are different objects)
console.log(date1.getTime() === date2.getTime());  // true if they represent the same point in time

Calculating Date Differences

To calculate the difference between two dates, you can subtract their timestamps:

let startDate = new Date('2024-05-25');
let endDate = new Date('2024-06-25');

let diffTime = endDate - startDate;  // Difference in milliseconds
let diffDays = diffTime / (1000 * 60 * 60 * 24);  // Convert milliseconds to days

console.log(diffTime);  // e.g., 2678400000 (milliseconds)
console.log(diffDays);  // e.g., 31 (days)

Useful Libraries

For more complex date manipulation and formatting, consider using libraries such as:

  • Moment.js: A popular library for parsing, validating, manipulating, and formatting dates.

  • date-fns: A modern library providing utility functions for common date tasks.

  • Luxon: A library for working with dates and times, created by one of the Moment.js developers.

Example Usage

Here's a practical example demonstrating various date manipulations:

let birthDate = new Date('1990-01-01');
let today = new Date();

let ageInMilliseconds = today - birthDate;
let ageInYears = ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25);

console.log(`Age: ${Math.floor(ageInYears)} years`);

let nextBirthday = new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate());
if (nextBirthday < today) {
  nextBirthday.setFullYear(today.getFullYear() + 1);
}

let daysUntilNextBirthday = (nextBirthday - today) / (1000 * 60 * 60 * 24);
console.log(`Days until next birthday: ${Math.ceil(daysUntilNextBirthday)}`);

This example calculates the age in years based on the birth date and the number of days until the next birthday.