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>neveropen</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>neveropen</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
