DateTimePicker
Allows user to select a predefined date and time.
version
5.0.0-alpha.33
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()
.
Usage #
Pass a date for the value
Pass props to childs #
If you want to pass props to DatePicker or TimePicker you need to see example below
Sizes #
Use size propety with option:
xs
(24px)sm
(32px)md
(40px - default)lg
(48px)
Transparent #
Pass transparent
to remove background-color and border-color
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
locale | Locale Locale & string | ||
onChange | ((date?: Date) => void) & ((date?: Date) => void) | ||
value | string Date | ||
transparent | Boolean | ||
size | "xs" "sm" "md" "lg" | md |
Packages #
Dependencies #
@types/react-datepicker [^4.8.0]
@welcome-ui/button [^5.0.0-alpha.32]
@welcome-ui/clear-button [^5.0.0-alpha.32]
@welcome-ui/date-picker [^5.0.0-alpha.33]
@welcome-ui/date-time-picker-common [^5.0.0-alpha.33]
@welcome-ui/field [^5.0.0-alpha.32]
@welcome-ui/icons [^5.0.0-alpha.32]
@welcome-ui/select [^5.0.0-alpha.33]
@welcome-ui/system [^5.0.0-alpha.32]
@welcome-ui/time-picker [^5.0.0-alpha.33]
react-datepicker [^4.7.0]
Peer dependencies #
Previous
DatePickerNext
EmojiPicker