Skip to content
Related Articles
Open in App
Not now

Related Articles

React Suite DateRangePicker Disabled and Readonly

Improve Article
Save Article
  • Last Updated : 30 Aug, 2022
Improve Article
Save Article

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>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/date-range-picker/#disabled-and-readonly


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!