mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [date/time-picker] add id attribute to the inputs (#4972)

Browse Source 
* feat(components): [date/time-picker] add id attribute to the inputs

* docs(components): [date/time-picker] add id to attributes
This commit is contained in:
Delyan Haralanov 2021-12-27 10:04:39 +02:00 committed by GitHub
parent f85621d209
commit 542ea5ee7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/en-US/component/date-picker.md
View File

@ -199,6 +199,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| default-time | optional, the time value to use when selecting date range | Date[] | Array with length 2, each item is a Date. The first item for the start date and then second item for the end 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 / array(string) | String `id="my-date"` or array `:id="['my-range-start', 'my-range-end']"` for date range | - |
| 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 |

1
docs/en-US/component/datetime-picker.md
View File

@ -78,6 +78,7 @@ datetime-picker/default-time
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| default-time | the default time value after picking a date | non-range: Date / range: Date[] | non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time `00:00:00` will be used if not specified | — |
| id | same as `id` in native input | string / array(string) | String `id="my-datetime"` or array `:id="['my-range-start', 'my-range-end']"` for date range | - |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon component | string | — | Date |

49
docs/en-US/component/time-picker.md
View File

@ -29,30 +29,31 @@ time-picker/range
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value | Date | — | — |
| 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 | string | 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 |
| align | alignment | left / center / right | left |
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
| 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) | HH:mm:ss |
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
| name | same as `name` 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 | — | — |
| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value | Date | — | — |
| 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 | string | 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 |
| align | alignment | left / center / right | left |
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
| 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) | HH:mm:ss |
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
| id | same as `id` in native input | string / array(string) | String `id="my-time"` or array `:id="['my-range-start', 'my-range-end']"` for range | - |
| name | same as `name` 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 | — | — |
| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
## Events

3
packages/components/time-picker/src/common/picker.vue
View File

@ -20,6 +20,7 @@
<template #trigger>
<el-input
v-if="!isRangeInput"
:id="id"
v-clickoutside:[popperPaneRef]="onClickOutside"
:model-value="displayValue"
:name="name"
@ -78,6 +79,7 @@
<component :is="triggerIcon"></component>
</el-icon>
<input
:id="id && id[0]"
autocomplete="off"
:name="name && name[0]"
:placeholder="startPlaceholder"
@ -93,6 +95,7 @@
<span class="el-range-separator">{{ rangeSeparator }}</span>
</slot>
<input
:id="id && id[1]"
autocomplete="off"
:name="name && name[1]"
:placeholder="endPlaceholder"

3
packages/components/time-picker/src/common/props.ts
View File

@ -6,6 +6,9 @@ import type { Options } from '@popperjs/core'
import type { ComponentSize } from '@element-plus/utils/types'
export const timePickerDefaultProps = {
id: {
type: [Array, String],
},
name: {
type: [Array, String],
default: '',