feat: add readonly state for date picker (#2982)

Co-authored-by: Akshat Patel <[email protected]>

Author: eduardmarcinco

src/datepicker-input/datepicker-input.component.ts

@@ -53,6 +53,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 						[placeholder]="placeholder"
 						[id]= "id"
 						[disabled]="disabled"
+						[readonly]="readonly"
 							(change)="onChange($event)"/>
 							<svg
 								*ngIf="type !== 'simple' && !warn && !invalid"
@@ -128,6 +129,8 @@ export class DatePickerInput {
 	@Input() theme: "light" | "dark" = "dark";
 
 	@Input() disabled = false;
+
+	@Input() readonly = false;
 	/**
 	 * Set to `true` for invalid state.
 	 */

src/datepicker/datepicker.component.ts

@@ -74,6 +74,7 @@ if (languages.default?.default["en"]?.weekdays) {
 					[type]="(range ? 'range' : 'single')"
 					[hasIcon]="(range ? false : true)"
 					[disabled]="disabled"
+					[readonly]="readonly"
 					[invalid]="invalid"
 					[invalidText]="invalidText"
 					[warn]="warn"
@@ -96,6 +97,7 @@ if (languages.default?.default["en"]?.weekdays) {
 					[type]="(range ? 'range' : 'single')"
 					[hasIcon]="(range ? true : null)"
 					[disabled]="disabled"
+					[readonly]="readonly"
 					[invalid]="rangeInvalid"
 					[invalidText]="rangeInvalidText"
 					[warn]="rangeWarn"
@@ -183,6 +185,8 @@ export class DatePicker implements
 	@Input() theme: "light" | "dark" = "dark";
 
 	@Input() disabled = false;
+
+	@Input() readonly = false;
 	/**
 	 * Set to `true` to display the invalid state.
 	 */
@@ -235,7 +239,10 @@ export class DatePicker implements
 			mode: this.range ? "range" : "single",
 			plugins,
 			dateFormat: this.dateFormat,
-			locale: languages.default?.default[this.language] || languages.default[this.language]
+			locale: languages.default?.default[this.language] || languages.default[this.language],
+			// Little trick force "readonly mode" on datepicker input.
+			// Docs: Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open().
+			clickOpens: !this.readonly
 		});
 	}
 
@@ -314,7 +321,8 @@ export class DatePicker implements
 			"id",
 			"value",
 			"plugins",
-			"flatpickrOptions"
+			"flatpickrOptions",
+			"readonly"
 		];
 		const changeKeys = Object.keys(changes);
 		if (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {
@@ -444,6 +452,10 @@ export class DatePicker implements
 	 * Handles opening the calendar "properly" when the calendar icon is clicked.
 	 */
 	openCalendar(datepickerInput: DatePickerInput) {
+		if (this.readonly) {
+			return;
+		}
+
 		if (this.range) {
 			datepickerInput.input.nativeElement.click();
 
@@ -483,6 +495,10 @@ export class DatePicker implements
 		// flatpickr calendar using a keyboard.
 		const addFocusCalendarListener = (element: HTMLInputElement) => {
 			element.addEventListener("keydown", (event: KeyboardEvent) => {
+				// Listeners are added just once, so a check is needed here.
+				if (this.readonly) {
+					return;
+				}
 				if (event.key === "Escape") {
 					this.flatpickrInstance.close();
 				}

src/datepicker/datepicker.stories.ts

@@ -18,6 +18,7 @@ export default {
 		warnText: "This is a warning",
 		warn: false,
 		disabled: false,
+		readonly: false,
 		language: "en",
 		theme: "dark",
 		size: "md"
@@ -46,6 +47,7 @@ const Template = (args) => ({
 			[label]="label"
 			[placeholder]="placeholder"
 			[disabled]="disabled"
+			[readonly]="readonly"
 			[size]="size"
 			[invalid]="invalid"
 			[invalidText]="invalidText"
@@ -70,6 +72,7 @@ const SingleTemplate = (args) => ({
 			[theme]="theme"
 			[value]="value"
 			[disabled]="disabled"
+			[readonly]="readonly"
 			[invalid]="invalid"
 			[invalidText]="invalidText"
 			[warn]="warn"
@@ -85,6 +88,7 @@ const SingleTemplate = (args) => ({
 			[size]="size"
 			[theme]="theme"
 			[disabled]="disabled"
+			[readonly]="readonly"
 			[invalid]="invalid"
 			[invalidText]="invalidText"
 			[warn]="warn"
@@ -120,6 +124,7 @@ const RangeTemplate = (args) => ({
 			[language]="language"
 			[theme]="theme"
 			[disabled]="disabled"
+			[readonly]="readonly"
 			[invalid]="invalid"
 			[invalidText]="invalidText"
 			[warn]="warn"
@@ -141,6 +146,7 @@ const RangeTemplate = (args) => ({
 			[placeholder]="placeholder"
 			[theme]="theme"
 			[disabled]="disabled"
+			[readonly]="readonly"
 			[invalid]="invalid"
 			[invalidText]="invalidText"
 			[warn]="warn"