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

fix: DatePicker: fix showOtherMonths behavior so it doesn't show oth…
primefaces · Sep 10, 2024 · ba744ca · ba744ca
2 parents 466b410 + 87c1ba4
commit ba744ca
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/packages/primevue/src/datepicker/DatePicker.spec.js b/packages/primevue/src/datepicker/DatePicker.spec.js
@@ -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);
+    });
 });
diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
@@ -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();