Skip to content
This repository has been archived by the owner on Sep 2, 2024. It is now read-only.

Adding 'readonly' attribute to input #127

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adding 'readonly' attribute to input #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce17ebb
Adding 'readonly' attribute to input
Mar 19, 2024
0156377
Adding 'readonly' attribute to input
Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` | `""` |

Expand Down
3 changes: 3 additions & 0 deletions src/components/duet-date-picker/date-picker-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type DatePickerInputProps = {
name: string
identifier: string
disabled: boolean
readonly: boolean
required: boolean
role: string
dateFormatter: Intl.DateTimeFormat
Expand All @@ -30,6 +31,7 @@ export const DatePickerInput: FunctionalComponent<DatePickerInputProps> = ({
value,
identifier,
disabled,
readonly,
required,
role,
buttonRef,
Expand All @@ -47,6 +49,7 @@ export const DatePickerInput: FunctionalComponent<DatePickerInputProps> = ({
id={identifier}
disabled={disabled}
role={role}
readonly={readonly ? true : undefined}
required={required ? true : undefined}
aria-autocomplete="none"
onInput={onInput}
Expand Down
6 changes: 6 additions & 0 deletions src/components/duet-date-picker/duet-date-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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?
*/
Expand Down Expand Up @@ -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}
Expand Down