React-simple-time-input NPM

react-simple-time-input

A simple time input that accepts times in flexible format. It has support for both 12- and 24-hour format.

demo

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.

@everything-registry/sub-chunk-2612

4 years ago

5 years ago

5 years ago

5 years ago