From d17d28a387f0299f8acf3fc0bf5ad963e67948d3 Mon Sep 17 00:00:00 2001
From: Tim Sielemann <tim.sielemann@googlemail.com>
Date: Fri, 1 Mar 2024 12:02:30 +0100
Subject: [PATCH] fix: make mode dynamically changeable for datepicker (#468)

fix: make mode dynamically changeable for datepicker (#468)
---
 angular/projects/catalyst-demo/src/app/app.component.html | 4 ++--
 core/src/components/cat-datepicker/cat-datepicker.tsx     | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

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();