zilly-ui
Version:
Zilly web react ui components
58 lines (42 loc) • 3.18 kB
text/mdx
---
name: DatePicker
---
# DatePicker
## To select or input a date.
import { Playground, Props } from "docz";
import {BaseUse, SelectTimer, DisabledDate, Disabled , ChangeCallback} from "./demo";
## Props
| Property | Description | Type | Default |
| :--------------- | :----------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :--------- |
| placeholder | DatePicker input Placeholder | string | - |
| inputRef | This prop can be used to pass a ref callback to the input element. | React.RefObject\<HTMLInputElement\> | number | - |
| value | to set date | dayjs \| string | - |
| disabled | determine whether the DatePicker is disabled | boolean | false |
| local | localization configuration | enum("zh-cn" \| "en") | en |
| showTime | to provide an additional time selection | boolean | false |
| showToday | whether to show "Today" button | boolean | true |
| type | change DateComponet type | "datePicker" \| "timerPicker" | datePicker |
| disabledDate | specify the date that cannot be selected | (current:dayjs) => boolean | - |
| disabledDateTime | specify the date that cannot be selected (Only useful if the showTime attribute exists) | (current:dayjs) => boolean | - |
| defaultValue | to set default date, if start time or end time is null or undefined, the date range will be an open interval | dayjs | - |
| onChange | a callback function, can be executed when the selected time is changing | (date: dayjs, dateString: string) => void | - |
### base usage
<Playground>
<BaseUse />
</Playground>
### select timer
<Playground>
<SelectTimer />
</Playground>
### disabled
<Playground>
<Disabled />
</Playground>
### disabled date
<Playground>
<DisabledDate />
</Playground>
### ChangeCallback
<Playground>
<ChangeCallback />
</Playground>