Open In App

React Suite DateRangePicker One tap

Last Updated : 19 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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:

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



Similar Reads

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
3 min read
React Suite DateRangePicker Show One Calendar
React Suite is a front-end UI framework that has a set of React components that developers can use in their react app to fasten the development process. It supports all the major browsers like Chrome, Safari, Firefox, Brave, etc. In this example, we will see React Suite DateRangePicker Show One Calendar. The DateRangePicker component is used to tak
3 min read
React Suite DateRangePicker Component
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. DateRangePicker component allows the user to quickly select a date range. We can use the following approach in ReactJS to use the React Suite DateRangePicker Component. DateRangePicker Props: appearance: It is u
4 min read
React Suite DateRangePicker Appearance
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 appearance prop defines how the DateRangePicker will visually appear to the us
2 min read
React Suite DateRangePicker Date Time or Time
React Suite is a popular front-end UI framework that consisted of a set of React components that we can use in our react application. It is developer-friendly and supports the stable releases of all the modern browsers like Chrome, Edge, Firefox, Safari, etc. In this article, we will discuss React Suite DateRangePicker Date Time or Time. The DateRa
3 min read
React Suite DateRangePicker Custom Shortcut Options
React Suite is a front-end UI framework that has a set of React components that developers can use in their react app to fasten the development process. It supports all the major browsers like Chrome, Safari, Firefox, Brave, etc. In this example, we will be seeing React Suite DateRangePicker Custom Shortcut Options. The DateRangePicker component is
3 min read
React Suite DateRangePicker ts:Placement Props
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. DateRangePicker component allows the user to quickly select a date range. Now, these DateRangePicker can be placed in around 13 different positions . This placement can be any of the positions mentioned below: D
4 min read
React Suite DateRangePicker Block
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. The DateRangePicker component allows the user to quickly select a date range. DateRangePicker can be of different sizes which include extra-small, small, medium, and large. It can also occupy the full width. Syn
3 min read
React Suite DateRangePicker Show Week Numbers
React Suite is a front-end UI framework that has a set of React components that developers can use in their react app to fasten the development process. It supports all the major browsers like Chrome, Safari, Firefox, Brave, etc. In this example, we will see React Suite DateRangePicker Show Week Numbers. The DateRangePicker component is used to tak
3 min read
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 i
3 min read