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 DatePicker ts:Range Props. 

The DatePicker Component is used to choose a time or date from the picker. To add a specific DatePicker label, value, or closeOverlay, we can add that by creating an interface using ts:Range prop.

React Suite DatePicker ts:Range Prop Properties:

• 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 closes the picker component after selecting the date range.

Syntax:

<DatePicker
    ranges={[
        {
          label: 'Content',
          value: addDays(new Date(), -1),
          closeOverlay: boolean
        }
    ]}
/>

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:

Project Structure

Example 1: Below example demonstrates the use of ts:Range interface for adding shortcuts to the DatePicker component.

Steps to run the application: Execute the below-mentioned command from the root of your project folder to run the app.

npm start

Output:

 

Example 2: Another example demonstrating the use of ts:Range interface to define the shortcuts for the of DatePicker component.

Output:

 

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