WUI logo

DatePicker

Allows user to select a predefined date.

version

5.14.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

Only display months #

Pass showMonthYearPicker to only display months, without days

Properties #

NameType(s)DefaultRequired
icon
string & Element
ReactElement<any, string | JSXElementConstructor<any>> & Element
endYear
number
DEFAULT_DATE.getFullYear()
startYear
number
1900
locale
Locale
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
preventVirtualKeyboard
Boolean
false
value
string
Date
transparent
Boolean

Packages #

Dependencies #
Peer dependencies #