From 542ea5ee7ed65af2fdcfdac6152b4a0d4630ff86 Mon Sep 17 00:00:00 2001 From: Delyan Haralanov Date: Mon, 27 Dec 2021 10:04:39 +0200 Subject: [PATCH] feat(components): [date/time-picker] add id attribute to the inputs (#4972) * feat(components): [date/time-picker] add id attribute to the inputs * docs(components): [date/time-picker] add id to attributes --- docs/en-US/component/date-picker.md | 1 + docs/en-US/component/datetime-picker.md | 1 + docs/en-US/component/time-picker.md | 49 ++++++++++--------- .../time-picker/src/common/picker.vue | 3 ++ .../time-picker/src/common/props.ts | 3 ++ 5 files changed, 33 insertions(+), 24 deletions(-) diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md index 5ca1bf8d80..8a40f7ce0a 100644 --- a/docs/en-US/component/date-picker.md +++ b/docs/en-US/component/date-picker.md @@ -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 | diff --git a/docs/en-US/component/datetime-picker.md b/docs/en-US/component/datetime-picker.md index 11f74e70d4..fd65918d2c 100644 --- a/docs/en-US/component/datetime-picker.md +++ b/docs/en-US/component/datetime-picker.md @@ -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 | diff --git a/docs/en-US/component/time-picker.md b/docs/en-US/component/time-picker.md index 0579fd48bb..a758a391d8 100644 --- a/docs/en-US/component/time-picker.md +++ b/docs/en-US/component/time-picker.md @@ -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 diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue index cf5c628617..1b37c32be0 100644 --- a/packages/components/time-picker/src/common/picker.vue +++ b/packages/components/time-picker/src/common/picker.vue @@ -20,6 +20,7 @@