⚠️ Unsaved

[M]:

Working with Dates in JavaScript Using date-fns

This notebook demonstrates how to use the popular date-fns library to handle date operations in JavaScript. The date-fns library provides a comprehensive, consistent, and immutable toolset for manipulating JavaScript dates.

[1]:

$ npm install date-fns

added 1 package in 2s

29 packages are looking for funding
  run `npm fund` for details

[2]:

date-fns version: undefined 
Current date: Wed Mar 19 2025 13:48:52 GMT+0000 (Western European Standard Time) 
Native JavaScript date format: 2025-03-19T13:48:52.196Z

[M]:

1. Basic Date Formatting

One of the most common tasks when working with dates is formatting them for display. The date-fns library provides a powerful format function for this purpose.

[3]:

Error during execution: dateFns.formatRFC2822 is not a functionBasic date formatting examples: MM/DD/YYYY: 03/19/2025 Month Day, Year: March 19, 2025 Day of week: Wednesday, March 19, 2025 With time (12-hour): March 19, 2025 1:48 PM With time (24-hour): 2025-03-19 13:48:52 ISO 8601: 2025-03-19T13:48:52Z

[M]:

2. Date Arithmetic

The date-fns library makes it easy to perform date arithmetic operations like adding or subtracting days, months, years, etc.

[4]:

Date arithmetic examples:
5 days from now: March 24, 2025 
1 week ago: March 12, 2025 
3 months from now: June 19, 2025 
1 year from now minus 2 days: March 17, 2026 
First day of current month: March 1, 2025 
Last day of current month: March 31, 2025

[M]:

3. Date Comparisons

The date-fns library provides various functions for comparing dates.

[5]:

Date comparison examples:
Is date1 before date2? true 
Is date2 after date1? true 
Are date1 and sameDate the same? true 
Is today today? true 
Is date1 today? false 
Is date1 in the past? true 
Is futureDate in the future? true 
Difference between date2 and date1 in days: 5 
Difference between futureDate and today in months: 12

[M]:

4. Working with Date Ranges

The date-fns library provides functions for working with date ranges.

[6]:

Date range examples:
Is testDate within the range? true 
Number of days in February 2023: 28 
Dates for this week:
Sunday, March 16, 2025 
Monday, March 17, 2025 
Tuesday, March 18, 2025 
Wednesday, March 19, 2025 
Thursday, March 20, 2025 
Friday, March 21, 2025 
Saturday, March 22, 2025 
Is 2023 a leap year? false

[M]:

5. Parsing Dates

The date-fns library provides functions for parsing date strings into JavaScript Date objects.

[7]:

Date parsing examples:
Parsed '2023-03-15': March 15, 2023 
Parsed '15/03/2023': March 15, 2023 
Parsed ISO date '2023-03-15T14:30:45.123Z': March 15, 2023 14:30:45 
Date from timestamp 1678888888888: March 15, 2023 14:01:28

[M]:

6. Timezone Handling

The date-fns-tz extension provides timezone support for date-fns.

[8]:

Error during execution: Cannot find module 'https://cdn.skypack.dev/date-fns-tz' Require stack: - /home/bfwsdlnpboac0izci3s7i3zj938f6s-jbm1/watcher.js

[M]:

7. Practical Examples

Let's look at some practical examples of using date-fns in real-world scenarios.

[9]:

Practical example 1: Date validation
Is '2023-04-15' a valid date? true
Is '2023-04-32' a valid date? false
Practical example 2: Age calculation
Age of someone born on June 15, 1990: 34 years
Practical example 3: Business days calculation
Order date: April 10, 2023
Estimated delivery date (5 business days later): April 17, 2023
Practical example 4: Date grouping
Events grouped by day:
Wednesday, April 5, 2023:
  - Meeting 1 at 10:00 AM
  - Lunch at 12:30 PM
Thursday, April 6, 2023:
  - Meeting 2 at 2:00 PM
Friday, April 7, 2023:
  - Conference at 9:00 AM
  - Workshop at 1:00 PM

[M]:

8. Creating a Date Picker

Let's create a simple date picker using date-fns to generate the calendar data.

[10]:

Calendar for March 2025:
Sun	Mon	Tue	Wed	Thu	Fri	Sat 
   	   	   	   	   	   	  1  
  2 	  3 	  4 	  5 	  6 	  7 	  8  
  9 	 10 	 11 	 12 	 13 	 14 	 15  
 16 	 17 	 18 	[19]	 20 	 21 	 22  
 23 	 24 	 25 	 26 	 27 	 28 	 29  
 30 	 31

[M]:

9. Working with Recurring Events

Let's demonstrate how to work with recurring events using date-fns.

[11]:

Weekly meeting schedule:
Meeting 1: Monday, April 3, 2023 10:00 AM
Meeting 2: Monday, April 10, 2023 10:00 AM
Meeting 3: Monday, April 17, 2023 10:00 AM
Meeting 4: Monday, April 24, 2023 10:00 AM
Meeting 5: Monday, May 1, 2023 10:00 AM
Meeting 6: Monday, May 8, 2023 10:00 AM
Meeting 7: Monday, May 15, 2023 10:00 AM
Meeting 8: Monday, May 22, 2023 10:00 AM
Meeting 9: Monday, May 29, 2023 10:00 AM

Monthly team lunch schedule:
Lunch 1: Saturday, April 15, 2023 12:30 PM
Lunch 2: Monday, May 15, 2023 12:30 PM
Lunch 3: Thursday, June 15, 2023 12:30 PM
Lunch 4: Saturday, July 15, 2023 12:30 PM
Lunch 5: Tuesday, August 15, 2023 12:30 PM
Lunch 6: Friday, September 15, 2023 12:30 PM
Lunch 7: Sunday, October 15, 2023 12:30 PM
Lunch 8: Wednesday, November 15, 2023 12:30 PM
Lunch 9: Friday, December 15, 2023 12:30 PM
Lunch 10: Monday, January 15, 2024 12:30 PM
Lunch 11: Thursday, February 15, 2024 12:30 PM
Lunch 12: Friday, March 15, 2024 12:30 PM

[M]:

10. Date Localization

The date-fns library supports localization for different languages and regions.

[12]:

Error during execution: Cannot find module 'https://cdn.skypack.dev/date-fns/locale' Require stack: - /home/bfwsdlnpboac0izci3s7i3zj938f6s-jbm1/watcher.js

[M]:

11. Working with Date Durations

Let's explore how to work with durations between dates.

[13]:

Duration examples:
Duration between dates: {"days":4,"hours":8,"minutes":15} 
Formatted duration: 4 days, 8 hours, 15 minutes 
Duration in days: 4 
Duration in hours: 104 
Duration in minutes: 6255 
Duration in seconds: 375300 
Duration in milliseconds: 375300000 
Business days between dates: 3

[M]:

12. Date Validation and Manipulation

Let's explore date validation and manipulation functions.

[14]:

Date validation examples:
Is validDate valid? true 
Is invalidDate valid? false 
Is February 29, 2023 valid? false 
Is February 29, 2024 valid? true 
Is April 31, 2023 valid? false 

Date manipulation examples:
After setting year to 2024: April 15, 2024 10:30 
After setting month to June: June 15, 2024 10:30 
After setting day to 20: June 20, 2024 10:30 
After setting hours to 14 (2 PM): June 20, 2024 14:30 
After setting minutes to 45: June 20, 2024 14:45 
After resetting to start of day: June 20, 2024 00:00:00 
After setting to end of day: June 20, 2024 23:59:59

[M]:

13. Building a Date Utility Library

Let's create a small utility library with common date operations using date-fns.

[15]:

DateUtils examples:
Formatted date: 2023-04-15 
Formatted date-time: 2023-04-15 00:00:00 
Is valid date? true 
Days difference from today: 704 
Date after adding 10 days: 2023-04-25 
Start of month: 2023-04-01 
End of month: 2023-04-30 
Is today? false 
Is in the past? true 
Is in the future? false 
Relative time: almost 2 years ago 
Day of week: Saturday 
Is weekend? true

[M]:

Summary

This notebook has demonstrated the power and flexibility of the date-fns library for handling dates in JavaScript. We've covered:

Basic Date Formatting: Using the format function to display dates in various formats
Date Arithmetic: Adding and subtracting time units from dates
Date Comparisons: Comparing dates and checking conditions
Working with Date Ranges: Handling intervals and ranges of dates
Parsing Dates: Converting strings to date objects
Timezone Handling: Working with dates in different timezones
Practical Examples: Real-world use cases for date manipulation
Creating a Date Picker: Generating calendar data
Working with Recurring Events: Generating dates for recurring events
Date Localization: Formatting dates in different languages
Working with Date Durations: Calculating and formatting time durations
Date Validation and Manipulation: Validating and modifying date components
Building a Date Utility Library: Creating reusable date utilities

The date-fns library provides a comprehensive set of functions for working with dates in JavaScript, making it a powerful alternative to other date libraries like Moment.js. Its modular design allows for tree-shaking, which can significantly reduce bundle sizes in production applications.

Key advantages of using date-fns include:

Immutability: All functions return new Date objects instead of modifying existing ones
Modularity: Import only the functions you need
Type Safety: Written in TypeScript with excellent type definitions
Consistency: Consistent API design across all functions
Performance: Lightweight and efficient implementation
I18n Support: Excellent internationalization capabilities

For more information, visit the date-fns documentation.