React Suite DateRangePicker Date Time or Time

Last Updated : 27 Jun, 2022

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 DateRangePicker component is used to take input of the date/time range from the user. By default, it takes only date range input but it can be configured to accept date-time range or just time range as input using the format property. This property takes a string as a value, which is the format of the date or time for the input.

React Suite DateRangePicker Date Time or Time Components:

DateRangePicker: This component is used to take the input of the date range from the user.

React Suite DateRangePicker Date Time or Time Attributes/Props:

format: This attribute is used to set the format of the input of the DateRangePicker component.

Syntax:

<DateRangePicker format="yyyy-MM-dd HH:mm:ss" />

Creating The React Application And Installing React Suite:

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

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

Let’s see some examples to understand how to use the React Suite DateRangePicker format attribute/prop.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the format attribute of the DateRangePicker component to set the format of the input to the date and time range.

src/App.js

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { DateRangePicker } from "rsuite"; 
  
function App() { 
  
    const pickerStyle =  
    {  
        marginBottom: "20px",  
        marginTop: "10px" 
    }; 
  
    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 Date Time or Time 
                </h5> 
            </header> 
  
            <p>  
                Default DateRangePicker  
            </p> 
            <DateRangePicker style={pickerStyle} /> 
            <p> 
                DateRangePicker with Date and Time Range 
            </p> 
            <DateRangePicker style= 
                {pickerStyle}  
                format="yyyy-MM-dd HH:mm:ss" 
            /> 
        </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 this example, we used the format attribute of the DateRangePicker component to take only the time range as the input.

src/App.js

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { DateRangePicker } from "rsuite"; 
  
function App() { 
  
    const pickerStyle =  
    {  
        marginBottom: "20px",  
        marginTop: "10px" 
    }; 
  
    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 Date Time or Time 
                </h5> 
            </header> 
  
            <p> 
                Default DateRangePicker 
            </p> 
            <DateRangePicker style={pickerStyle} /> 
            <p> 
                DateRangePicker with only Time Range as input 
            </p> 
            <DateRangePicker style= 
                {pickerStyle}  
                format="HH:mm" 
            /> 
        </div> 
    ); 
} 
  
export default App; 