diff --git a/packages/calendar/src/LionCalendar.js b/packages/calendar/src/LionCalendar.js index a5340a19e..b04270260 100644 --- a/packages/calendar/src/LionCalendar.js +++ b/packages/calendar/src/LionCalendar.js @@ -553,12 +553,21 @@ export class LionCalendar extends LocalizeMixin(LitElement) { __modifyDate(modify, { dateType, type, mode } = {}) { let tmpDate = new Date(this.centralDate); + // if we're not working with days, reset + // day count to first day of the month + if (type !== 'Date') { + tmpDate.setDate(1); + } tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify); - + // if we've reset the day count, + // restore day count as best we can + if (type !== 'Date') { + const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate(); + tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays)); + } if (!this.__isEnabledDate(tmpDate)) { tmpDate = this.__findBestEnabledDateFor(tmpDate, { mode }); } - this[dateType] = tmpDate; } diff --git a/packages/calendar/test/lion-calendar.test.js b/packages/calendar/test/lion-calendar.test.js index 061becc86..de2948c6d 100644 --- a/packages/calendar/test/lion-calendar.test.js +++ b/packages/calendar/test/lion-calendar.test.js @@ -546,6 +546,31 @@ describe('', () => { clock.restore(); }); + it('supports navigating from larger months to smaller ones (day counts)', async () => { + // given + const inputDate = new Date('2019/08/31'); + const element = await fixture(html` + + `); + // when + const remote = new CalendarObject(element); + remote.nextMonthButtonEl.click(); + await element.updateComplete; + // then + expect(remote.activeMonthAndYear).to.equal('September 2019'); + expect(remote.centralDayObj.el).dom.to.equal(` + + `); + }); + describe('Accessibility', () => { it('navigate buttons have a aria-label and title attribute with accessible label', async () => { const el = await fixture(html`