Allow to select date or range dates programatically with value attribute

fymmot · Mar 6, 2024 · d3603c2 · d3603c2
1 parent 2e5076b
commit d3603c2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -192,7 +192,6 @@ <h2 id="demo" tabindex="-1">Demo</h2>
             <td>
               <input
                 aria-labelledby="value-label"
-                disabled
                 id="value"
                 type="text"
               />
@@ -1415,6 +1414,11 @@ <h2>About me</h2>
     valueInput.value = event.detail ? JSON.stringify(event.detail) : "";
   });
 
+  valueInput.addEventListener("change", (event) => {
+    datepicker.setAttribute("value", event.target.value);
+    updateDemoCode();
+  });
+
   idInput.addEventListener("change", (event) => {
     datepicker.setAttribute("id", event.target.value);
     updateDemoCode();

diff --git a/src/components/inclusive-dates/inclusive-dates.tsx b/src/components/inclusive-dates/inclusive-dates.tsx
@@ -490,9 +490,20 @@ export class InclusiveDates {
   }
 
   @Watch("value")
-  watchValue() {
-    if (Boolean(this.value) && !this.isRangeValue(this.value)) {
-      this.internalValue = this.value as string;
+  watchValue(newValue) {
+    if (this.range) {
+      const parsedValue = JSON.parse(newValue.replace(/'/g, '"'));
+      this.internalValue = parsedValue;
+      this.pickerRef.value = parsedValue.map((date) =>
+        removeTimezoneOffset(new Date(date as string))
+      );
+    } else {
+      this.internalValue = newValue;
+      this.pickerRef.value = removeTimezoneOffset(new Date(newValue));
+    }
+    this.errorState = false;
+    if (document.activeElement !== this.inputRef) {
+      this.formatInput(true, false);
     }
   }