diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md index 9450a13625..8f6639de82 100644 --- a/docs/en-US/component/date-picker.md +++ b/docs/en-US/component/date-picker.md @@ -161,37 +161,39 @@ 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-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial` | {} | -| 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] | — | +| 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-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial` | {} | +| 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) | ^[arrary]`Placement[]` | — | +| placement ^(2.8.4) | position of dropdown | `Placement` | bottom | ### Events @@ -233,6 +235,20 @@ Note, date time locale (month name, first day of the week ...) are also configur import type { Options as PopperOptions } from '@popperjs/core' type TimeLikeType = 'datetime' | 'datetimerange' + +type Placement = + | 'top' + | 'top-start' + | 'top-end' + | 'bottom' + | 'bottom-start' + | 'bottom-end' + | 'left' + | 'left-start' + | 'left-end' + | 'right' + | 'right-start' + | 'right-end' ``` diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue index 77d03ef3a0..5c444e76b4 100644 --- a/packages/components/time-picker/src/common/picker.vue +++ b/packages/components/time-picker/src/common/picker.vue @@ -11,8 +11,9 @@ :transition="`${nsDate.namespace.value}-zoom-in-top`" :popper-class="[`${nsDate.namespace.value}-picker__popper`, popperClass]" :popper-options="elPopperOptions" - :fallback-placements="['bottom', 'top', 'right', 'left']" + :fallback-placements="fallbackPlacements" :gpu-acceleration="false" + :placement="placement" :stop-popper-mouse-event="false" :hide-after="0" persistent diff --git a/packages/components/time-picker/src/common/props.ts b/packages/components/time-picker/src/common/props.ts index 5876e56e80..1747e9e57b 100644 --- a/packages/components/time-picker/src/common/props.ts +++ b/packages/components/time-picker/src/common/props.ts @@ -1,3 +1,4 @@ +import { placements } from '@popperjs/core' import { buildProps, definePropType } from '@element-plus/utils' import { useAriaProps, @@ -10,6 +11,7 @@ import { disabledTimeListsProps } from '../props/shared' import type { Component, ExtractPropTypes } from 'vue' import type { Options } from '@popperjs/core' import type { Dayjs } from 'dayjs' +import type { Placement } from '@element-plus/components/popper' export type SingleOrRange = T | [T, T] export type DateModelType = number | string | Date @@ -208,6 +210,21 @@ export const timePickerDefaultProps = buildProps({ * @description unlink two date-panels in range-picker */ unlinkPanels: Boolean, + /** + * @description position of dropdown + */ + placement: { + type: definePropType(String), + values: placements, + default: 'bottom', + }, + /** + * @description list of possible positions for dropdown + */ + fallbackPlacements: { + type: definePropType(Array), + default: ['bottom', 'top', 'right', 'left'], + }, ...useEmptyValuesProps, ...useAriaProps(['ariaLabel']), } as const)