diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html
index d3aaf221..1fc3bfbe 100644
--- a/angular/projects/catalyst-demo/src/app/app.component.html
+++ b/angular/projects/catalyst-demo/src/app/app.component.html
@@ -27,10 +27,10 @@ <h2>Form Components</h2>
   ></cat-select>
   <!--  Datepicker Section 1 -->
   <cat-checkbox #checkBox
-                label="Should disable next datepicker">
+                label="Should toggle between date and datetime">
   </cat-checkbox>
   <cat-datepicker
-    [disabled]="checkBox.checked"
+    [mode]="checkBox.checked ? 'date' : 'datetime'"
     label="Datepicker"
     [nativeAttributes]="{ 'data-test': 'test-attribute' }"
     hint="Depends on [disabled] attribute"
diff --git a/core/src/components/cat-datepicker/cat-datepicker.tsx b/core/src/components/cat-datepicker/cat-datepicker.tsx
index 642b4c11..8a010539 100644
--- a/core/src/components/cat-datepicker/cat-datepicker.tsx
+++ b/core/src/components/cat-datepicker/cat-datepicker.tsx
@@ -193,8 +193,9 @@ export class CatDatepickerFlat {
 
   @Watch('disabled')
   @Watch('readonly')
+  @Watch('mode')
   onDisabledChanged() {
-    // Dynamically changing 'disabled' value is not working due to a bug in the
+    // Dynamically changing config value is not working due to a bug in the
     // library. We thus need to fully recreate the date picker after the value
     // has been updated.
     this.pickr?.destroy();