diff --git a/package-lock.json b/package-lock.json index 6fda7db4..88e8cca5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@reedsy/vuejs-datepicker", - "version": "1.6.2-reedsy-2.1.4", + "version": "1.6.2-reedsy-2.1.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@reedsy/vuejs-datepicker", - "version": "1.6.2-reedsy-2.1.4", + "version": "1.6.2-reedsy-2.1.6", "license": "MIT", "devDependencies": { "@babel/cli": "^7.24.6", diff --git a/package.json b/package.json index cf1507b3..a025e128 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reedsy/vuejs-datepicker", - "version": "1.6.2-reedsy-2.1.6", + "version": "1.6.2-reedsy-2.1.7", "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations", "keywords": [ "vue", diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 02b03ccd..c285394e 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -461,9 +461,12 @@ export default { */ setDate (timestamp) { const date = new Date(timestamp); + if (this.shouldChangePage(date)) { this.setPageDate(date); } + + this.focusedDate = timestamp; this.selectedDate = date; this.$emit('selected', date); this.$emit('update:modelValue', date); @@ -545,11 +548,14 @@ export default { const parsed = new Date(date); date = isNaN(parsed.valueOf()) ? null : parsed; } + if (!date) { this.setPageDate(); this.selectedDate = null; return; } + + this.focusedDate = date.getTime(); this.selectedDate = date; this.setPageDate(date); }, diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue index c69b6ebb..50df0695 100644 --- a/src/components/PickerDay.vue +++ b/src/components/PickerDay.vue @@ -337,6 +337,7 @@ export default { const monthsDifference = this.utils.getMonth(newDate) - this.utils.getMonth(this.pageDate); const yearsDifference = this.utils.getFullYear(newDate) - this.utils.getFullYear(this.pageDate); const shouldChangePage = monthsDifference !== 0 && (config.forceMonthChange || !(this.sideBySide && monthsDifference === 1)); + if (shouldChangePage) { this.changeMonth(monthsDifference + yearsDifference * 12); } @@ -393,6 +394,7 @@ export default { previousMonth () { if (!this.isPreviousMonthDisabled()) { const focusedDate = new Date(this.focusedDate); + focusedDate.setDate(1); // Ensure correct month changing this.utils.setMonth(focusedDate, this.utils.getMonth(focusedDate) - 1, this.useUtc); this.moveFocus(focusedDate, { focusCell: false, forceMonthChange: true }); } @@ -415,6 +417,7 @@ export default { nextMonth () { if (!this.isNextMonthDisabled()) { const focusedDate = new Date(this.focusedDate); + focusedDate.setDate(1); // Ensure correct month changing this.utils.setMonth(focusedDate, this.utils.getMonth(focusedDate) + 1, this.useUtc); this.moveFocus(focusedDate, { focusCell: false, forceMonthChange: true }); } diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js index 2ccbbae1..77259e64 100644 --- a/test/unit/specs/Datepicker/Datepicker.spec.js +++ b/test/unit/specs/Datepicker/Datepicker.spec.js @@ -53,6 +53,17 @@ describe('Datepicker mounted', () => { expect(pageDate.getDate()).toEqual(1); }); + it('correctly sets the focusedDate when setting the value from method', async () => { + const newDate = new Date(2016, 9, 15); + const newDateTs = newDate.getTime(); + await wrapper.setData({ + focusedDate: null, + }); + expect(wrapper.vm.focusedDate).toBeNull(); + wrapper.vm.setValue(newDate); + expect(wrapper.vm.focusedDate).toEqual(newDateTs); + }); + it('sets the date', () => { const date = new Date(2016, 9, 9); const wrapper = shallowMount(Datepicker, { @@ -64,6 +75,22 @@ describe('Datepicker mounted', () => { expect(wrapper.vm.selectedDate.getTime()).toEqual(date.getTime()); }); + it('sets the focusedDate when setting the date', async () => { + const date = new Date(2016, 9, 9); + const newDateTs = date.getTime(); + const wrapper = shallowMount(Datepicker, { + propsData: { + format: 'yyyy-MM-dd', + }, + }); + await wrapper.setData({ + focusedDate: null, + }); + expect(wrapper.vm.focusedDate).toBeNull(); + wrapper.vm.setDate(newDateTs); + expect(wrapper.vm.focusedDate).toEqual(newDateTs); + }); + it('changes the page date when selecting a date from a different month', () => { const initialDate = new Date(Date.UTC(2016, 8, 9)); const date = new Date(Date.UTC(2016, 9, 9)); diff --git a/test/unit/specs/PickerDay/changeMonths.spec.js b/test/unit/specs/PickerDay/changeMonths.spec.js index 09c5e96a..7e0d4331 100644 --- a/test/unit/specs/PickerDay/changeMonths.spec.js +++ b/test/unit/specs/PickerDay/changeMonths.spec.js @@ -28,16 +28,16 @@ describe('PickerDay: changing months', () => { expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(0); }); - it('changes the focused to the next month', () => { + it('changes the focused date to the next month and resets the day', () => { wrapper.vm.nextMonth(); expect(wrapper.emitted('update:focusedDate')).toBeTruthy(); - expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 2, 24).getTime() ]); + expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 2, 1).getTime() ]); }); - it('changes the focused to the next month', () => { + it('changes the focused date to the previous month and resets the day', () => { wrapper.vm.previousMonth(); expect(wrapper.emitted('update:focusedDate')).toBeTruthy(); - expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 0, 24).getTime() ]); + expect(wrapper.emitted('update:focusedDate')[0]).toEqual([ new Date(2018, 0, 1).getTime() ]); }); it('changes the month when the datepicker is side-by-side and the focus is on the first month', async () => {