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.
+
+### Min - Max Date
+
+You can set min date or max date for the datepicker.
+
+
+
## Reference
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(html`
- `);
- 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);
}
}