mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
feat(components): [date-picker] add placement & fallback-placements (#18310)
* feat(components): [date-picker] add `placement` & `fallback-placements` * chore: remove console * docs: add type Placement * fix: update
This commit is contained in:
btea
GitHub
parent
2fae1b147c
commit
a8bdeb4f1d
@ -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<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] | — |
|
||||
| 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<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) | ^[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'
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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, 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<Placement>(String),
|
||||
values: placements,
|
||||
default: 'bottom',
|
||||
},
|
||||
/**
|
||||
* @description list of possible positions for dropdown
|
||||
*/
|
||||
fallbackPlacements: {
|
||||
type: definePropType<Placement[]>(Array),
|
||||
default: ['bottom', 'top', 'right', 'left'],
|
||||
},
|
||||
...useEmptyValuesProps,
|
||||
...useAriaProps(['ariaLabel']),
|
||||
} as const)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user