React Suite DateRangePicker Custom Shortcut Options

Last Updated : 27 Jun, 2022

React Suite is a front-end UI framework that has a set of React components that developers can use in their react app to fasten the development process. It supports all the major browsers like Chrome, Safari, Firefox, Brave, etc. In this example, we will be seeing React Suite DateRangePicker Custom Shortcut Options.

The DateRangePicker component is used to take the input of the date range from the users. The custom shortcut options in the DateRangePicker component are used to select a date range with just one click. The custom shortcut option can be added using the ranges property of the DateRangePicker component.

React Suite DateRangePicker Custom Shortcut Options Components:

DateRangePicker: This component is used to take the input of the date range from the user.

React Suite DateRangePicker Custom Shortcut Options Attributes/Props:

ranges: This property is used to set the custom options to the DateRangePicker. It accepts an Object array with each object having a label and value as its properties.

Syntax:

<DateRangePicker
    ranges={[
        {
            label: 'Today',
            value: [new Date(), new Date()]
        }
    ]}
/>

Creating The React Application And Installing React Suite in the Project:

Step 1: Create the React application using the npx command:

npx create-react-app foldername

Step 2: After creating the project folder, move to it using the cd command:

cd foldername

Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the DateRangePicker component and the date-fns module for using the addDays function using the following command:

npm install rsuite date-fns

Project Structure: After following the above steps, the project structure will look like this:

Let’s see some examples to understand how to use the React Suite DateRangePicker ranges attribute/prop.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the ranges attribute of the DateRangePicker component to set three custom shortcut options For Today, Tomorrow, and the Next 7 days.

src/App.js

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { DateRangePicker } from "rsuite"; 
import {addDays} from 'date-fns' ; 
  
function App() { 
    return ( 
        <div className="App" style={ 
            {  
                display: "flex",  
                alignItems: "center",  
                flexDirection: "column" 
            }}> 
            <header style={ 
                {  
                    textAlign: "center",  
                    display: "block",  
                    marginBottom: "30px" 
                }}> 
                <h3 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h3> 
                <h5> 
                    React Suite DateRangePicker Custom Shortcut Options 
                </h5> 
            </header> 
  
            <DateRangePicker 
                ranges={[ 
                    { 
                        label: 'Today', 
                        value: [new Date(), new Date()] 
                    }, 
                    { 
                        label: 'Tomorrow', 
                        value: [ 
                            addDays(new Date(), 1),  
                            addDays(new Date(), 1) 
                        ] 
                    }, 
                    { 
                        label: "Next 7 days", 
                        value: [ 
                            addDays(new Date(), 1),  
                            addDays(new Date(), 7) 
                        ] 
                    } 
                ]} 
            /> 
        </div> 
    ); 
} 
  
export default App; 

Run the Application: Run your app using the following command from the root directory of the project.

npm start

Output: Go to http://localhost:3000/ in your browser to see the output.

Example 2: In this example, we set the ranges property to an empty array in order to remove the default shortcut options.

src/App.js

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { DateRangePicker } from "rsuite"; 
  
function App() { 
  
    const pickerStyle = { 
        marginBottom: "25px",  
        marginTop: "10px"
    }; 
  
    return ( 
        <div className="App" style={ 
            {  
                display: "flex",  
                alignItems: "center",  
                flexDirection: "column" 
            }}> 
            <header style={ 
                {  
                    textAlign: "center",  
                    display: "block",  
                    marginBottom: "30px" 
                }}> 
                <h3 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h3> 
                <h5> 
                    React Suite DateRangePicker Custom Shortcut Options 
                </h5> 
            </header> 
  
            <p>Default DateRangePicker</p> 
            <DateRangePicker style={pickerStyle}/> 
  
            <p>DateRangePicker with no shortcut options</p> 
            {/* Here we set the ranges property to an empty array */} 
            <DateRangePicker ranges={[]} style={pickerStyle} /> 
        </div> 
    ); 
} 
  
export default App; 