mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
docs(date-picker): fulfill api table (#198)
* docs(DatePicker): add DatePicker docs * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/enUS/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> * Update src/date-picker/demos/zhCN/index.demo-entry.md Co-authored-by: 07akioni <07akioni2@gmail.com> Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
caoyugang_1
GitHub
parent
1662605688
commit
d866c1b122
@ -18,14 +18,14 @@ no-icon
|
||||
| closable | `boolean` | `false` | Whether the alert can be closed. |
|
||||
| show-icon | `boolean` | `true` | Whether to show the icon of alert. |
|
||||
| title | `string` | `undefined` | Title of the alert. |
|
||||
| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | alert type. |
|
||||
| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Alert type. |
|
||||
| on-after-leave | `Function` | `undefined` | Callback function executed when the alert disappears. |
|
||||
| on-close | `() => boolean \| Promise<boolean> \| any` | `() => true` | The callback function executed when the close icon is clicked. |
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | --------------------------------------------- |
|
||||
| default | `()` | The content of the alert. |
|
||||
| header | `()` | The content placed in the alert header. |
|
||||
| icon | `()` | Icon displayed in the alert. |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | --------------------------------------- |
|
||||
| default | `()` | The content of the alert. |
|
||||
| header | `()` | The content placed in the alert header. |
|
||||
| icon | `()` | Icon displayed in the alert. |
|
||||
|
||||
@ -25,63 +25,63 @@ footerslot
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| clearable | `boolean` | `false` | |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | |
|
||||
| on-blur | `() => void` | `undefined` | |
|
||||
| on-focus | `() => void` | `undefined` | |
|
||||
| clearable | `boolean` | `false` | Whether the date picker is clearable. |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | Date picker's default value. |
|
||||
| disabled | `boolean` | `false` | Whether the date picker is disabled. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Date picker size. |
|
||||
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | Date picker type. |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | Value of the date picker in controlled mode. |
|
||||
| on-blur | `() => void` | `undefined` | Callback function triggered on blur. |
|
||||
| on-focus | `() => void` | `undefined` | Callback function triggered on focus. |
|
||||
|
||||
### Date Type Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
|
||||
| format | `string` | `'yyyy-MM-dd'` | |
|
||||
| is-date-disabled | `(current: number) => boolean` | `() => false` | |
|
||||
| placeholder | `string` | `'Select Date'` | |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | Operations supported in date picker of `date` type. |
|
||||
| format | `string` | `'yyyy-MM-dd'` | Format of the input. |
|
||||
| is-date-disabled | `(current: number) => boolean` | `() => false` | Validator of the date. |
|
||||
| placeholder | `string` | `'Select Date'` | Prompt information. |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | Callback when date is selected. |
|
||||
|
||||
### DateTime Type Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
|
||||
| is-date-disabled | `(current: number) => boolean` | `() => false` | |
|
||||
| is-time-disabled | `(current: number) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
|
||||
| placeholder | `string` | `'Select Date and Time'` | |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | Operations supported in date picker of `datetime` type. |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | Format of the input. |
|
||||
| is-date-disabled | `(current: number) => boolean` | `() => false` | Validator of the date. |
|
||||
| is-time-disabled | `(current: number) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
|
||||
| placeholder | `string` | `'Select Date and Time'` | Prompt information. |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | Callback when date is selected. |
|
||||
|
||||
### DateRange Type Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
|
||||
| end-placeholder | `string` | `'End Date'` | |
|
||||
| format | `string` | `'yyyy-MM-dd'` | |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | |
|
||||
| separator | `string` | `'to'` | |
|
||||
| start-placeholder | `string` | `'Start Date'` | |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | Operations supported in date picker of `daterange` type. |
|
||||
| end-placeholder | `string` | `'End Date'` | The prompt information of the end input. |
|
||||
| format | `string` | `'yyyy-MM-dd'` | Format of the input. |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
|
||||
| separator | `string` | `'to'` | The separator between the start input and the end input. |
|
||||
| start-placeholder | `string` | `'Start Date'` | The prompt information of the start input. |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | Callback when range is changed. |
|
||||
|
||||
### DateTimeRange Type Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
|
||||
| end-placeholder | `string` | `'End Date and Time'` | |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | |
|
||||
| separator | `string` | `'to'` | |
|
||||
| start-placeholder | `string` | `'Start Date and Time'` | |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | Operations supported in date picker of `datetimerange` type. |
|
||||
| end-placeholder | `string` | `'End Date and Time'` | The prompt information of the end input. |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | Format of the input. |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
|
||||
| separator | `string` | `'to'` | The separator between the start input and the end input. |
|
||||
| start-placeholder | `string` | `'Start Date and Time'` | The prompt information of the start input. |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | Callback when value is changed. |
|
||||
|
||||
## Slots
|
||||
|
||||
|
||||
@ -25,63 +25,63 @@ footerslot
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| clearable | `boolean` | `false` | |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | |
|
||||
| on-blur | `() => void` | `undefined` | |
|
||||
| on-focus | `() => void` | `undefined` | |
|
||||
| clearable | `boolean` | `false` | 是否支持清除 |
|
||||
| default-value | `number \| [number, number] \| null` | `null` | 默认被选中的日期的时间戳 |
|
||||
| disabled | `boolean` | `false` | 是否禁用 |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
|
||||
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | Date Picker 的类型 |
|
||||
| value | `number \| [number, number] \| null` | `undefined` | Date Picker 的值 |
|
||||
| on-blur | `() => void` | `undefined` | 用户 blur 时执行的回调 |
|
||||
| on-focus | `() => void` | `undefined` | 用户 focus 时执行的回调 |
|
||||
|
||||
### Date 类型的 Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
|
||||
| format | `string` | `'yyyy-MM-dd'` | |
|
||||
| is-date-disabled | `(current: number) => boolean` | `undefined` | |
|
||||
| placeholder | `string` | `'选择日期'` | |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | Date 类型的 Date Picker 中支持的操作 |
|
||||
| format | `string` | `'yyyy-MM-dd'` | 时间格式化字符串 |
|
||||
| is-date-disabled | `(current: number) => boolean` | `undefined` | 日期禁用的校验函数 |
|
||||
| placeholder | `string` | `'选择日期'` | 自动填充的提示信息 |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | 可控数据更新时触发的回调函数 |
|
||||
|
||||
### DateTime 类型的 Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
|
||||
| is-date-disabled | `(current: number) => boolean` | `undefined` | |
|
||||
| is-time-disabled | `(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }` | `undefined` | |
|
||||
| placeholder | `string` | `'选择日期时间'` | |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | DateTime 类型的 Date Picker 中支持的操作 |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | 用户自定义的数据格式化方式 |
|
||||
| is-date-disabled | `(current: number) => boolean` | `undefined` | 日期禁用的校验函数 |
|
||||
| is-time-disabled | `(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }` | `undefined` | 时间禁用的校验函数 |
|
||||
| placeholder | `string` | `'选择日期时间'` | 提示信息 |
|
||||
| on-update:value | `(value: number \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
|
||||
|
||||
### DateRange 类型的 Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
|
||||
| end-placeholder | `string` | `'结束日期'` | |
|
||||
| format | `string` | `'yyyy-MM-dd'` | |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | |
|
||||
| separator | `string` | `'至'` | |
|
||||
| start-placeholder | `string` | `'开始日期'` | |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | DateRange 类型的 Date Picker 中支持的用户操作 |
|
||||
| end-placeholder | `string` | `'结束日期'` | DateRange 中 end 选框的提示信息 |
|
||||
| format | `string` | `'yyyy-MM-dd'` | 用户自定义的数据格式化方式 |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | 日期禁用的校验函数 |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | 时间禁用的校验函数 |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义的快捷选择范围 |
|
||||
| separator | `string` | `'至'` | start 选框与 end 选框之间的分隔符 |
|
||||
| start-placeholder | `string` | `'开始日期'` | DateRange 中 start 选框的提示信息 |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
|
||||
|
||||
### DateTimeRange 类型的 Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
|
||||
| end-placeholder | `string` | `'结束日期时间'` | |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | |
|
||||
| separator | `string` | `'to'` | |
|
||||
| start-placeholder | `string` | `'开始日期时间'` | |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
|
||||
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | DateTimeRange 类型的 Date Picker 中支持的用户操作 |
|
||||
| end-placeholder | `string` | `'结束日期时间'` | DateTimeRange 中 end 选框的提示信息 |
|
||||
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | 用户自定义的数据格式化方式 |
|
||||
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | 日期禁用的校验函数 |
|
||||
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | 时间禁用的校验函数 |
|
||||
| ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义 DateTimeRange 范围 |
|
||||
| separator | `string` | `'to'` | start 选框与 end 选框之间的分隔符 |
|
||||
| start-placeholder | `string` | `'开始日期时间'` | DateTimeRange 中 start 选框的提示信息 |
|
||||
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
|
||||
|
||||
## Slots
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user