In this article, we will implement react-time-picker in react js.
First, we should install react-time-picker in our application
npm i react-time-picker
Import this package into our application
import React, { useState } from 'react';
import TimePicker from 'react-time-picker';
You can see how to implement react-time-picker
import React, { useState } from 'react';
import TimePicker from 'react-time-picker';
export default function TimePicker1() {
const [value, onChange] = useState('10:00');
return (
<div>
<TimePicker onChange={onChange} value={value} />
</div>
)
}
Here is a list of props you can give the component.
onChange
When a valid time is selected by the user, the function is called.
onClockClose
When the clock expires, a function is called.
required
whether date input ought to be necessary.
maxTime
The longest period the user can choose.
minTime
The earliest date that the user may choose.
maxDetail
How specific the time selection should be. Possibly “hour,” “minute,” or “second.”
format
Based on Unicode Technical Standard #35 for input format. The following values are supported: H, HH, h, hh, m, mm, s, ss, and a.
You can see below the output
