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 #
Name | Type(s) | Default | Required |
---|---|---|---|
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 |