mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(components): [tooltip/time-picker/datetime-picker] add the missing prop about popper (#22284)
* docs: add the missing prop about popper * docs: update * docs: update
This commit is contained in:
Rainbow
@@ -162,44 +162,44 @@ Note, date time locale (month name, first day of the week ...) are also configur
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [string, string]` | '' |
|
||||
| readonly | whether DatePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| size | size of Input | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | '' |
|
||||
| start-placeholder | placeholder for the start date in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | ^[string] | — |
|
||||
| type | type of the picker | ^[enum]`'year' \| 'years' \|'month' \| 'months' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange' \| 'yearrange'` | date |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD |
|
||||
| popper-class | custom class name for DatePicker's dropdown | ^[string] | — |
|
||||
| popper-style | custom style for DatePicker's dropdown | ^[string] / ^[object] | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial<PopperOptions>` | {} |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| default-value | optional, default date of the calendar | ^[object]`Date \| [Date, Date]` | — |
|
||||
| default-time | optional, the time value to use when selecting date range | ^[object]`Date \| [Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] / ^[object]`[string, string]` | '' |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| prefix-icon | custom prefix icon component. By default, if the value of `type` is `TimeLikeType`, the value is `Clock`, else is `Calendar` | ^[string] / ^[object]`Component` | '' |
|
||||
| clear-icon | custom clear icon component | ^[string] / ^[object]`Component` | `CircleClose` |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | ^[Function]`(data: Date) => boolean` | — |
|
||||
| shortcuts | an object array to set shortcut options | ^[object]`Array<{ text: string, value: Date \| Function }>` | [] |
|
||||
| cell-class-name | set custom className | ^[Function]`(data: Date) => string` | — |
|
||||
| teleported | whether date-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| fallback-placements ^(2.8.4) | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | — |
|
||||
| placement ^(2.8.4) | position of dropdown | `Placement` | bottom |
|
||||
| show-footer ^(2.10.5) | whether to show footer | ^[boolean] | true |
|
||||
| show-confirm ^(2.11.0) | whether to show the confirm button | ^[boolean] | true |
|
||||
| show-week-number ^(2.10.3) | show the week number besides the week | ^[boolean] | false |
|
||||
| automatic-dropdown ^(2.11.4) | this prop decides if the date picker panel pops up when the input is focused. (The default value will be set to false in version 3.0) | ^[boolean] | true |
|
||||
| Name | Description | Type | Default |
|
||||
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [string, string]` | '' |
|
||||
| readonly | whether DatePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| size | size of Input | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | '' |
|
||||
| start-placeholder | placeholder for the start date in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | ^[string] | — |
|
||||
| type | type of the picker | ^[enum]`'year' \| 'years' \|'month' \| 'months' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange' \| 'yearrange'` | date |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD |
|
||||
| popper-class | custom class name for DatePicker's dropdown | ^[string] | — |
|
||||
| popper-style | custom style for DatePicker's dropdown | ^[string] / ^[object] | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial<PopperOptions>` | {} |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| default-value | optional, default date of the calendar | ^[object]`Date \| [Date, Date]` | — |
|
||||
| default-time | optional, the time value to use when selecting date range | ^[object]`Date \| [Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] / ^[object]`[string, string]` | '' |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| prefix-icon | custom prefix icon component. By default, if the value of `type` is `TimeLikeType`, the value is `Clock`, else is `Calendar` | ^[string] / ^[object]`Component` | '' |
|
||||
| clear-icon | custom clear icon component | ^[string] / ^[object]`Component` | `CircleClose` |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | ^[Function]`(data: Date) => boolean` | — |
|
||||
| shortcuts | an object array to set shortcut options | ^[object]`Array<{ text: string, value: Date \| Function }>` | [] |
|
||||
| cell-class-name | set custom className | ^[Function]`(data: Date) => string` | — |
|
||||
| teleported | whether date-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| fallback-placements ^(2.8.4) | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom', 'top', 'right', 'left'] |
|
||||
| placement ^(2.8.4) | position of dropdown | `Placement` | bottom |
|
||||
| show-footer ^(2.10.5) | whether to show footer | ^[boolean] | true |
|
||||
| show-confirm ^(2.11.0) | whether to show the confirm button | ^[boolean] | true |
|
||||
| show-week-number ^(2.10.3) | show the week number besides the week | ^[boolean] | false |
|
||||
| automatic-dropdown ^(2.11.4) | this prop decides if the date picker panel pops up when the input is focused. (The default value will be set to false in version 3.0) | ^[boolean] | true |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -81,46 +81,49 @@ datetime-picker/custom-icon
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| -------------------------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [string, string]` | — |
|
||||
| readonly | whether DatePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | default |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | — |
|
||||
| start-placeholder | placeholder for the start date in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | ^[string] | — |
|
||||
| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false |
|
||||
| type | type of the picker | ^[enum]`'year' \| 'month' \| 'date' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange'` | date |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD HH:mm:ss |
|
||||
| popper-class | custom class name for DateTimePicker's dropdown | ^[string] | — |
|
||||
| popper-style | custom style for DateTimePicker's dropdown | ^[string] / ^[object] | — |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| default-value | optional, default date of the calendar | ^[object]`Date \| [Date, Date]` | — |
|
||||
| default-time | the default time value after picking a date. Time `00:00:00` will be used if not specified | ^[object]`Date \| [Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | — |
|
||||
| date-format ^(2.4.0) | optional, format of the date displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | YYYY-MM-DD |
|
||||
| time-format ^(2.4.0) | optional, format of the time displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | HH:mm:ss |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| prefix-icon | Custom prefix icon component | ^[string] / `Component` | Date |
|
||||
| clear-icon | Custom clear icon component | ^[string] / `Component` | CircleClose |
|
||||
| shortcuts | an object array to set shortcut options | ^[object]`Array<{ text: string, value: Date \| Function }>` | — |
|
||||
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | ^[Function]`(data: Date) => boolean` | — |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | ^[Function]`(role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function]`(hour: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function]`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| cell-class-name | set custom className | ^[Function]`(data: Date) => string` | — |
|
||||
| teleported | whether datetime-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| show-now ^(2.8.7) | whether to show the now button | ^[boolean] | true |
|
||||
| show-footer ^(2.10.5) | whether to show footer where the date picker is one ^[enum]`'datetime' \| 'datetimerange'` | ^[boolean] | true |
|
||||
| show-confirm ^(2.11.0) | whether to show the confirm button | ^[boolean] | true |
|
||||
| show-week-number ^(2.10.3) | show the week number besides the week | `boolean` | false |
|
||||
| Name | Description | Type | Default |
|
||||
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [string, string]` | — |
|
||||
| readonly | whether DatePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | default |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | — |
|
||||
| start-placeholder | placeholder for the start date in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | ^[string] | — |
|
||||
| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false |
|
||||
| type | type of the picker | ^[enum]`'year' \| 'month' \| 'date' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange'` | date |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD HH:mm:ss |
|
||||
| popper-class | custom class name for DateTimePicker's dropdown | ^[string] | — |
|
||||
| popper-style | custom style for DateTimePicker's dropdown | ^[string] / ^[object] | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial<PopperOptions>` | {} |
|
||||
| fallback-placements ^(2.8.4) | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom', 'top', 'right', 'left'] |
|
||||
| placement ^(2.8.4) | position of dropdown | `Placement` | bottom |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| default-value | optional, default date of the calendar | ^[object]`Date \| [Date, Date]` | — |
|
||||
| default-time | the default time value after picking a date. Time `00:00:00` will be used if not specified | ^[object]`Date \| [Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | — |
|
||||
| date-format ^(2.4.0) | optional, format of the date displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | YYYY-MM-DD |
|
||||
| time-format ^(2.4.0) | optional, format of the time displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | HH:mm:ss |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| prefix-icon | Custom prefix icon component | ^[string] / `Component` | Date |
|
||||
| clear-icon | Custom clear icon component | ^[string] / `Component` | CircleClose |
|
||||
| shortcuts | an object array to set shortcut options | ^[object]`Array<{ text: string, value: Date \| Function }>` | — |
|
||||
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | ^[Function]`(data: Date) => boolean` | — |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | ^[Function]`(role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function]`(hour: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function]`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| cell-class-name | set custom className | ^[Function]`(data: Date) => string` | — |
|
||||
| teleported | whether datetime-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| show-now ^(2.8.7) | whether to show the now button | ^[boolean] | true |
|
||||
| show-footer ^(2.10.5) | whether to show footer where the date picker is one ^[enum]`'datetime' \| 'datetimerange'` | ^[boolean] | true |
|
||||
| show-confirm ^(2.11.0) | whether to show the confirm button | ^[boolean] | true |
|
||||
| show-week-number ^(2.10.3) | show the week number besides the week | `boolean` | false |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -151,3 +154,26 @@ datetime-picker/custom-icon
|
||||
| ------------- | ------------------------------ | ----------------------- |
|
||||
| focus | focus the DatePicker component | ^[Function]`() => void` |
|
||||
| blur ^(2.8.7) | blur the DatePicker component | ^[Function]`() => void` |
|
||||
|
||||
## Type Declarations
|
||||
|
||||
<details>
|
||||
<summary>Show declarations</summary>
|
||||
|
||||
```ts
|
||||
type Placement =
|
||||
| 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@@ -41,38 +41,41 @@ time-picker/range
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | '' |
|
||||
| readonly | whether TimePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether TimePicker is disabled | ^[boolean] | false |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | — |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | '' |
|
||||
| start-placeholder | placeholder for the start time in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end time in range mode | ^[string] | — |
|
||||
| is-range | whether to pick a time range | ^[boolean] | false |
|
||||
| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false |
|
||||
| popper-class | custom class name for TimePicker's dropdown | ^[string] | '' |
|
||||
| popper-style | custom style for TimePicker's dropdown | ^[string] / ^[object] | — |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| default-value | optional, default date of the calendar | ^[Date] / ^[object]`[Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] | '' |
|
||||
| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in native input | ^[string] | — |
|
||||
| prefix-icon | Custom prefix icon component | ^[string] / ^[Component] | Clock |
|
||||
| clear-icon | Custom clear icon component | ^[string] / ^[Component] | CircleClose |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | ^[Function]`(role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function]`(hour: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function]`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| teleported | whether time-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| tabindex | input tabindex | ^[string] / ^[number] | 0 |
|
||||
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| label ^(a11y) ^(deprecated) | same as `aria-label` in native input | ^[string] | — |
|
||||
| Name | Description | Type | Default |
|
||||
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | '' |
|
||||
| readonly | whether TimePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether TimePicker is disabled | ^[boolean] | false |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | — |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | '' |
|
||||
| start-placeholder | placeholder for the start time in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end time in range mode | ^[string] | — |
|
||||
| is-range | whether to pick a time range | ^[boolean] | false |
|
||||
| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false |
|
||||
| popper-class | custom class name for TimePicker's dropdown | ^[string] | '' |
|
||||
| popper-style | custom style for TimePicker's dropdown | ^[string] / ^[object] | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial<PopperOptions>` | {} |
|
||||
| fallback-placements ^(2.8.4) | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom', 'top', 'right', 'left'] |
|
||||
| placement ^(2.8.4) | position of dropdown | `Placement` | bottom |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| default-value | optional, default date of the calendar | ^[Date] / ^[object]`[Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] | '' |
|
||||
| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in native input | ^[string] | — |
|
||||
| prefix-icon | Custom prefix icon component | ^[string] / ^[Component] | Clock |
|
||||
| clear-icon | Custom clear icon component | ^[string] / ^[Component] | CircleClose |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | ^[Function]`(role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | ^[Function]`(hour: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | ^[Function]`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | — |
|
||||
| teleported | whether time-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| tabindex | input tabindex | ^[string] / ^[number] | 0 |
|
||||
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| label ^(a11y) ^(deprecated) | same as `aria-label` in native input | ^[string] | — |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -92,3 +95,26 @@ time-picker/range
|
||||
| blur | blur the TimePicker component | ^[Function]`() => void` |
|
||||
| handleOpen ^(2.2.16) | open the TimePicker popper | ^[Function]`() => void` |
|
||||
| handleClose ^(2.2.16) | close the TimePicker popper | ^[Function]`() => void` |
|
||||
|
||||
## Type Declarations
|
||||
|
||||
<details>
|
||||
<summary>Show declarations</summary>
|
||||
|
||||
```ts
|
||||
type Placement =
|
||||
| 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@@ -179,6 +179,7 @@ tooltip/append-to
|
||||
| hide-after | delay of disappear, in millisecond | ^[number] | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip | ^[number] | 0 |
|
||||
| popper-class | custom class name for Tooltip's popper | ^[string] | — |
|
||||
| popper-style | custom style for Tooltip's popper | ^[string] / ^[object] | — |
|
||||
| enterable | whether the mouse can enter the tooltip | ^[boolean] | true |
|
||||
| teleported | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets | ^[boolean] | true |
|
||||
| trigger | How should the tooltip be triggered (to show) | ^[enum]`'hover' \| 'click' \| 'focus' \| 'contextmenu'` | hover |
|
||||
|
||||
Reference in New Issue
Block a user