Merge pull request #6324 from avramz/fix/date-picker-show-other-months

fix: DatePicker: fix showOtherMonths behavior so it doesn't show oth…
pull/6372/head
Tuğçe Küçükoğlu 2024-09-10 11:35:12 +03:00 committed by GitHub
commit ba744ca571
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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').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')">
<slot name="header"></slot>
<Button
v-show="showOtherMonths ? groupIndex === 0 : false"
v-show="groupIndex === 0"
:ref="previousButtonRef"
:class="cx('pcPrevButton')"
:disabled="disabled"
@ -158,7 +158,7 @@
</span>
</div>
<Button
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
v-show="numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1"
:ref="nextButtonRef"
:class="cx('pcNextButton')"
:disabled="disabled"
@ -223,6 +223,7 @@
data-pc-group-section="tablebodycell"
>
<span
v-if="showOtherMonths || !date.otherMonth"
v-ripple
:class="cx('day', { date })"
@click="onDateSelect($event, date)"
@ -906,16 +907,12 @@ export default {
this.overlay = null;
},
onPrevButtonClick(event) {
if (this.showOtherMonths) {
this.navigationState = { backward: true, button: true };
this.navBackward(event);
}
this.navigationState = { backward: true, button: true };
this.navBackward(event);
},
onNextButtonClick(event) {
if (this.showOtherMonths) {
this.navigationState = { backward: false, button: true };
this.navForward(event);
}
this.navigationState = { backward: false, button: true };
this.navForward(event);
},
navBackward(event) {
event.preventDefault();