React Suite DatePicker Usage Selection Range

Last Updated : 28 Apr, 2025

The DatePicker Component is used to choose a time or date from the picker. To select the dates in ranges, we can do this by adding two datepicker components and adding them as one InputGroup.

Syntax:

<InputGroup>
    <DatePicker 
        format="yyyy-MM-dd HH:mm:ss" />
            ...
    <DatePicker 
        format="yyyy-MM-dd HH:mm:ss" />
</InputGroup>

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:

Example 1: Below example demonstrates the React Suite DatePicker Selection Range.

JavaScript

import { DatePicker, InputGroup } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    return (
        <div>
            <div
                style={{
                    textAlign: "center",
                }}
            >
                <h2>GeeksforGeeks</h2>
                <h4
                    style={{
                        color: "green",
                    }}
                >
                    React Suite DatePicker Selection Range
                </h4>
            </div>

            <div
                style={{
                    padding: 20,
                    textAlign: "center",
                }}
            >
                <div>
                    <InputGroup style={{ width: 428 }}>
                        <DatePicker
                            format="yyyy-MM-dd"
                            block
                            appearance="subtle"
                            style={{ width: 230 }}
                        />
                        <InputGroup.Addon> </InputGroup.Addon>
                        <DatePicker
                            format="yyyy-MM-dd"
                            block
                            appearance="subtle"
                            style={{ width: 230 }}
                        />
                    </InputGroup>
                </div>
            </div>
        </div>
    );
}

export default App;

Output:

React Suite DatePicker Usage Selection range

Example 2: Below is another example that demonstrates the React Suite DatePicker Selection Range along with time.

JavaScript

import { DatePicker, InputGroup } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    return (
        <div>
            <div
                style={{
                    textAlign: "center",
                }}
            >
                <h2>GeeksforGeeks</h2>
                <h4
                    style={{
                        color: "green",
                    }}
                >
                    React Suite DatePicker Selection Range
                </h4>
            </div>

            <div
                style={{
                    padding: 20,
                    textAlign: "center",
                }}
            >
                <div>
                    <InputGroup style={{ width: 428 }}>
                        <DatePicker
                            format="yyyy-MM-dd HH:mm:ss"
                            block
                            appearance="subtle"
                            style={{ width: 230 }}
                        />
                        <InputGroup.Addon> </InputGroup.Addon>
                        <DatePicker
                            format="yyyy-MM-dd HH:mm:ss"
                            block
                            appearance="subtle"
                            style={{ width: 230 }}
                        />
                    </InputGroup>
                </div>
            </div>
        </div>
    );
}

export default App;