diff --git a/docs/index.html b/docs/index.html
index f147027..7cc5282 100644
--- 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
index 061358d..35ba02f 100644
--- a/src/components/inclusive-dates/inclusive-dates.tsx
+++ b/src/components/inclusive-dates/inclusive-dates.tsx
@@ -490,10 +490,8 @@ export class InclusiveDates {
   }
 
   @Watch("value")
-  watchValue() {
-    if (Boolean(this.value) && !this.isRangeValue(this.value)) {
-      this.internalValue = this.value as string;
-    }
+  watchValue(newValue) {
+    this.internalValue = newValue;
   }
 
   private getClassName(element?: string) {