Date-fns is a popular JavaScript library for working with dates and times in a functional way. It provides a set of functions for common operations such as formatting, parsing, and manipulating dates. Here, we will explore some of the key features of date-fns, along with code examples to illustrate their usage.
- Formatting Dates
One of the primary uses of date-fns is formatting dates. This means converting a date object into a human-readable string. Date-fns provides several functions for formatting dates, including format, formatDistance, and formatRelative.
const date = new Date(2022, 1, 1);
const formattedDate = format(date, "MM/dd/yyyy");
// "02/01/2022"
const distance = formatDistance(new Date(2022, 1, 1), new Date());
// "2 years ago"
const relative = formatRelative(new Date(2022, 1, 1), new Date());
// "2 years ago"
- Parsing Dates
Another important function provided by date-fns is parsing dates. This means converting a string into a date object. Date-fns provides the parse function for this purpose.
const date = parse("2022-02-01", "yyyy-MM-dd", new Date());
// Mon Feb 01 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
- Manipulating Dates
Date-fns also provides a variety of functions for manipulating dates, such as adding or subtracting time from a date, or finding the difference between two dates. Some examples include addDays, subDays, differenceInDays, and startOfWeek.
const date = new Date(2022, 1, 1);
const nextWeek = addDays(date, 7);
// Mon Feb 08 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
const previousWeek = subDays(date, 7);
// Mon Jan 25 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
const difference = differenceInDays(new Date(2022, 1, 1), new Date());
// 730
const startOfWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
// Sun Feb 06 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
- Localization
Date-fns supports localization, allowing you to display dates in different formats and locales. To use localization, you need to import the locale data for the desired language and pass it as an option to the formatting functions.
import enLocale from "date-fns/locale/en";
const date = new Date(2022, 1, 1);
const formattedDate = format(date, "MM/dd/yyyy", { locale: enLocale });
// "02/01/2022"
- Conclusion
In this article, we have explored the key features of date-fns and how to use them with code examples. Whether you need to format dates, parse strings into dates, manipulate dates, or display dates in different locales, date-fns provides a set of functions to help you accomplish these tasks in a functional and efficient manner.
6. Duration and Time Intervals
In addition to working with individual dates, date-fns also provides support for working with durations and time intervals. A duration is a length of time represented as a number of milliseconds, and a time interval is a start and end date that represent a period of time.
The differenceInMilliseconds, differenceInSeconds, differenceInMinutes, differenceInHours, and differenceInDays functions can be used to calculate the difference between two dates in different units of time.
const differenceInMilliseconds = differenceInMilliseconds(
new Date(2022, 1, 1),
new Date()
);
// 631139200000
const differenceInSeconds = differenceInSeconds(
new Date(2022, 1, 1),
new Date()
);
// 631139200
const differenceInMinutes = differenceInMinutes(
new Date(2022, 1, 1),
new Date()
);
// 1052000
const differenceInHours = differenceInHours(
new Date(2022, 1, 1),
new Date()
);
// 17533
const differenceInDays = differenceInDays(
new Date(2022, 1, 1),
new Date()
);
// 730
- Date Ranges
Date-fns also provides support for working with date ranges, which are represented as an array of two dates: the start and end of the range. The eachDayOfInterval and eachWeekOfInterval functions can be used to generate an array of dates that represent each day or week within a range.
const start = new Date(2022, 1, 1);
const end = new Date(2022, 1, 7);
const eachDay = eachDayOfInterval({ start, end });
// [
// Mon Feb 01 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// Tue Feb 02 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// Wed Feb 03 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// ...
// ]
const eachWeek = eachWeekOfInterval({ start, end });
// [
// Sun Jan 30 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// Sun Feb 06 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
// ]
- Recurring Dates
In addition to working with individual dates and ranges, date-fns also provides support for working with recurring dates, such as weekly or monthly events. The eachDayOfInterval and eachWeekOfInterval functions can be used in combination with the startOfWeek and startOfMonth functions to generate arrays of dates that represent recurring events.
const start = new Date(2022, 1, 1);
const end = new Date(2022, 2, 1);
const eachMonday = eachWeekOfInterval({ start, end }).filter((date) =>
isMonday(date)
);
// [
// Mon Feb 07 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// Mon Feb 14 2022 00:00:00 GMT+
## Popular questions
1. What is date-fns and why is it useful?
Date-fns is a JavaScript library that provides a collection of functions for working with dates. It is useful because it provides a consistent and easy-to-use interface for working with dates, making it easier to perform common operations such as formatting dates, calculating time intervals, and working with recurring dates.
2. How can you format a date using date-fns?
You can format a date using the `format` function from date-fns. The function takes two arguments: the date to be formatted and a string that represents the desired format. The format string uses placeholders that represent different parts of the date, such as the day of the week, the month, and the year.
const date = new Date();
const formattedDate = format(date, 'MMMM do yyyy');
// "February 7th 2023"
3. How can you calculate the difference between two dates using date-fns?
You can calculate the difference between two dates using the `differenceInMilliseconds`, `differenceInSeconds`, `differenceInMinutes`, `differenceInHours`, and `differenceInDays` functions from date-fns. These functions take two arguments: the start date and the end date.
const startDate = new Date(2022, 1, 1);
const endDate = new Date();
const differenceInDays = differenceInDays(startDate, endDate);
// 730
4. How can you generate an array of dates representing each day or week within a date range using date-fns?
You can generate an array of dates representing each day or week within a date range using the `eachDayOfInterval` and `eachWeekOfInterval` functions from date-fns. These functions take an object as an argument with two properties: `start` and `end`, which represent the start and end of the range.
const start = new Date(2022, 1, 1);
const end = new Date(2022, 1, 7);
const eachDay = eachDayOfInterval({ start, end });
// [
// Mon Feb 01 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// Tue Feb 02 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// Wed Feb 03 2022 00:00:00 GMT+0000 (Coordinated Universal Time),
// …
// ]
5. How can you generate an array of dates representing recurring events using date-fns?
You can generate an array of dates representing recurring events using the `eachDayOfInterval` and `eachWeekOfInterval` functions in combination with other functions from date-fns. For example, to generate an array of dates representing each Monday within a date range, you could use the `eachWeekOfInterval` function to generate an array of dates representing each week within the range, and then use the `isMonday` function to filter the array to only include dates that are Mondays.
const start = new Date(2022, 1, 1);
const end = new Date(2022, 2, 1);
const eachMonday = eachWeekOfInterval({ start, end }).filter((date) =>
isMonday(date)
);
// [
// Mon Feb 07 2022 00:00:
Tag
Datetime.
