WUI logo

DateTimePicker

Allows user to select a predefined date and time.

version

4.2.0

install

yarn add @welcome-ui/date-time-picker

usage

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

About #

It is based on the react-datepicker library. All the props the library exposes can be passed to either DatePicker or TimePicker.

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="Date">
<DateTimePicker name="welcome" onChange={handleChange} value={value} />
</Field>
)
}

Pass props to DatePicker #

function () {
const [value, setValue] = React.useState(Date.now())
const handleChange = newValue => {
setValue(newValue)
}
return (
<Field label="Date">
<DateTimePicker
dateFormat="MMM dd yyyy"
name="welcome2"
popperProps={{ zIndex: 50 }}
showMonthDropdown
showYearDropdown
onChange={handleChange}
value={value}
>
<DatePicker icon={<DateIcon />} iconPlacement="right" />
<TimePicker />
</DateTimePicker>
</Field>
)
}

Properties #

NameType(s)DefaultRequired
locale
Locale
Locale & string
onChange
((date?: Date) => void) & ((date?: Date) => void)
value
string
Date
size
"sm"
"md"
"lg"
lg

Packages #

Dependencies #
Peer dependencies #