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. + + + + {Template.bind({})} + + + ## 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); } }