react-simple-time-input
A simple time input that accepts times in flexible format. It has support for both 12- and 24-hour format.
Installation
npm install react-simple-time-input --save
Usage
import React, { useState } from 'react'
import SimpleTimeInput from 'react-simple-time-input'
function MyComponent () {
const [time, setTime] = useState('14:00')
const valueChanged = newValue => {
setTime(newValue)
alert(`Time changed to ${newValue}`)
}
return (
<SimpleTimeInput
value={time}
clockMode={12}
onValueChange={valueChanged} // called on blur
/>
)
}
Prop types
Prop | Required | Type | Description |
---|---|---|---|
value |
Yes | String | The current value, always in 24-hour format (e.g. 14:00 ) |
clockMode |
Yes |
12 or 24 (Number) |
The clock input and display mode (12- or 24-hour format) |
as |
No | elementType |
Type of component to be rendered, e.g. as={TextField} . If not passed, an HTML input will be used by default. |
onValueChange |
No | Function | Function to be called on blur event. It passes the interpreted time as argument. |
invalidClassName |
No | String |
className appended to element when user is typing a time in invalid format. If not passed, the class name invalid-time will be used by default. |
Any additional prop passed is forwarded to the input component.
When onChange
is used, the event is forwarded and an object is passed as the second argument with a valid
flag and time
with the time interpreted.