From ce17ebb9f793e43fd75efac00e74bddf0b3f0eec Mon Sep 17 00:00:00 2001 From: jdorran4 Date: Tue, 19 Mar 2024 08:51:46 -0700 Subject: [PATCH 1/2] Adding 'readonly' attribute to input --- README.md | 1 + src/components/duet-date-picker/date-picker-input.tsx | 3 +++ src/components/duet-date-picker/duet-date-picker.tsx | 6 ++++++ 3 files changed, 10 insertions(+) diff --git a/README.md b/README.md index 43f2bea..b54b537 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,7 @@ Once included, Duet Date Picker can be used in your markup like any other regula | `min` | `min` | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. | `string` | `""` | | `name` | `name` | Name of the date picker input. | `string` | `"date"` | | `role` | `role` | Defines a specific role attribute for the date picker input. | `string` | `undefined` | +| `readonly` | `readonly` | Should the input be marked as readonly? | `boolean` | `false` | | `required` | `required` | Should the input be marked as required? | `boolean` | `false` | | `value` | `value` | Date value. Must be in IS0-8601 format: YYYY-MM-DD. | `string` | `""` | diff --git a/src/components/duet-date-picker/date-picker-input.tsx b/src/components/duet-date-picker/date-picker-input.tsx index f144ca7..132d990 100644 --- a/src/components/duet-date-picker/date-picker-input.tsx +++ b/src/components/duet-date-picker/date-picker-input.tsx @@ -10,6 +10,7 @@ type DatePickerInputProps = { identifier: string disabled: boolean required: boolean + readonly: boolean role: string dateFormatter: Intl.DateTimeFormat onClick: (event: MouseEvent) => void @@ -30,6 +31,7 @@ export const DatePickerInput: FunctionalComponent = ({ value, identifier, disabled, + readonly, required, role, buttonRef, @@ -47,6 +49,7 @@ export const DatePickerInput: FunctionalComponent = ({ id={identifier} disabled={disabled} role={role} + readonly={readonly ? true : undefined} required={required ? true : undefined} aria-autocomplete="none" onInput={onInput} diff --git a/src/components/duet-date-picker/duet-date-picker.tsx b/src/components/duet-date-picker/duet-date-picker.tsx index ad1d811..d31f575 100644 --- a/src/components/duet-date-picker/duet-date-picker.tsx +++ b/src/components/duet-date-picker/duet-date-picker.tsx @@ -176,6 +176,11 @@ export class DuetDatePicker implements ComponentInterface { */ @Prop() direction: DuetDatePickerDirection = "right" + /** + * Should the input be marked as readonly? + */ + @Prop() readonly: boolean = false + /** * Should the input be marked as required? */ @@ -611,6 +616,7 @@ export class DuetDatePicker implements ComponentInterface { name={this.name} disabled={this.disabled} role={this.role} + readonly={this.readonly} required={this.required} identifier={this.identifier} localization={this.localization} From 015637736696275af5e3b9117c64c6be675bcd45 Mon Sep 17 00:00:00 2001 From: jdorran4 Date: Tue, 19 Mar 2024 08:57:23 -0700 Subject: [PATCH 2/2] Adding 'readonly' attribute to input --- src/components/duet-date-picker/date-picker-input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/duet-date-picker/date-picker-input.tsx b/src/components/duet-date-picker/date-picker-input.tsx index 132d990..dec16fb 100644 --- a/src/components/duet-date-picker/date-picker-input.tsx +++ b/src/components/duet-date-picker/date-picker-input.tsx @@ -9,8 +9,8 @@ type DatePickerInputProps = { name: string identifier: string disabled: boolean - required: boolean readonly: boolean + required: boolean role: string dateFormatter: Intl.DateTimeFormat onClick: (event: MouseEvent) => void