From 07eff9e2f892a6a5874b463b87728b72c117f46e Mon Sep 17 00:00:00 2001
From: jyp114110 <45327166+jyp114110@users.noreply.github.com>
Date: Mon, 9 Jun 2025 23:11:50 +0800
Subject: [PATCH] fix(components): [date-picker] getting month dates range
 error (#20932)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(components): [date-picker] fix "disabledDate" bug

fix #20931

BREAKING CHANGE: N

closed #20931

* fix(components): [date-picker]

Add test case for fixing #20931

BREAKING CHANGE: N

closed #20931

* fix(components): [date-picker]

[date-picker] getting month dates range error #20932

BREAKING CHANGE: n

closed #20932

* Revert "fix(components): [date-picker]"

This reverts commit 710c1cc3d60e1325d93146a91fb47d8dcdc5db19.

* refactor: set time separately

---------

Co-authored-by: 金亚平 <yaping.jin@jinlihk.com>
Co-authored-by: Dsaquel <291874700n@gmail.com>
---
 .../date-picker/__tests__/date-picker.test.ts | 30 +++++++++++++++++++
 packages/components/date-picker/src/utils.ts  | 18 +++++++++--
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index 031f8732ee..5b6ffcf8e9 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-picker.test.ts
@@ -1148,6 +1148,36 @@ describe('MonthPicker', () => {
       dayjs(new Date(2020, 0, 1)).format(valueFormat)
     )
   })
+  it('only the status of current month is enable when using disabledDate prop', async () => {
+    const CurrentMonth = Number(dayjs().format('M'))
+    const CurrentMonthForamt = dayjs().format('YYYY-MM')
+    const wrapper = _mount(
+      `<el-date-picker
+        type="month"
+        v-model="value"
+        :disabledDate="disabledDate"
+    />`,
+      () => ({
+        value: undefined,
+        disabledDate(time) {
+          return !(dayjs(time).format('YYYY-MM') === CurrentMonthForamt)
+        },
+      })
+    )
+    const input = wrapper.find('input')
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    const monthTds = Array.from(document.querySelectorAll('.el-month-table td'))
+    const currentMonthTd = monthTds[CurrentMonth - 1]
+    const otherMonthTds = monthTds.filter(
+      (td, index) => index !== CurrentMonth - 1
+    )
+    expect(currentMonthTd.classList.contains('disabled')).toBeFalsy()
+    expect(
+      otherMonthTds.every((td) => td.classList.contains('disabled'))
+    ).toBeTruthy()
+  })
 })
 
 describe('YearPicker', () => {
diff --git a/packages/components/date-picker/src/utils.ts b/packages/components/date-picker/src/utils.ts
index 3bf066eeac..9ff69bf72f 100644
--- a/packages/components/date-picker/src/utils.ts
+++ b/packages/components/date-picker/src/utils.ts
@@ -146,7 +146,15 @@ export const datesInMonth = (
   month: number,
   lang: string
 ) => {
-  const firstDay = dayjs(date).locale(lang).month(month).year(year)
+  const firstDay = dayjs()
+    .locale(lang)
+    .startOf('month')
+    .month(month)
+    .year(year)
+    .hour(date.hour())
+    .minute(date.minute())
+    .second(date.second())
+
   const numOfDays = firstDay.daysInMonth()
   return rangeArr(numOfDays).map((n) => firstDay.add(n, 'day').toDate())
 }
@@ -158,7 +166,13 @@ export const getValidDateOfMonth = (
   lang: string,
   disabledDate?: DisabledDateType
 ) => {
-  const _value = dayjs(date).year(year).month(month)
+  const _value = dayjs()
+    .year(year)
+    .month(month)
+    .startOf('month')
+    .hour(date.hour())
+    .minute(date.minute())
+    .second(date.second())
   const _date = datesInMonth(date, year, month, lang).find((date) => {
     return !disabledDate?.(date)
   })