React Suite DatePicker Usage One tap

React Suite is an open-source front-end library built on top of the React framework that consists of many React components that make it easy for developers to build great user interfaces. In this article, we will be seeing React Suite DatePicker Usage One tap.

The DatePicker Component is used to take the input of date and time from the users. When the oneTap attribute is set on the DatePicker element the date/time gets selected as soon as the user clicks on the date/time.

React Suite DatePicker Usage Size Components:

• DatePicker: The DatePicker component is used to select or input the date and/or time.

React Suite DatePicker Usage Size Attributes/Props:

• oneTap: This attribute is used on the DatePicker component to select the date/time as soon as the user clicks on the date/time. There will be no confirmation button.
• placeholder: This attribute is used to override the default placeholder of the date/time input.
• size: This attribute is used on the DatePicker component to specify its size. It takes four values: “lg”, “md”, “sm” and “xs”.

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 DatePicker 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 understand how to use the React Suite DatePicker oneTap attribute/prop.

Example 1: Now replace the code in the App.js file with the code below. In this example, we compared the DatePicker component with the oneTap attribute with the normal DatePicker component.

src/App.js

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

function App() {
    const datepickerStyle = { marginTop: "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 DatePicker One Tap</h5>
            </header>

            <DatePicker style={datepickerStyle} oneTap
                placeholder="DatePicker with oneTap Attribute" />
            <DatePicker style={datepickerStyle}
                placeholder=" Default DatePicker" />
        </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: This example illustrates the use of the oneTap attribute of the DatePicker component with size variation.

src/App.js

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

function App() {
    const datepickerStyle = { marginTop: "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 DatePicker One
                    Tap with Size Variation
                </h5>
            </header>

            <DatePicker style={datepickerStyle} oneTap
                placeholder="Small DatePicker with oneTap Attribute" />
            <DatePicker style={datepickerStyle} oneTap
                placeholder="Large DatePicker with oneTap Attribute" />
        </div>
    );
}

export default App;

Output:

Reference: https://rsuitejs.com/components/date-picker/#one-tap