fix: DatePicker: fix showOtherMonths behaviour so it doesn't show other month's dates (instead of prev/next)

fixes #6307
pull/6324/head
uros 2024-09-02 14:53:32 +02:00
parent dcd66c1515
commit 87c1ba43c1
2 changed files with 29 additions and 10 deletions

View File

@ -76,4 +76,26 @@ describe('DatePicker.vue', () => {
expect(wrapper.find('.p-datepicker-decade').exists()).toBe(true); expect(wrapper.find('.p-datepicker-decade').exists()).toBe(true);
expect(wrapper.find('.p-datepicker-decade').text()).toBe('1980 - 1989'); expect(wrapper.find('.p-datepicker-decade').text()).toBe('1980 - 1989');
}); });
it('should not show other months when showOtherMonths is false', async () => {
const dateOne = new Date();
dateOne.setFullYear(1988, 5, 15);
await wrapper.setProps({ modelValue: dateOne, showOtherMonths: false });
const input = wrapper.find('.p-datepicker-input');
await input.trigger('focus');
expect(wrapper.find('.p-datepicker-other-month span').exists()).toBe(false);
await input.trigger('blur');
await wrapper.setProps({ showOtherMonths: true });
await input.trigger('focus');
expect(wrapper.find('.p-datepicker-other-month span').exists()).toBe(true);
});
}); });

View File

@ -78,7 +78,7 @@
<div :class="cx('header')" v-bind="ptm('header')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot> <slot name="header"></slot>
<Button <Button
v-show="showOtherMonths ? groupIndex === 0 : false" v-show="groupIndex === 0"
:ref="previousButtonRef" :ref="previousButtonRef"
:class="cx('pcPrevButton')" :class="cx('pcPrevButton')"
:disabled="disabled" :disabled="disabled"
@ -158,7 +158,7 @@
</span> </span>
</div> </div>
<Button <Button
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false" v-show="numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1"
:ref="nextButtonRef" :ref="nextButtonRef"
:class="cx('pcNextButton')" :class="cx('pcNextButton')"
:disabled="disabled" :disabled="disabled"
@ -223,6 +223,7 @@
data-pc-group-section="tablebodycell" data-pc-group-section="tablebodycell"
> >
<span <span
v-if="showOtherMonths || !date.otherMonth"
v-ripple v-ripple
:class="cx('day', { date })" :class="cx('day', { date })"
@click="onDateSelect($event, date)" @click="onDateSelect($event, date)"
@ -906,16 +907,12 @@ export default {
this.overlay = null; this.overlay = null;
}, },
onPrevButtonClick(event) { onPrevButtonClick(event) {
if (this.showOtherMonths) { this.navigationState = { backward: true, button: true };
this.navigationState = { backward: true, button: true }; this.navBackward(event);
this.navBackward(event);
}
}, },
onNextButtonClick(event) { onNextButtonClick(event) {
if (this.showOtherMonths) { this.navigationState = { backward: false, button: true };
this.navigationState = { backward: false, button: true }; this.navForward(event);
this.navForward(event);
}
}, },
navBackward(event) { navBackward(event) {
event.preventDefault(); event.preventDefault();