DatePicker
Allows user to select a predefined date.
version
5.1.0
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()
.
Usage #
Pass a date for the value
Props from react-datepicker #
Simply add on DatePicker the props from react-datepicker
Give an Icon #
Add an icon with the icon
property
Sizes #
Use size propety with option:
xs
(24px)sm
(32px)md
(40px - default)lg
(48px)
Locales #
You can change your locale by pass locale property from date-fns.
In this exemple we import import dateFR from 'date-fns/locale/fr'
Transparent #
Pass transparent
to remove background-color and border-color
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
endYear | number | DEFAULT_DATE.getFullYear() | |
startYear | number | 1900 | |
locale | Locale | ||
icon | Element | ||
iconPlacement | "right" "left" | left | |
size | "xs" "sm" "md" "lg" | md | |
onChange | (date?: Date) => void | ||
onBlur | (event: FocusEvent<HTMLDivElement, Element>) => void | ||
onFocus | (event: FocusEvent<HTMLDivElement, Element>) => void | ||
useWeekdaysShort | Boolean | true | |
placeholder | string | ||
value | string Date | ||
transparent | Boolean |
Packages #
Dependencies #
Peer dependencies #
Previous
CheckboxNext
DateTimePicker