React Suite DateRangePicker Controlled

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 allows the user to quickly select a date range. DateRangePicker Controlled is used to create the controlled component.

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

Project Structure: The project structure will look like this:

Example 1: In this example, we will use DateRangePicker component to see the example of the controlled component. We have initialized the date state with some date range. We are changing the date state based on user input. 

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

import React, { useState } from "react";
import { DateRangePicker } from "rsuite";
import "rsuite/dist/rsuite.css";

const App = (props) => {

    const [value, setValue] = 
        useState([new Date("2017-02-01"),
        new Date("2017-05-20")]);

    return (
        <center>
            <h3>GeeksForGeeks</h3>
            <br />
            <h5>Selected Date - {String(value)}</h5>
            <br />
            <DateRangePicker value={value} 
                onChange={setValue} />
        </center>
    );
};

export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Example 2: In this example, we will use DateRangePicker component to see the example of the controlled component. Initially, we kept the date state undefined, once the user selects a specific date range we will render the value of date in String form.

App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.

import React, { useState } from "react";
import { DateRangePicker } from "rsuite";
import "rsuite/dist/rsuite.css";
const App = (props) => {

    // Initializing default state for date
    const [value, setValue] = useState();
    return (
        <center>
            <h3>GeeksForGeeks</h3>
            <br />
            {value != undefined ?
                <h5>Selected Date - {String(value)}</h5> :
                <h5> Please select date </h5>}
            <br />
            <DateRangePicker value={value}
                onChange={setValue} />
        </center>
    );
};

export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

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

kartikmukati

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• React-Suite Components
• React-Suite Data Entry
• React-Suite

+1 More