TimePicker

About #

It is based on the react-datepicker library.

Note: Pass a value of null if you don't want the default value of Date.now().

Simple use case #

function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Time">
      <TimePicker name="welcome" onChange={handleChange} value={value} />
    </Field>
  )
}
Copy

Add an icon on the right #

function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Time">
      <TimePicker icon={<DateIcon color="light.100" />} iconPlacement="right" name="welcome2" onChange={handleChange} value={value} />
    </Field>
  )
}
Copy

Pass props to TimePicker #

function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field>
      <TimePicker name="welcome3" popperProps={{ zIndex: 50 }} timeIntervals={30} onChange={handleChange} value={value} />
    </Field>
  )
}
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #