React Suite DateRangePicker Placeholder

React Suite is a front-end UI library built on top of React that lets us many pre-built components to our react application. It is a developer-friendly library and is a great base for building scalable and beautiful websites and applications. In this article, we will be seeing React Suite DateRangePicker Placeholder.

The DateRangePicker component is used to take the user’s input of the date range. The placeholder property of the DateRangePicker component is used to set a placeholder that will override the default placeholder of the component.

React Suite DateRangePicker Placeholder Components:

• DateRangePicker: The DateRangePicker component is used to take the user’s input of the date range.

React Suite DateRangePicker Placeholder Attributes/Props:

• placeholder: This property of the DateRangePicker component is used to change the default placeholder value.
• size: This attribute is used on the DateRangePicker component to specify its size. It takes four values: “lg”, “md”, “sm” and “xs”.

Syntax:

<DateRangePicker placeholder="GeeksforGeeks" />

Creating The React Application And Installing React Suite in the Project:

Step 1: Create the React application using the npx command:

npx create-react-app foldername

Step 2: After creating the project folder, move to it using the cd command:

cd foldername

Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the DateRangePicker component using the following command:

npm install rsuite

After following the above steps, the project structure will look like this:

Project Structure

Let’s see some examples to see how the React Suite DateRangePicker placeholder attribute/prop work.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the placeholder property of the DateRangePicker component to override the default placeholder of the component.

App.js

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

function App() {
    const paraStyle = {
        marginTop: "10px",
        marginBottom: "25px"
    };

    return (
        <div className="App" style={{
            display: "flex", alignItems: "center",
            flexDirection: "column"
        }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite DateRangePicker Placeholder</h5>
            </header>

            <p style={paraStyle}>Default Placeholder:</p>

            <DateRangePicker />
            <p style={paraStyle}>Custom Placeholder:</p>

            <DateRangePicker placeholder="GeeksforGeeks" />
        </div>
    );
}

export default App;

Run the Application: Run your app using the following command from the root directory of the project.

npm start

Output: Go to http://localhost:3000/ in your browser to see the output.

Example 2: In the example below we used the placeholder property of the DateRangePicker component along with the size property to show the size variation.

App.js

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

function App() {

    const pickerStyle = {
        marginTop: "10px",
        marginBottom: "25px"
    };

    return (
        <div className="App" style={{
            display: "flex", alignItems: "center",
            flexDirection: "column"
        }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite DateRangePicker Placeholderr</h5>
                <h5>Size Variation</h5>
            </header>

            <DateRangePicker placeholder="Extra Small"
                style={pickerStyle} size="xs" />
            <DateRangePicker placeholder="Small Sized"
                style={pickerStyle} size="sm" />
            <DateRangePicker placeholder="Medium Sized"
                style={pickerStyle} size="md" />
            <DateRangePicker placeholder="Large Sized"
                style={pickerStyle} size="lg" />
        </div>
    );
}

export default App;

Output:

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