DatePicker

To select or input a date.

When To Use#

By clicking the input box, you can select a date from a popup calendar.

import { DatePicker, RangeDatePicker } from 'tailor-ui';

Property	Description	Type	Default
`allowClear`	Whether to show clear button	`boolean`	`false`
`showTime`	to provide an additional time selection	`boolean \\| ShowTime Options`	`false`
`disabledDate`	specify the date that cannot be selected	`(current: Date) => boolean`
`disabledTime`	to specify the time that cannot be selected	`(current: Date, type: 'start' \\| 'end') => boolean`
`placeholder`	placeholder of date input	`string`

Property	Description	Type	Default
`showHour`	whether show hour	`Boolean`	`true`
`showMinute`	whether show minute	`Boolean`	`true`
`showSecond`	whether show second	`Boolean`	`true`
`use12Hours`	12 hours display mode	`Boolean`	`false`
`hourStep`	interval between hours in picker	`Number`	1
`minuteStep`	interval between minutes in picker	`Number`	1
`secondStep`	interval between seconds in picker	`Number`	1
`hideDisabledOptions`	whether hide disabled options	`Boolean`	false

Property	Description	Type
`value`	to set date	`Date`
`defaultValue`	to set default date, if start time or end time is null or undefined, the date range will be an open interval	`Date`
`onChange`	a callback function, can be executed when the selected time is changing	`(date: Date \\| null, dateStrings: [string, string]) => void`

Property	Description	Type
`value`	to set date	`[Date, Date]`
`defaultValue`	to set default date, if start time or end time is null or undefined, the date range will be an open interval	`[Date, Date]`
`onChange`	a callback function, can be executed when the selected time is changing	`(date: [Date, Date] \\| null) => void`
`ranges`	preseted ranges for quick selection	`{ String \\| [range: string]: [Date, Date] } \\| { [range: string]: () => [Date, Date] }`