test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 18:27:40 +08:00
Code Issues Actions 4 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 |

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

@ -30,7 +30,7 @@ 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 |
@ -47,6 +47,7 @@ time-picker/range
| 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 |

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: '',