From 2a6b90b4f87a4269afbd183dd367c0bfb27c4266 Mon Sep 17 00:00:00 2001
From: inottn <inottn@outlook.com>
Date: Thu, 18 Jul 2024 21:56:29 +0800
Subject: [PATCH] fix(Calendar): disable the previous month button correctly
when the minDate is the current time (#13006)
---
packages/vant/src/calendar/CalendarHeader.tsx | 9 ++++----
.../src/calendar/test/switch-mode.spec.ts | 23 +++++++++++++++++++
2 files changed, 28 insertions(+), 4 deletions(-)
diff --git a/packages/vant/src/calendar/CalendarHeader.tsx b/packages/vant/src/calendar/CalendarHeader.tsx
index 7f5363986..6adae946f 100644
--- a/packages/vant/src/calendar/CalendarHeader.tsx
+++ b/packages/vant/src/calendar/CalendarHeader.tsx
@@ -5,6 +5,7 @@ import { createNamespace, HAPTICS_FEEDBACK, makeStringProp } from '../utils';
import {
t,
bem,
+ compareMonth,
getPrevMonth,
getPrevYear,
getNextMonth,
@@ -39,22 +40,22 @@ export default defineComponent({
setup(props, { slots, emit }) {
const prevMonthDisabled = computed(() => {
const prevMonth = getPrevMonth(props.date!);
- return props.minDate && prevMonth < props.minDate;
+ return props.minDate && compareMonth(prevMonth, props.minDate) < 0;
});
const prevYearDisabled = computed(() => {
const prevYear = getPrevYear(props.date!);
- return props.minDate && prevYear < props.minDate;
+ return props.minDate && compareMonth(prevYear, props.minDate) < 0;
});
const nextMonthDisabled = computed(() => {
const nextMonth = getNextMonth(props.date!);
- return props.maxDate && nextMonth > props.maxDate;
+ return props.maxDate && compareMonth(nextMonth, props.maxDate) > 0;
});
const nextYearDisabled = computed(() => {
const nextYear = getNextYear(props.date!);
- return props.maxDate && nextYear > props.maxDate;
+ return props.maxDate && compareMonth(nextYear, props.maxDate) > 0;
});
const renderTitle = () => {
diff --git a/packages/vant/src/calendar/test/switch-mode.spec.ts b/packages/vant/src/calendar/test/switch-mode.spec.ts
index a3267971a..8241e1b30 100644
--- a/packages/vant/src/calendar/test/switch-mode.spec.ts
+++ b/packages/vant/src/calendar/test/switch-mode.spec.ts
@@ -62,6 +62,29 @@ test('disable previous and next month buttons', async () => {
expect(nextMonth.classes()).not.toContain(disabledActionClass);
});
+test('disable the previous month button correctly when the minDate is the current time', async () => {
+ const wrapper = mount(Calendar, {
+ props: {
+ minDate: new Date(),
+ poppable: false,
+ switchMode: 'month',
+ },
+ });
+
+ await later();
+ const [prevMonth, nextMonth] = wrapper.findAll(
+ '.van-calendar__header-action',
+ );
+
+ expect(prevMonth.classes()).toContain(disabledActionClass);
+
+ await nextMonth.trigger('click');
+ expect(prevMonth.classes()).not.toContain(disabledActionClass);
+
+ await prevMonth.trigger('click');
+ expect(prevMonth.classes()).toContain(disabledActionClass);
+});
+
test('disable previous and next year buttons', async () => {
const maxDate = getNextYear(minDate);
const wrapper = mount(Calendar, {