React Suite DateRangePicker ts:DisabledDateFunction 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.

DateRangePicker Component is used to quickly select a date range. DisabledDate function prop is used when the calendar is rendered and the date is selected so that the options that need to be disabled can be customized according to the needs.

ts:DisabledDateFunction Props:

• date: It is used to determine if disabling is required.
• selectDate: It is used to determine if the date is selected.
• selectedDone: It is used to check if the selection of end date is done or not.
• target: It is used to call the target of the selected date function.

Syntax:

type DisabledDateFunction = (
    date: Date,
    selectDate?: ValueType,
    selectedDone?: boolean,
    target?: '';
) => boolean;

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 the disabled prop, where we will see how can we customize it based on our requirements like- disabling future dates, allowing only next 5 dates to be selected, and many more.

App.js