TimeInput

Overview

Experimental

TimeInput is an Experimental component, it's API may change, and even break across minor versions (though we will do our best to avoid that).

import TimeInput from "react-widgets/TimeInput"; <TimeInput style={{ width: "auto" }} />;

import TimeInput from "react-widgets/TimeInput";
<TimeInput style={{ width: "auto" }} />;

datePart

The default date used to construct a new time when the value is empty

type: Date

default:new Date()

disabled

<TimeInput disabled defaultValue={new Date()} />

<TimeInput
  disabled
  defaultValue={new Date()}
/>

type: boolean

emptyCharacter

The string character used to pad empty, or cleared values

type: string

default:'-'

hoursAddon

The seperator between hours and minutes

type: ReactReactNode

default:':'

millisecondsAddon

The seperator between hours and minutes

type: ReactReactNode

default:'.'

minutesAddon

The seperator between hours and minutes

type: ReactReactNode

default:':'

noClearButton

Hide the input clear button

type: boolean

onChange

A callback fired when the current value changes.

function ChangeExample({ initialValue }) { const [value, setValue] = useState(initialValue) return ( <TimeInput value={value} onChange={value => setValue(value)} /> ) } <ChangeExample initialValue={new Date()} />

function ChangeExample({ initialValue }) {
  const [value, setValue] = useState(initialValue)
  return (
    <TimeInput
      value={value}
      onChange={value => setValue(value)}
    />
  )
}
<ChangeExample initialValue={new Date()} />

type: (date: Datenull, ctx: any) => void

padValues

Time part values will be padded by 0

type: boolean

default:true

precision

Controls how precise of a time can be input *

type: 'minutes''seconds''milliseconds'

default:'minutes'

readOnly

Controls the read-only state of the TimeInput.

<TimeInput readOnly defaultValue={new Date()} />

<TimeInput
  readOnly
  defaultValue={new Date()}
/>

type: boolean

secondsAddon

The seperator between hours and minutes

type: ReactReactNode

default:':'

use12HourClock

Use a 12 hour clock (with AM/PM) instead of 24 hour one. The configured localizer may provide a default value .

type: boolean

value

Controls the current value of the TimeInput.

<> <TimeInput defaultValue={new Date()} /> </>

<>
  <TimeInput defaultValue={new Date()} />
</>

type: Datenull