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
Steps to add presets to Date Range Picker in React
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.
1 | 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
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 32 33 34 35 36 37 38 39 40 | 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 classname="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 key="{text}" type="button" classname="{`btn" btn-sm="" ${isselected="" ?="" 'btn-primary'="" :="" 'btn-outline-primary'}`}="" style="{{" marginright:="" 10="" }}="" onclick="{()" ==""> handlePresets(start, end)} > {text} </button> ); })} </div> ); } export default Presets; |
App.js
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 32 33 34 35 36 37 38 39 40 41 42 43 44 | 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 className="App"> <h5 className="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, endDate }) => { 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 className="mt-3 mb-1">Start Date: {startDate && startDate.format('ll')}</div> <div>End Date: {endDate && endDate.format('ll')}</div> </div> ); } export default App; |
index.js
1 2 3 4 5 6 7 8 9 10 11 12 | 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.StrictMode> <App /> </React.StrictMode> ); |
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..!!
