How to Implement Preset in React Date Range Picker

In this comprehensive tutorial, we will teach you how to integrate preset in date range picker component in React js.

To add the preset in date range picker we will use the function component, react dates, moment and bootstrap packages.

React Dates is a profound package for developing date pickers and date range selectors in React js applications.

It is an open-source module that empowers a set of customizable components for handling dates, times, and date ranges.

React dates is built on top of moment.js.

Moment is a widely used package for date and time related tasks. It is easily available on npm.

It offers a simple and dynamic interface for parsing, validating, manipulating, and formatting dates and times.

In order to make the functionality right workable, you have to follow all the steps very carefully.

Create React Project

Open the code editor, also open the command-prompt. If you have installed Node and Npm then run the given command to install a new app.

npx create-react-app my-react-app

As soon as you created the project, just enter into the project directory.

cd my-react-app

Install React Dates Dependency

We will install bootstrap, moment and react date-picker package using the given command.

npm i bootstrap moment

At the time of creating this tutorial, we are using React 18+ version. The react-datepicker is not compatible with React’s latest version.

To tackle such problem we are using the –legacy-peer-deps tag.

npm i react-dates --legacy-peer-deps

Create Component File

Moreover, you have to create the components/ folder. You can now create as many component as you want.

Make sure to create components/DatePresets.js component using the below code.

import React from 'react'
function DatePresets() {
  return (
    <div></div>
  )
}
export default DatePresets

Add Preset to Date Range Picker

Now, you have to create the components/DatePresets.js file and add the following code into the file.

import React from "react";
import moment from "moment";
const DatePresets = (props) => {
  const { startDate, endDate, showDateFormat, initPresets } = props;
  const today = moment();
  const presets = [
    {
      text: "Next Week",
      start: today,
      end: moment().add(1, "week"),
    },
    {
      text: "Next Month",
      start: today,
      end: moment().add(1, "month"),
    },
    {
      text: "Next 3 Months",
      start: today,
      end: moment().add(3, "month"),
    },
  ];
  return (
    <div className="p-3">
      {presets.map(({ text, start, end }) => {
        const isChosen =
          moment(start).format(showDateFormat) ===
            moment(startDate).format(showDateFormat) &&
          moment(end).format(showDateFormat) ===
            moment(endDate).format(showDateFormat);
        return (
          <button
            key={text}
            type="button"
            className={`btn btn-sm btn-dark ${
              isChosen ? "btn-success" : "btn-danger"
            }`}
            style={{ marginRight: 12 }}
            onClick={() => initPresets(start, end)}
          >
            {text}
          </button>
        );
      })}
    </div>
  );
};
export default DatePresets;

The DateRangePicker is the module that we need, we also have to import DatePresets. You can pass the essential props and methods to add the date presets.

Add the code in the components/Dashboard.js file.

import React, { useState } from "react";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from "react-dates";
import DatePresets from "./DatePresets";
function Dashboard() {
  const dateFormat = "DD/MM/YYYY";
  const [initDate, initInitialDate] = useState(null);
  const [dateEnd, setEndDate] = useState(null);
  const [dateInput, setDateInput] = useState(null);
  return (
    <div>
      <DateRangePicker
        startDate={initDate}
        startDateId="s_id"
        endDate={dateEnd}
        endDateId="e_id"
        onDatesChange={({ startDate, endDate }) => {
          initInitialDate(startDate);
          setEndDate(endDate);
        }}
        focusedInput={dateInput}
        onFocusChange={(e) => setDateInput(e)}
        dateFormat={dateFormat}
        renderCalendarInfo={() => (
          <DatePresets
            startDate={initDate}
            endDate={dateEnd}
            dateFormat={dateFormat}
            handlePresets={(start, end) => {
              initInitialDate(start);
              setEndDate(end);
            }}
          />
        )}
      />
      <div className="mt-3">
        <div>
          <strong>Start date: </strong>
          {initDate && initDate.format("ll")}
        </div>
        <div>
          <strong>End date: </strong>
          {dateEnd && dateEnd.format("ll")}
        </div>
      </div>
    </div>
  );
}
export default Dashboard;

Register Component in App Js

Head over to App.js file; now in this file you have to first import the Dashboard component; also ensure that you added it inside the App() method.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Dashboard from "./components/Dashboard";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">
        React Integrate Preset to Date Range Picker Example
      </h2>
      <Dashboard />
    </div>
  );
}
export default App;

View App in Browser

There is only one task left; that is to run the development server.

You have to use the given command to run the react app.

npm start

Here is the url that shows your app on the browser.

http://localhost:3000

Conclusion

In this tutorial, we have shown you how to incorporate presets to date range picker component using React js.

We learned how to configure a React project from scratch and build a date range picker component using react-dates and moment libraries.