React Suite DateRangePicker Disabled and Readonly

Last Updated : 30 Aug, 2022

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 Disabled and Readonly. DateRangePicker is used to quickly select a date range. The DateRangePicker can be disabled and can also be used as a read-only component.

Disabled Date Methods: Below are the methods of the DateRangePicker component which is used to set the date we want to disable.

allowedMaxDays: It allows the maximum number of days specified, other dates being disabled.
allowedDays: It only allows the days that are specified, other dates being disabled.
allowedRange: It allows a specified date range, other dates being disabled.
after: It is used to disable dates after the specified date
afterToday: It is used to disable dates after today
before: It is used to disable dates before the specified date
beforeToday: It is used to disable dates before today
combine: It is used to combine multiple conditions.

Syntax:

import { DateRangePicker } from "rsuite";
Function App() {
 return (
    <DateRangePicker readOnly 
        defaultValue={[new Date(), new Date()]} />
    <DateRangePicker disabled />
}

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:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: Below example demonstrates the various types of disabled daterangepicker components.

JavaScript

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

const { allowedMaxDays, allowedDays, allowedRange,
    beforeToday, afterToday, combine } = DateRangePicker;

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite DateRangePicker Disabled and Readonly
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: "center" }}>
                <div>
                    Disabled DateRangePicker:
                    <DateRangePicker disabled />
                    <br /> <br />
                    Custom disabled DateRangePicker:
                    <DateRangePicker disabledDate={(date) =>
                        isAfter(date, new Date())} />
                    <br /> <br />
                    Only Max selection of dates for 7 days,
                    others being disabled:
                    <DateRangePicker disabledDate={allowedMaxDays(7)} />
                    <br /><br />
                    Only 7 days allowed, others being disabled:
                    <DateRangePicker disabledDate={allowedDays(7)} />
                    <br /> <br />
                    Only one date range is allowed, others being disabled:
                    <DateRangePicker
                        disabledDate={allowedRange("2020-10-01",
                            "2021-10-01")}
                    />
                    <br /><br />
                    Disable dates before today
                    <DateRangePicker disabledDate={beforeToday()} />
                    <br /><br />
                    Disable dates after today
                    <DateRangePicker disabledDate={afterToday()} />
                    <br /><br />
                    Allowed max selection for 7 days, while disabling dates
                    before today, others being disabled
                    <DateRangePicker
                        disabledDate={combine(allowedMaxDays(7),
                            beforeToday())}
                    />
                </div>
            </div>
        </div>
    );
}

Output:

Example 2: Below example demonstrates the read-only daterangepicker component.

JavaScript

import "rsuite/dist/rsuite.min.css";
import { DateRangePicker } from "rsuite";

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite DateRangePicker 
                    Disabled and Readonly
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: "center" }}>
                <div>
                    Read Only DateRangePicker:
                    <DateRangePicker readOnly defaultValue={
                        [new Date(), new Date()]} />
                </div>
            </div>
        </div>
    );
}