WUI logo

DatePicker

Allows user to select a predefined date.

version

4.1.2

install

yarn add @welcome-ui/date-picker

usage

import { DatePicker } from '@welcome-ui/date-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 usecase #

function () {
const [value, setValue] = React.useState(Date.now())
const handleChange = newValue => {
setValue(newValue)
}
return (
<Field label="Date">
<DatePicker name="welcome" onChange={handleChange} value={value} />
</Field>
)
}

Pass props from the original library. #

function () {
const [value, setValue] = React.useState(Date.now())
const handleChange = newValue => {
setValue(newValue)
}
return (
<Field label="Date">
<DatePicker
dateFormat="MMM dd yyyy"
name="welcome2"
maxDate={new Date()}
popperProps={{ zIndex: 50 }}
yearDropdownItemNumber={30}
onChange={handleChange}
value={value}
/>
</Field>
)
}

Give an Icon #

function () {
const [value, setValue] = React.useState(Date.now())
const handleChange = newValue => {
setValue(newValue)
}
return (
<Field label="Date">
<DatePicker icon={<DateIcon color="light.100" />} name="welcome3" value={value} onChange={handleChange} />
</Field>
)
}

fr locale #

function () {
const [value, setValue] = React.useState(Date.now())
const handleChange = newValue => {
setValue(newValue)
}
return (
<Field label="Date">
<DatePicker locale={dateFR} name="welcome4" value={value} onChange={handleChange} />
</Field>
)
}

Properties #

NameType(s)DefaultRequired
endYear
number
DEFAULT_DATE.getFullYear()
startYear
number
1900
locale
Locale
icon
Element
iconPlacement
"right"
"left"
left
size
"sm"
"md"
"lg"
lg
onChange
(date?: Date) => void
onBlur
(event: FocusEvent<HTMLDivElement, Element>) => void
onFocus
(event: FocusEvent<HTMLDivElement, Element>) => void
useWeekdaysShort
Boolean
true
placeholder
string
value
string
Date

Packages #

Dependencies #
Peer dependencies #