React Suite DateRangePicker ts:Ranges Props

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. It is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework. 

The DatePicker Component is used to choose a time or date from the picker. To add a specific DatePicker label or value we can add that by using ts:Ranges prop. It actually sets predefined date ranges that users can select from.

 ts:Ranges Props:

• label: It is used to add the range label of datepicker component.
• value: It defines the range value that is defined by the user.

Syntax:

<DatePicker
   ranges={[
       {
         label: 'Content',
         value: addDays(new Date(), -1),
       }
       ...
   ]}
/>

Setting up React.js application:

Step 1: Create a React.js application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e foldername, move into that directory using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

npm install date-fns

Project Structure: The project structure will look like this:

Example 1: In this example, we will use DateRangePicker component with ranges prop, where we will see how can we customize it based on our requirements like – labeling and value properties to select next week, next quarter date, and next month date.

Functions provided by the date-fns module:

• addWeeks: This function takes two parameters, first is the date to be modified and the second is the number of weeks you want to add.
• addQuarter: This function takes two parameters, first is the date to be modified and the second is number of quarters you want to add.
• addDays: This function takes two parameters, first is date to be modified and the second is number of days that you want to add.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

App.js

import React from "react";
import { DateRangePicker } from "rsuite";
import addWeeks from 'date-fns/addWeeks';
import addQuarter from 'date-fns/addQuarters';
import addDays from 'date-fns/addDays';
import "rsuite/dist/rsuite.css";

const App = (props) => {
    return (
        <center>
            <h3>GeeksForGeeks</h3>
            <br />
            <DateRangePicker
                ranges={[
                    {
                        label: "Select upto next week",
                        value: [addWeeks(new Date(), 0),
                        addWeeks(new Date(), 1)],
                    },
                    {
                        label: "Select upto next Quarter",
                        value: [addQuarter(new Date(), 0),
                        addQuarter(new Date(), 1)],
                    },
                    {
                        label: "Select same date Next Month",
                        value: [addDays(new Date(), 0),
                        addDays(new Date(), 31)],
                    }
                ]}
            />
        </center>
    );
};

export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Example 2: In this example we will use DateRangePicker component with ranges prop, where we will see “closeOverlay” property in the range prop objects. With the help of this property we will be able to see the selected dates in highlighted color when we click on labels.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

App.js

import React from "react";
import { DateRangePicker } from "rsuite";
import addDays from 'date-fns/addDays';
import addWeeks from 'date-fns/addWeeks';
import addQuarter from 'date-fns/addQuarters';
import "rsuite/dist/rsuite.css";

const App = (props) => {

    return (
        <center>
            <h3>GeeksForGeeks</h3>
            <br />
            <DateRangePicker
                ranges={[
                    {
                        label: "Select upto next week",
                        value: [addWeeks(new Date(), 0),
                        addWeeks(new Date(), 1)],
                        closeOverlay: false
                    },
                    {
                        label: "Select upto next Quarter",
                        value: [addQuarter(new Date(), 0),
                        addQuarter(new Date(), 1)],
                        closeOverlay: false
                    },
                    {
                        label: "Select same date Next Month",
                        value: [addDays(new Date(), 0),
                        addDays(new Date(), 31)],
                        closeOverlay: false
                    }
                ]}
            />
        </center>
    );
};

export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Reference: https://rsuitejs.com/components/date-range-picker/