Add presets to Date Range Picker in React

In this article, we'll show you how to add presets to Date Range Picker in React. This example will help you to provide quick buttons in the picker to select a date range such as the next 7 days' range or the next month's range.

Demo Application

Output - Add presets to Date Range Picker in React - Clue Mediator

Steps to add presets to Date Range Picker in React

Project structure
Package dependencies
Implementation
Output

1. Project structure

presets-react-date-range-picker
- node_modules
- public
  - index.html
- src
  - App.js
  - index.css
  - index.js
  - Presets.js
- package-lock.json
- package.json
- README.md

2. Package dependencies

Run the following command to install bootstrap, moment, and react-dates npm packages.

npm i bootstrap moment react-dates

You will find the version of the following packages in React application.

react

^18.2.0

bootstrap

^5.2.3

moment

^2.29.4

react-dates

^21.8.0

3. Implementation

Refer to the following files for implementation.

Presets.js

import React from 'react';
import moment from 'moment';

const Presets = (props) => {
  const { startDate, endDate, displayFormat, handlePresets } = 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 class="p-3">
      {presets.map(({ text, start, end }) => {
        const isSelected = moment(start).format(displayFormat) === moment(startDate).format(displayFormat) && moment(end).format(displayFormat) === moment(endDate).format(displayFormat);
        return (
          <button 10="" key={text} type="button" class="{`btn" btn-sm="" ${isselected="" ?="" 'btn-primary'="" :="" 'btn-outline-primary'}`}="" style={{ marginright: }} onclick="{()" ==""> handlePresets(start, end)}
          >
            {text}
          </button>
        );
      })}
    </div>
  );
}

export default Presets;

App.js

import React, { useState } from 'react';

import 'react-dates/initialize';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

import Presets from './Presets';

const App = () => {
  const displayFormat = "DD/MM/YYYY";

  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  return (
    <div class="App">
      <h5 class="mb-3">Add presets to Date Range Picker in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h5>
      <daterangepicker startdate={startDate} startdateid="s_id" enddate={endDate} enddateid="e_id" ondateschange="{({" startdate,="" })=""> { setStartDate(startDate); setEndDate(endDate); }}
        focusedInput={focusedInput}
        onFocusChange={e => setFocusedInput(e)}
        displayFormat={displayFormat}
        renderCalendarInfo={() => <presets startdate={startDate} enddate={endDate} displayformat={displayFormat} handlepresets="{(start," end)=""> {
            setStartDate(start);
            setEndDate(end);
          }}
        />}
      />
      <div class="mt-3 mb-1">Start Date: {startDate && startDate.format('ll')}</div>
      <div>End Date: {endDate && endDate.format('ll')}</div>
    </presets></daterangepicker></div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <react class="strictmode">
    <app>
  </app></react>
);

4. Output

Run your application and check the output in the browser.
Live Demo

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project