Open In App

React Suite DatePicker Usage Meridian format

Improve
Improve
Like Article
Like
Save
Share
Report

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 DatePicker Usage Meridian Format.

The DatePicker component is used to take the date/time input from the user. By default, the time shown in DatePicker will be in 24-hour format but it can be shown in Meridian Format (12-hour format) by using the showMeridian property of the Datepicker component.

React Suite DatePicker Usage Meridian Format Components:

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

React Suite DatePicker Usage Meridian Format Attributes/Props:

  • showMeridian: It is a boolean property of the DatePicker component used to show time in a 12-hour format.
  • appearance: This attribute is used to set the appearance of the DatePicker component. It can have one of two values: “default” or “subtle“.

Syntax:

<DatePicker showMeridian />

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  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 showMeridian attribute/prop.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the showMeridian attribute of the DatePicker component to show the time in meridian Format

App.js




import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } 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 DatePicker Meridian Format
                </h5>
            </header>
  
            <p>Default Time</p>
            <DatePicker format="HH:mm:ss" 
                        style={pickerStyle} />
  
            <p>Meridian Time</p>
            <DatePicker showMeridian 
                        format="hh:mm:ss aa" 
                        style={pickerStyle} />
        </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 Meridian DatePicker with different appearances i.e default and subtle.

App.js




import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } 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 DatePicker Meridian Format
                </h5>
            </header>
  
            <p>Primary Appearance</p>
            <DatePicker showMeridian 
                        format="hh:mm:ss aa" 
                        style={pickerStyle} 
                        appearance="default"/>
  
            <p>Subtle Appearance</p>
            <DatePicker showMeridian 
                        format="hh:mm:ss aa" 
                        style={pickerStyle} 
                        appearance="subtle"/>
        </div>
    );
}
export default App;


Output:

 

Reference: https://rsuitejs.com/components/date-picker/#meridian-format



Last Updated : 29 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads