React Suite DateRangePicker One tap

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. React Suite DateRangePicker component provides the user an interface to select a date range.

React Suite DateRangePicker Component’s oneTap prop takes a boolean value. It denotes whether to click once on the selected date range or not. It is true by default.

Syntax:

<DateRangePicker oneTap={} />

Prerequisite:

• Introduction and installation reactJS
• React Suite DateRangePicker Component
• React Hook useState

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Example 1: We are importing the DateRangePicker Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. To the DateRangePicker component, we are providing the oneTap prop.

App.js

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

function App() {
    return (
        <div className="App"
            style={{ marginLeft: 10 }}>
            <h3>
                React Suite DateRangePicker
                One tap
            </h3>
            <DateRangePicker oneTap />
        </div>
    );
}

export default App;

Output:

Example 2: To the above code, we are further adding a button with a label as the state-defined selectBool created using react hook useState, initialized as false, and added an onClick function that will call the onHandleChange function that will change the current state of the selectBool.

App.js

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

function App() {
    const [
        selectBool,
        setSelectBool
    ] = useState(false);
    const onHandleChange = () => {
        setSelectBool(!selectBool);
    };
    return (
        <div className="App"
            style={
                {
                    marginLeft: 10
                }}>
            <h3>
                React Suite DateRangePicker
                One tap
            </h3>
            <p style={
                {
                    marginTop: 10,
                    marginBottom: 10
                }}>
                <b style={
                    {
                        marginLeft: 30
                    }}>oneTap ?
                </b>
                <button
                    onClick={onHandleChange}
                    style={{
                        marginLeft: 10,
                        fontSize: 15,
                        padding: 10,
                        textTransform: "capitalize"
                    }}>{"" + selectBool}
                </button>
            </p>


            <DateRangePicker
                oneTap={selectBool}
            />
        </div>
    );
}

export default App;

Output:

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