Bite-sized JavaScript: Date Object and date-fns

JavaScript Date Object provides a wide range of methods to create, manipulate, format and parse dates, making it an essential part of any web application. In this blog, we will explore how to work with JavaScript Date and how to use the date-fns library to make working with dates easier.

Creating a Date Object

To create a new Date object, you can use the new Date() constructor. By default, it creates a new Date object with the current date and time. However, you can also pass in specific values for the year, month, day, hour, minute, second, and millisecond.

const currentDate = new Date();
console.log(currentDate); // Wed Feb 24 2023 12:30:00 GMT-0800 (Pacific Standard Time)

const specificDate = new Date(2023, 1, 14, 9, 30, 0, 0);
console.log(specificDate); // Mon Feb 14 2023 09:30:00 GMT-0800 (Pacific Standard Time)

Working with Dates

Once you have a Date object, you can use its methods to work with it. Some of the most commonly used methods are getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds(), and getTime(). These methods return the year, month, day, hour, minute, second, and milliseconds of the Date object.

const currentDate = new Date();
console.log(currentDate.getFullYear()); // 2023
console.log(currentDate.getMonth()); // 1 (JavaScript months start at 0, so 1 is February)
console.log(currentDate.getDate()); // 24
console.log(currentDate.getHours()); // 12
console.log(currentDate.getMinutes()); // 30
console.log(currentDate.getSeconds()); // 0
console.log(currentDate.getTime()); // 1645763400000

Manipulating Dates

You can also manipulate dates using methods such as setFullYear(), setMonth(), setDate(), setHours(), setMinutes(), setSeconds(), and setTime(). These methods allow you to set the year, month, day, hour, minute, second, and milliseconds of the Date object.

const currentDate = new Date();
console.log(currentDate); // Wed Feb 24 2023 12:30:00 GMT-0800 (Pacific Standard Time)

currentDate.setMonth(3);
console.log(currentDate); // Sat Apr 24 2023 12:30:00 GMT-0700 (Pacific Daylight Time)

currentDate.setDate(15);
console.log(currentDate); // Fri Apr 15 2023 12:30:00 GMT-0700 (Pacific Daylight Time)

Formatting and Parsing Dates

JavaScript Date objects also provide methods to format and parse dates. The toLocaleString() method formats a Date object as a string, using the local date and time format. You can also use the toLocaleDateString() and toLocaleTimeString() methods to format just the date or just the time.

const currentDate = new Date();
console.log(currentDate.toLocaleString()); // 2/24/2023, 12:30:00 PM
console.log(currentDate.toLocaleDateString()); // 2/24/2023
console.log(currentDate.toLocaleTimeString()); // 12:30:00 PM

The Date.parse() method parses a string representation of a date and returns the number of milliseconds since January 1, 1970. You can also use the Date.UTC() method to parse a string representation of a date, using the UTC time zone.

const dateString = '2023-02-14T09:30:00.000Z';
const parsedDate = Date.parse(dateString);
console.log(parsedDate); // 1644877800000

const utcDate = Date.UTC(2023, 1, 14, 9, 30, 0, 0);
console.log(utcDate); // 1644877800000

Using the date-fns Library

The date-fns library is a popular and lightweight JavaScript library that provides a variety of functions for working with dates. It is particularly useful for handling complex date operations and for formatting dates in a variety of formats.

To use the date-fns library, you first need to install it using a package manager like npm or yarn. Once installed, you can import the functions you need and start using them in your code. Here are a few examples of the functions provided by date-fns:

import { format, addDays, differenceInDays } from 'date-fns';

const currentDate = new Date();
console.log(format(currentDate, 'MM/dd/yyyy')); // 02/24/2023

const tomorrow = addDays(currentDate, 1);
console.log(format(tomorrow, 'MM/dd/yyyy')); // 02/25/2023

const date1 = new Date(2023, 1, 14);
const date2 = new Date(2023, 1, 28);
const difference = differenceInDays(date2, date1);
console.log(difference); // 14

In the example above, we first import the format(), addDays(), and differenceInDays() functions from the date-fns library. We then use the format() function to format a Date object as a string, the addDays() function to add one day to the current date, and the differenceInDays() function to calculate the difference in days between two dates.

Conclusion

Working with dates in JavaScript can be a challenge, but the built-in Date object and the date-fns library provide powerful tools to make it easier. Whether you need to create, manipulate, format, or parse dates, JavaScript provides a wide range of functions to help you get the job done. And with the help of libraries like date-fns, you can take your date handling to the next level.