feat(datepicker): add request update for min and max date and adding … (

#986)

…storybook

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" />

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

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", () => {

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