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

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