fix(components): [date-picker] support dynamic setting of format (#17161)

* fix(components): [date-picker]

change format will not update component

closed #17149

* test(components): [date-picker]

Add a test case for supproting dynamic format

* test(components): [date-picker]

correct test case

---------

Co-authored-by: 张东 <A80784@internet.com>
Co-authored-by: zhangdong <a80369@gree.com.cn>

packages/components/date-picker/__tests__/date-picker.test.ts

@@ -1633,4 +1633,34 @@ describe('MonthRange', () => {
     expect(vm.value.getDate()).toBe(1)
     expect(vm.value.getHours()).toBe(12)
   })
+  it('format allows dynamic changes', async () => {
+    const format = 'YYYY/MM/DD HH:mm:ss'
+    const wrapper = _mount(
+      `<el-date-picker
+          v-model="value"
+          type="datetimerange"
+          :format="format"
+        />
+        <button @click="changeFormat">click</button>`,
+      () => ({
+        value: ['2024/06/14', '2024/06/15'],
+        format,
+      }),
+      {
+        methods: {
+          changeFormat() {
+            this.format = 'YYYY-MM-DD'
+          },
+        },
+      }
+    )
+    await nextTick()
+    const inputRange = wrapper.findAll('.el-range-input')
+    expect(inputRange[0].element.value).toBe('2024/06/14 00:00:00')
+    expect(inputRange[1].element.value).toBe('2024/06/15 00:00:00')
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(inputRange[0].element.value).toBe('2024-06-14')
+    expect(inputRange[1].element.value).toBe('2024-06-15')
+  })
 })

packages/components/date-picker/src/date-picker-com/panel-date-range.vue

@@ -293,8 +293,8 @@ const emit = defineEmits([
 const unit = 'month'
 // FIXME: fix the type for ep picker
 const pickerBase = inject('EP_PICKER_BASE') as any
-const { disabledDate, cellClassName, format, defaultTime, clearable } =
-  pickerBase.props
+const { disabledDate, cellClassName, defaultTime, clearable } = pickerBase.props
+const format = toRef(pickerBase.props, 'format')
 const shortcuts = toRef(pickerBase.props, 'shortcuts')
 const defaultValue = toRef(pickerBase.props, 'defaultValue')
 const { lang } = useLocale()
@@ -388,11 +388,11 @@ const maxVisibleTime = computed(() => {
 })
 
 const timeFormat = computed(() => {
-  return props.timeFormat || extractTimeFormat(format)
+  return props.timeFormat || extractTimeFormat(format.value)
 })
 
 const dateFormat = computed(() => {
-  return props.dateFormat || extractDateFormat(format)
+  return props.dateFormat || extractDateFormat(format.value)
 })
 
 const isValidValue = (date: [Dayjs, Dayjs]) => {
@@ -686,14 +686,14 @@ const handleClear = () => {
 
 const formatToString = (value: Dayjs | Dayjs[]) => {
   return isArray(value)
-    ? value.map((_) => _.format(format))
-    : value.format(format)
+    ? value.map((_) => _.format(format.value))
+    : value.format(format.value)
 }
 
 const parseUserInput = (value: Dayjs | Dayjs[]) => {
   return isArray(value)
-    ? value.map((_) => dayjs(_, format).locale(lang.value))
-    : dayjs(value, format).locale(lang.value)
+    ? value.map((_) => dayjs(_, format.value).locale(lang.value))
+    : dayjs(value, format.value).locale(lang.value)
 }
 
 function onParsedValueChanged(

packages/components/date-picker/src/date-picker-com/panel-month-range.vue

@@ -124,7 +124,8 @@ const unit = 'year'
 
 const { lang } = useLocale()
 const pickerBase = inject('EP_PICKER_BASE') as any
-const { shortcuts, disabledDate, format } = pickerBase.props
+const { shortcuts, disabledDate } = pickerBase.props
+const format = toRef(pickerBase.props, 'format')
 const defaultValue = toRef(pickerBase.props, 'defaultValue')
 const leftDate = ref(dayjs().locale(lang.value))
 const rightDate = ref(dayjs().locale(lang.value).add(1, unit))
@@ -193,7 +194,7 @@ const handleRangePick = (val: RangePickValue, close = true) => {
 }
 
 const formatToString = (days: Dayjs[]) => {
-  return days.map((day) => day.format(format))
+  return days.map((day) => day.format(format.value))
 }
 
 function onParsedValueChanged(