JavaScript Dates

JavaScript provides the Date object for handling dates and times. This object allows developers to perform operations such as creating, parsing, and manipulating dates. 

Desired Outcomes

  • Understand Date Object Creation
  • Extract Date Components
  • Modify Date Components
  • Date Formatting and Presentation
  • Perform Date Comparisons
  • Conduct Date Arithmetic
  • Utilize Current Time Methods
  • Handle Time Zones and UTC

Let's explore some practical coding examples that showcase how to work with the Date object in JavaScript, emphasizing its versatility in handling date and time data.

Creating a Date Object

You can create a new Date instance with the current date and time, specific date and time, or a date string.

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

// Specific date and time (Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
// Note: Months are 0-indexed (0 = January, 11 = December)
let specificDate = new Date(2024, 0, 1, 15, 30, 0);
console.log(specificDate);

// Date string
let dateString = new Date("2024-01-01T15:30:00");
console.log(dateString);

This example demonstrates three methods for creating Date objects. The first method generates a date object with the current date and time, essential for applications that need to track or display the current moment. The second method shows how to create a Date object for a specific moment, allowing precise control over date and time settings, useful for scheduling or event planning. The third method parses a date from a string, demonstrating how to convert textual date representations into Date objects, a common requirement when working with dates stored or transmitted as strings.

Getting Date Components

Extract specific components (year, month, day, etc.) from a Date object.

let date = new Date(); // Current date and time

console.log(date.getFullYear()); // Year
console.log(date.getMonth()); // Month (0 = January, 11 = December)
console.log(date.getDate()); // Day of the month
console.log(date.getDay()); // Day of the week (0 = Sunday, 6 = Saturday)
console.log(date.getHours()); // Hours
console.log(date.getMinutes()); // Minutes
console.log(date.getSeconds()); // Seconds

Extracting components from a Date object, such as year, month, day, and time, is crucial for applications that display date information or make decisions based on specific date parts. This example illustrates how to retrieve various components, enabling developers to manipulate and present dates in a format that suits the application's requirements.

Setting Date Components

Modify specific components of a Date object, such as year, month, day, etc.

let date = new Date();

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

console.log(date); // Outputs the modified date

Modifying individual components of a Date object allows for adjustments to dates based on application logic, such as setting expiry dates or scheduling future events. This example showcases how to set the year, month, and day of a Date object, demonstrating the flexibility of the Date object in handling date adjustments.

Formatting Dates

Convert a Date object into a more readable string format.

let date = new Date();

// Converts to a locale-specific string
console.log(date.toLocaleDateString()); // e.g., 4/9/2024
console.log(date.toLocaleTimeString()); // e.g., 12:00:00 PM

// Converts to a string using UTC time zone
console.log(date.toUTCString());

// ISO 8601 Extended Format
console.log(date.toISOString()); // e.g., 2024-04-09T12:00:00.000Z

Converting Date objects into readable strings is essential for displaying dates to users in a clear and understandable format. This example presents various methods to format dates, including locale-specific formats and the international ISO standard. Understanding these formatting options is vital for developing user-friendly applications that operate across different locales and time zones.

Comparing Dates

Determine if one date is before, after, or the same as another date.

let date1 = new Date(2024, 0, 1);
let date2 = new Date(2024, 0, 2);

console.log(date1 < date2); // true
console.log(date1 > date2); // false
console.log(date1.getTime() === date2.getTime()); // false

Comparing dates is fundamental for determining the sequence of events, scheduling logic, or validating date ranges. This example shows how to compare Date objects using comparison operators and the getTime method, illustrating how to evaluate the relative timing of events accurately.

Date Arithmetic

Perform arithmetic operations with dates, such as finding the difference between two dates or adding days to a date. 

let date1 = new Date(2024, 0, 1);
let date2 = new Date(2024, 0, 2);

// Difference in milliseconds
let difference = date2 - date1;
console.log(difference); // 86400000 milliseconds (24 hours)

// Adding 5 days to date1
let newDate = new Date(date1.getTime() + 5 * 24 * 60 * 60 * 1000);
console.log(newDate.toLocaleDateString()); // Adds 5 days to date1

Performing arithmetic with dates enables developers to calculate durations, add or subtract time periods, and schedule future or past events relative to specific dates. The example provided demonstrates calculating the difference between two dates and adding days to a date, showcasing how to manipulate dates for scheduling and timing calculations.

Getting Current Time

Retrieve the current time as a timestamp.

let timestamp = Date.now();
console.log(timestamp); // Outputs the current time in milliseconds since the Unix Epoch (January 1, 1970)

Retrieving the current time as a timestamp is useful for creating logs, measuring durations, or implementing time-based logic. The Date.now() method offers a straightforward way to obtain the current time in milliseconds since the Unix Epoch, providing a foundation for time-related calculations and operations.

These examples illustrate the flexibility of the JavaScript Date object in managing date and time information. From creating and modifying dates to formatting and performing arithmetic operations, the Date object is an essential tool for handling temporal data in JavaScript applications.

Updated on:

Part of our complete: JavaScript Fundamentals guide

Want exercises and real projects for this lesson? Get the full course.