A simple time input that accepts times in flexible format. It has support for both 12- and 24-hour format.
npm install react-simple-time-inputA simple time input that accepts times in flexible format. It has support for both 12- and 24-hour format.
!demo
npm install react-simple-time-input --save
``jsx
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 (
clockMode={12}
onValueChange={valueChanged} // called on blur
/>
)
}
`
| 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.