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.
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.
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