Skip to content
10x Tech Infinity

JavaScript Date Operations: Creating, Formatting, and Manipulating Dates

Working with dates is a frequent requirement in web development. JavaScript provides a built-in Date object that allows you to create, manipulate, and format dates easily. In this guide, we’ll explore the basics of working with dates in JavaScript.

Creating Date Objects

There are two main ways to work with dates in JavaScript:

  1. Using the Date constructor to instantiate a Date object:
const dateObj = new Date();
  1. Using the Date function to get a string representation of the current date and time:
const dateStr = Date();

Formatting Dates

JavaScript provides several methods to format dates. Let’s look at some examples:

const today = new Date();


console.log(today); // 2024-01-02T08:40:33.515Z
console.log(today.toString()); // Tue Jan 02 2024 14:12:18 GMT+0530 (India Standard Time)
console.log(today.toDateString()); // Tue Jan 02 2024
console.log(today.toTimeString()); // 14:21:07 GMT+0530 (India Standard Time)


console.log(today.toLocaleString()); // 2/1/2024, 3:21:59 pm
console.log(today.toLocaleDateString()); // 2/1/2024
console.log(today.toLocaleTimeString()); // 3:21:59 pm


console.log(today.toISOString()); // 2024-01-02T10:01:39.495Z
console.log(today.toUTCString()); // Tue, 02 Jan 2024 10:00:44 GMT
console.log(today.toJSON()); // 2024-01-02T10:01:39.495Z

These methods give you flexibility in how you want to display your dates, whether it’s for user interfaces or data storage.

Creating Custom Dates

You can create dates for specific times using two main approaches:

Method 1: Using individual components

const birthday1 = new Date(2024, 0, 2, 3, 24, 50, 39);


console.log(birthday1.toDateString()); // Tue Jan 02 2024
console.log(birthday1.getDate()); // 2
console.log(birthday1.getMonth() + 1); // 1 (Note: months are zero-indexed)
console.log(birthday1.getFullYear()); // 2024
console.log(birthday1.getDay()); // 2 (0 is Sunday, 1 is Monday, etc.)
console.log(birthday1.getHours()); // 3
console.log(birthday1.getMinutes()); // 24
console.log(birthday1.getSeconds()); // 50
console.log(birthday1.getMilliseconds()); // 39

Method 2: Using a string (ISO 8601 format)

const birthday2 = new Date("2024-01-02T03:24:50");


console.log(birthday2.toDateString()); // Tue Jan 02 2024
console.log(birthday2.getDate()); // 2
console.log(birthday2.getMonth() + 1); // 1
console.log(birthday2.getFullYear()); // 2024
console.log(birthday2.getDay()); // 2
console.log(birthday2.getHours()); // 3
console.log(birthday2.getMinutes()); // 24
console.log(birthday2.getSeconds()); // 50
console.log(birthday2.getMilliseconds()); // 0

The second method using the ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ) is standardized and works reliably across different systems.

Calculating Elapsed Time

You can use Date objects to measure elapsed time. Here’s an example:

const start = new Date();


// Simulate a long-running operation
for (let i = 0; i < 100000000; i++) {}


const end = new Date();
const elapsed = end.getTime() - start.getTime();


console.log(
  `Start: ${start.getTime()} - End: ${end.getTime()} = Elapsed: ${elapsed} time in milliseconds`
);
// Example output: Start: 1704190969679 - End: 1704190969772 = Elapsed: 93 time in milliseconds

Working with Timestamps

JavaScript provides methods to work with timestamps (milliseconds since January 1, 1970):

const milliseconds = Date.now();
const seconds = milliseconds / 1000;


console.log(milliseconds); // Example: 1704191479902
console.log(seconds); // Example: 1704191479.902
console.log(Math.floor(seconds)); // Example: 1704191479

Remember that 1000 milliseconds equal 1 second.

Conclusion

Working with dates in JavaScript is essential for many web applications. Whether you’re creating a calendar, scheduling system, or just need to display formatted dates, the Date object provides powerful tools to handle these tasks.

Remember these key points:

  1. Use new Date() to create Date objects.
  2. JavaScript provides various methods to format dates for display.
  3. You can create custom dates using individual components or ISO 8601 strings.
  4. Date objects can be used to calculate elapsed time.
  5. Call Date.now() to get the current timestamp in milliseconds.

Practice working with these date operations to become proficient in handling time-based tasks in your JavaScript projects.

Happy coding!