React Suite DateRangePicker ts:Range Prop

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite DateRangePicker ts:Range Prop. DateRangePicker is used to quickly select a date range. To define the specific DateRangePicker label, values, or closeOverlay, we can create an interface using ts:Range prop.

DateRangePicker Prop:

• label: It is used to add the range label of datepicker component.

• value: It defines the range value that is defined by the user.

• closeOverlay: It is a boolean value.

• placement: It is used to define the placement of the component.

Syntax:

interface Range {
    label: React.ReactNode;
    value: Date | ((date: Date) => Date);
    closeOverlay?: boolean;。
    placement?: 'bottom' | 'left';
}

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the ts:Range prop of daterangepicker component.

Javascript

import "rsuite/dist/rsuite.min.css";
import { DateRangePicker } from "rsuite";
import addDays from "date-fns/addDays";

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite DateRangePicker ts:Range Prop
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: "center" }}>
                <div>
                    <DateRangePicker
                        ranges={[{
                            label: "Yesterday",
                            value: [addDays(new Date(), -1),
                            addDays(new Date(), -1)],
                        },
                        {
                            label: 'Today',
                            value: [new Date(), new Date()]
                        }]}
                    />
                </div>
            </div>
        </div>
    );
}

Output:

Example 2: Another example demonstrating the ts:Range prop with closeOverlay of daterangepicker component.

Javascript

import "rsuite/dist/rsuite.min.css";
import { DateRangePicker } from "rsuite";
import addDays from "date-fns/addDays";
import subDays from 'date-fns/subDays';

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite DateRangePicker ts:Range Prop
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: "center" }}>
                <div>
                    <DateRangePicker
                        ranges={[
                            {
                                label: "Yesterday",
                                value: [addDays(new Date(), -1),
                                       addDays(new Date(), -1)],
                            },
                            {
                                label: 'Today',
                                value: [new Date(), new Date()]
                            },
                            {
                                label: 'Last 7 days ',
                                value: [subDays(new Date(), 6),
                                       new Date()],
                                closeOverlay: true
                            }
                        ]}
                    />
                </div>
            </div>
        </div>
    );
}

Output:

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