From 76b0ab0a5d73cec58cc0f9704f4c4fdf738c2349 Mon Sep 17 00:00:00 2001
From: Masanori Doizaki <doizaki.masanori@gmail.com>
Date: Sat, 3 Aug 2024 22:39:42 +0900
Subject: [PATCH] fix(components): [date-picker] fix user input error in
 monthrange (#12943)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(components): [date-picker] monthrange类型选择器在输入结束后报错

* fix: the format change

---------

Co-authored-by: qiang <qw13131wang@gmail.com>
---
 .../date-picker/__tests__/date-picker.test.ts | 20 +++++++++++++
 .../src/date-picker-com/panel-month-range.vue | 29 +++++++++++++++++--
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index e9e5a6cc92..616de64ad3 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-picker.test.ts
@@ -1569,6 +1569,26 @@ describe('MonthRange', () => {
     ).toEqual(ElPopperOptions)
   })
 
+  it('user input', async () => {
+    const wrapper = _mount(
+      `<el-date-picker
+      type='monthrange'
+      v-model="value"
+      valueFormat="YYYY-MM"
+    />`,
+      () => ({ value: ['2022-01', '2022-02'] })
+    )
+
+    const [startInput, endInput] = wrapper.findAll('input')
+    await startInput.setValue('2015-01')
+    await endInput.setValue('2017-01')
+    await nextTick()
+
+    const vm = wrapper.vm
+    expect(vm.value[0]).toBe('2015-01')
+    expect(vm.value[1]).toBe('2017-01')
+  })
+
   describe('form item accessibility integration', () => {
     it('automatic id attachment', async () => {
       const wrapper = _mount(
diff --git a/packages/components/date-picker/src/date-picker-com/panel-month-range.vue b/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
index 972f6c766a..671ff05ba2 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
@@ -99,11 +99,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, toRef } from 'vue'
+import { computed, inject, ref, toRef, unref } from 'vue'
 import dayjs from 'dayjs'
 import ElIcon from '@element-plus/components/icon'
+import { isArray } from '@element-plus/utils'
 import { useLocale } from '@element-plus/hooks'
 import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
+import { getDefaultValue, isValidRange } from '../utils'
 import {
   panelMonthRangeEmits,
   panelMonthRangeProps,
@@ -193,8 +195,26 @@ const handleRangePick = (val: RangePickValue, close = true) => {
   handleRangeConfirm()
 }
 
-const formatToString = (days: Dayjs[]) => {
-  return days.map((day) => day.format(format.value))
+const handleClear = () => {
+  leftDate.value = getDefaultValue(unref(defaultValue), {
+    lang: unref(lang),
+    unit: 'year',
+    unlinkPanels: props.unlinkPanels,
+  })[0]
+  rightDate.value = leftDate.value.add(1, 'year')
+  emit('pick', null)
+}
+
+const formatToString = (value: Dayjs | Dayjs[]) => {
+  return isArray(value)
+    ? value.map((_) => _.format(format.value))
+    : value.format(format.value)
+}
+
+const parseUserInput = (value: Dayjs | Dayjs[]) => {
+  return isArray(value)
+    ? value.map((_) => dayjs(_, format.value).locale(lang.value))
+    : dayjs(value, format.value).locale(lang.value)
 }
 
 function onParsedValueChanged(
@@ -211,5 +231,8 @@ function onParsedValueChanged(
   }
 }
 
+emit('set-picker-option', ['isValidValue', isValidRange])
 emit('set-picker-option', ['formatToString', formatToString])
+emit('set-picker-option', ['parseUserInput', parseUserInput])
+emit('set-picker-option', ['handleClear', handleClear])
 </script>