From c0bd9ebcfc6e6fafabc7460dd4a0f2a693cb7f63 Mon Sep 17 00:00:00 2001
From: dilandoogan <147757889+dilandoogan@users.noreply.github.com>
Date: Thu, 9 Jan 2025 12:04:28 +0300
Subject: [PATCH] =?UTF-8?q?feat(datepicker):=20add=20request=20update=20fo?=
 =?UTF-8?q?r=20min=20and=20max=20date=20and=20adding=20=E2=80=A6=20(#986)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…storybook
---
 .../datepicker/bl-datepicker.stories.mdx       | 18 ++++++++++++++++++
 .../datepicker/bl-datepicker.test.ts           | 10 ----------
 .../datepicker-calendar-mixin.test.ts          |  8 ++++----
 .../datepicker-calendar-mixin.ts               | 14 ++++++++++++--
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/datepicker/bl-datepicker.stories.mdx b/src/components/datepicker/bl-datepicker.stories.mdx
index 126f18f3..272740db 100644
--- a/src/components/datepicker/bl-datepicker.stories.mdx
+++ b/src/components/datepicker/bl-datepicker.stories.mdx
@@ -134,6 +134,24 @@ You can set input width of datepicker as you wish.
   </Story>
 </Canvas>
 
+
+### Min - Max Date
+
+You can set min date or max date for the datepicker.
+
+<Canvas>
+  <Story name="Set min and max date"
+         args={{
+           type: 'single',
+           label: 'Set min and max date',
+           placeholder: 'Set min and max date',
+           minDate: `${new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 2)}`,
+           maxDate: `${new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)}`
+         }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 ## Reference
 
 <ArgsTable of="bl-datepicker" />
diff --git a/src/components/datepicker/bl-datepicker.test.ts b/src/components/datepicker/bl-datepicker.test.ts
index 136480e4..c194235c 100644
--- a/src/components/datepicker/bl-datepicker.test.ts
+++ b/src/components/datepicker/bl-datepicker.test.ts
@@ -284,16 +284,6 @@ describe("BlDatepicker", () => {
     expect(element.value).to.be.undefined;
   });
 
-  it("should warn when 'value' is not an array for multiple/range selection", async () => {
-    element = await fixture<BlDatePicker>(html`
-      <bl-datepicker type="multiple" locale="en"></bl-datepicker>`);
-    element.value = new Date();
-
-    element.firstUpdated();
-
-    expect(consoleWarnSpy.calledOnce).to.be.true;
-  });
-
   it("should not warn when value is an array for multiple/range selection", () => {
     element.type = CALENDAR_TYPES.MULTIPLE;
     element.value = [new Date(), new Date()];
diff --git a/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.test.ts b/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.test.ts
index 71364cc1..3f68a241 100644
--- a/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.test.ts
+++ b/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.test.ts
@@ -40,10 +40,10 @@ describe("DatepickerCalendarMixin", () => {
   });
 
   it("should set and get minDate correctly", () => {
-    const minDate = new Date("2024-01-01");
+    const minDate = new Date(2024,1,1);
 
     element.minDate = minDate;
-    expect(element.minDate).to.equal(minDate);
+    expect(element.minDate.getTime()).to.equal(minDate.getTime());
   });
 
   it("should log a warning if minDate is greater than maxDate", () => {
@@ -56,10 +56,10 @@ describe("DatepickerCalendarMixin", () => {
   });
 
   it("should set and get maxDate correctly", () => {
-    const maxDate = new Date("2024-12-31");
+    const maxDate = new Date(2024,12,31);
 
     element.maxDate = maxDate;
-    expect(element.maxDate).to.equal(maxDate);
+    expect(element.maxDate.getTime()).to.equal(maxDate.getTime());
   });
 
   it("should log a warning if maxDate is smaller than minDate", () => {
diff --git a/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts b/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts
index f7dc5e1b..6defd4ac 100644
--- a/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts
+++ b/src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts
@@ -64,10 +64,15 @@ export default class DatepickerCalendarMixin extends LitElement {
 
   @property({ type: Date, attribute: "max-date", reflect: true })
   set maxDate(maxDate: Date) {
+    if (isNaN(new Date(maxDate).getTime())) {
+      console.warn("Invalid maxDate value.");
+      return;
+    }
     if (this._minDate && this._minDate >= maxDate) {
       console.warn("maxDate cannot be smaller than minDate.");
     } else {
-      this._maxDate = maxDate;
+      this._maxDate = new Date(maxDate);
+      this.requestUpdate("maxDate", maxDate);
     }
   }
 
@@ -82,10 +87,15 @@ export default class DatepickerCalendarMixin extends LitElement {
 
   @property({ type: Date, attribute: "min-date", reflect: true })
   set minDate(minDate: Date) {
+    if (isNaN(new Date(minDate).getTime())) {
+      console.warn("Invalid minDate value.");
+      return;
+    }
     if (this._maxDate && this._maxDate <= minDate) {
       console.warn("minDate cannot be greater than maxDate.");
     } else {
-      this._minDate = minDate;
+      this._minDate = new Date(minDate);
+      this.requestUpdate("minDate", minDate);
     }
   }