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..dec16fb 100644 --- a/src/components/duet-date-picker/date-picker-input.tsx +++ b/src/components/duet-date-picker/date-picker-input.tsx @@ -9,6 +9,7 @@ type DatePickerInputProps = { name: string identifier: string disabled: boolean + readonly: boolean required: boolean role: string dateFormatter: Intl.DateTimeFormat @@ -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}