Skip to content
Related Articles
Open in App
Not now

Related Articles

React Suite DatePicker Show time

Improve Article
Save Article
  • Last Updated : 25 Aug, 2022
Improve Article
Save Article

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite DatePicker Showtime. The DatePicker Component is used to choose a time or date from the picker. We can also show time in hours and minutes and also with seconds from the DatePicker component.

Syntax:

<DatePicker
     format="HH:mm:ss || HH:mm"
/>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

 

Example 1: Below is the example that demonstrates the DatePicker Show time using hours, minutes, and seconds format.

Javascript




import { DatePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <div>
            <div style={
                {
                    textAlign: "center"
                }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={
                    {
                        color: "green"
                    }}>
                    React Suite DatePicker
                    Show Time
                </h4>
            </div>
  
            <div style={
                {
                    padding: 20,
                    textAlign: "center"
                }}>
                <div>
                    <DatePicker format="HH:mm:ss"
                        ranges={[]} style={
                            {
                                width: 200
                            }} />
                </div>
            </div>
        </div>
    );
}


Output:

 

Example 2: Below is another example that demonstrates the DatePicker Show time using the hours and minutes format.

Javascript




import { DatePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    return (
        <div>
            <div style={
                {
                    textAlign: "center"
                }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={
                    {
                        color: "green"
                    }}>
                    React Suite DatePicker
                    Show Time
                </h4>
            </div>
            <div style={
                {
                    padding: 20,
                    textAlign: "center"
                }}>
                <div>
                    <DatePicker format="HH:mm"
                        ranges={[]} style={
                            {
                                width: 200
                            }} />
                </div>
            </div>
        </div>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/date-picker/#show-time


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!