fix(components): [date-picker] getting month dates range error (#20932)

* 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 710c1cc3d6.

* refactor: set time separately

---------

Co-authored-by: 金亚平 <yaping.jin@jinlihk.com>
Co-authored-by: Dsaquel <291874700n@gmail.com>

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', () => {

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)
   })