WUI logo

TimePicker

Allows user to select a predefined time.

version

4.2.0

install

yarn add @welcome-ui/time-picker

usage

import { TimePicker } from '@welcome-ui/time-picker'

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>
)
}

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>
)
}

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>
)
}

Properties #

NameType(s)DefaultRequired
size
"sm"
"md"
"lg"
lg
icon
Element
iconPlacement
"right"
"left"
left
onChange
(date?: Date) => void
onBlur
(event: FocusEvent<HTMLDivElement, Element>) => void
onFocus
(event: FocusEvent<HTMLDivElement, Element>) => void
placeholder
string
value
string
Date

Packages #

Dependencies #
Peer dependencies #

Previous

Textarea