Introduction to date-fns

date-fns is a modern JavaScript date utility library that provides a comprehensive set of functions for manipulating and formatting dates. It is lightweight, performant, and modular, allowing developers to import only the functions they need. In this article, we will explore dozens of useful APIs provided by date-fns and demonstrate how to use them with code snippets. Additionally, we will build a simple app example leveraging these APIs.

Getting Started with date-fns

To start using date-fns, you need to install it via npm or yarn:

  npm install date-fns
  // or
  yarn add date-fns

Commonly Used date-fns APIs

Formatting Dates

The format function is used to format dates:

  import { format } from 'date-fns';
  const result = format(new Date(2023, 9, 3), 'yyyy-MM-dd');
  // result: '2023-10-03'

Parsing Dates

The parse function is used to parse date strings into Date objects:

  import { parse } from 'date-fns';
  const result = parse('2023-10-03', 'yyyy-MM-dd', new Date());
  // result: Tue Oct 03 2023 00:00:00

Adding and Subtracting Time

The add and sub functions are used to add or subtract time from a date:

  import { add, sub } from 'date-fns';
  const resultAdd = add(new Date(2023, 9, 3), { days: 10 });
  // resultAdd: Fri Oct 13 2023 00:00:00
  const resultSub = sub(new Date(2023, 9, 3), { months: 1 });
  // resultSub: Sun Sep 03 2023 00:00:00

Difference Between Dates

The differenceInDays function calculates the difference in days between two dates:

  import { differenceInDays } from 'date-fns';
  const result = differenceInDays(new Date(2023, 9, 3), new Date(2023, 9, 13));
  // result: -10

Comparing Dates

The isBefore and isAfter functions are used to compare dates:

  import { isBefore, isAfter } from 'date-fns';
  const resultBefore = isBefore(new Date(2023, 9, 3), new Date(2023, 9, 13));
  // resultBefore: true
  const resultAfter = isAfter(new Date(2023, 9, 3), new Date(2023, 9, 1));
  // resultAfter: true

Start and End of Time Units

The startOfDay and endOfDay functions return the start and end of a given day:

  import { startOfDay, endOfDay } from 'date-fns';
  const start = startOfDay(new Date(2023, 9, 3));
  // start: Tue Oct 03 2023 00:00:00
  const end = endOfDay(new Date(2023, 9, 3));
  // end: Tue Oct 03 2023 23:59:59

App Example Using date-fns

Let’s create a simple app that displays the current date, adds 7 days to it, and shows the difference in days from today to a specified future date:

  import React, { useState } from 'react';
  import { format, add, differenceInDays } from 'date-fns';

  function App() {
    const [futureDate, setFutureDate] = useState('2023-12-25');
    const currentDate = new Date();
    const formattedDate = format(currentDate, 'yyyy-MM-dd');
    const dateIn7Days = add(currentDate, { days: 7 });
    const daysDifference = differenceInDays(new Date(futureDate), currentDate);

    return (
      

        
date-fns App Example
        
Current Date: {formattedDate}
        
Date in 7 Days: {format(dateIn7Days, 'yyyy-MM-dd')}
        

          Difference from Today to {futureDate}:{' '}
          {daysDifference} days
        
         setFutureDate(e.target.value)}
        />
      
    );
  }

  export default App;

In this app, we use format, add, and differenceInDays from date-fns to display and manipulate dates.

Hash: 1a00cd023adff124057be39a38d6c6b0a6b9f5ade2a7bf125c9f5bb459c90bfc