refactor(components): [date-picker] externalize formatToString (#22349)

* refactor(components): [date-picker] externalize formatToString

Co-authored-by: inottn <inottn@outlook.com>

* chore: add rebase lost code

---------

Co-authored-by: inottn <inottn@outlook.com>

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

@@ -680,12 +680,6 @@ const isValidValue = (date: unknown) => {
   )
 }
 
-const formatToString = (value: Dayjs | Dayjs[]) => {
-  return isArray(value)
-    ? value.map((_) => _.format(props.format))
-    : value.format(props.format)
-}
-
 const parseUserInput = (value: Dayjs) => {
   return correctlyParseUserInput(
     value,
@@ -873,7 +867,6 @@ watch(
 )
 
 contextEmit('set-picker-option', ['isValidValue', isValidValue])
-contextEmit('set-picker-option', ['formatToString', formatToString])
 contextEmit('set-picker-option', ['parseUserInput', parseUserInput])
 contextEmit('set-picker-option', ['handleFocusPicker', _handleFocusPicker])
 </script>

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

@@ -401,7 +401,6 @@
 import { computed, inject, nextTick, ref, toRef, unref, watch } from 'vue'
 import dayjs from 'dayjs'
 import { ClickOutside as vClickoutside } from '@element-plus/directives'
-import { isArray } from '@element-plus/utils'
 import { useLocale } from '@element-plus/hooks'
 import ElButton from '@element-plus/components/button'
 import ElInput from '@element-plus/components/input'
@@ -888,12 +887,6 @@ const handleClear = () => {
   emit('pick', valueOnClear)
 }
 
-const formatToString = (value: Dayjs | Dayjs[]) => {
-  return isArray(value)
-    ? value.map((_) => _.format(format.value))
-    : value.format(format.value)
-}
-
 const parseUserInput = (value: Dayjs | Dayjs[]) => {
   return correctlyParseUserInput(
     value,
@@ -926,6 +919,5 @@ function sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {
 
 emit('set-picker-option', ['isValidValue', isValidValue])
 emit('set-picker-option', ['parseUserInput', parseUserInput])
-emit('set-picker-option', ['formatToString', formatToString])
 emit('set-picker-option', ['handleClear', handleClear])
 </script>

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

@@ -119,7 +119,6 @@
 import { computed, inject, ref, toRef, unref, watch } 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 { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'
@@ -233,12 +232,6 @@ const handleClear = () => {
   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 correctlyParseUserInput(
     value,
@@ -270,7 +263,6 @@ watch(
 )
 
 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>

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

@@ -101,7 +101,6 @@
 <script lang="ts" setup>
 import { computed, inject, ref, toRef, unref, useSlots, watch } from 'vue'
 import dayjs from 'dayjs'
-import { isArray } from '@element-plus/utils'
 import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
 import ElIcon from '@element-plus/components/icon'
 import { useLocale } from '@element-plus/hooks'
@@ -246,12 +245,6 @@ const parseUserInput = (value: Dayjs | Dayjs[]) => {
   )
 }
 
-const formatToString = (value: Dayjs[] | Dayjs) => {
-  return isArray(value)
-    ? value.map((day) => day.format(format.value))
-    : value.format(format.value)
-}
-
 const isValidValue = (date: [Dayjs, Dayjs]) => {
   return (
     isValidRange(date) &&
@@ -297,6 +290,5 @@ watch(
 
 emit('set-picker-option', ['isValidValue', isValidValue])
 emit('set-picker-option', ['parseUserInput', parseUserInput])
-emit('set-picker-option', ['formatToString', formatToString])
 emit('set-picker-option', ['handleClear', handleClear])
 </script>

packages/components/time-picker/src/common/picker.vue

@@ -400,7 +400,7 @@ const handleClose = () => {
 }
 
 const displayValue = computed<UserInput>(() => {
-  const formattedValue = formatDayjsToString(parsedValue.value)
+  const formattedValue = formatToString(parsedValue.value)
   if (isArray(userInput.value)) {
     return [
       userInput.value[0] || (formattedValue && formattedValue[0]) || '',
@@ -541,14 +541,12 @@ const parseUserInputToDayjs = (value: UserInput) => {
   return pickerOptions.value.parseUserInput!(value)
 }
 
-const formatDayjsToString = (value: DayOrDays) => {
+const formatToString = (value: DayOrDays) => {
   if (!value) return null
-  if (!pickerOptions.value.formatToString) {
-    return isArray(value)
-      ? (value.map((_) => _.format(props.format)) as [string, string])
-      : value.format(props.format)
-  }
-  return pickerOptions.value.formatToString(value)
+  const res = isArray(value)
+    ? value.map((_) => _.format(props.format))
+    : value.format(props.format)
+  return res as UserInput
 }
 
 const isValidValue = (value: DayOrDays) => {
@@ -647,7 +645,7 @@ const handleStartChange = () => {
   const parsedVal = unref(parsedValue) as [Dayjs, Dayjs]
   if (value && value.isValid()) {
     userInput.value = [
-      formatDayjsToString(value) as string,
+      formatToString(value) as string,
       displayValue.value?.[1] || null,
     ]
     const newValue = [value, parsedVal && (parsedVal[1] || null)] as DayOrDays
@@ -665,7 +663,7 @@ const handleEndChange = () => {
   if (value && value.isValid()) {
     userInput.value = [
       unref(displayValue)?.[0] || null,
-      formatDayjsToString(value) as string,
+      formatToString(value) as string,
     ]
     const newValue = [parsedVal && parsedVal[0], value] as DayOrDays
     if (isValidValue(newValue)) {

packages/components/time-picker/src/common/props.ts

@@ -273,7 +273,6 @@ export interface PickerOptions {
   isValidValue: (date: DayOrDays) => boolean
   handleKeydownInput: (event: KeyboardEvent) => void
   parseUserInput: (value: UserInput) => DayOrDays
-  formatToString: (value: DayOrDays) => UserInput
   getRangeAvailableTime: (date: DayOrDays) => DayOrDays
   getDefaultValue: () => DayOrDays
   panelReady: boolean

packages/components/time-picker/src/time-picker-com/panel-time-pick.vue

@@ -178,17 +178,11 @@ const parseUserInput = (value: Dayjs) => {
   return dayjs(value, props.format).locale(lang.value)
 }
 
-const formatToString = (value: Dayjs) => {
-  if (!value) return null
-  return value.format(props.format)
-}
-
 const getDefaultValue = () => {
   return dayjs(defaultValue).locale(lang.value)
 }
 
 emit('set-picker-option', ['isValidValue', isValidValue])
-emit('set-picker-option', ['formatToString', formatToString])
 emit('set-picker-option', ['parseUserInput', parseUserInput])
 emit('set-picker-option', ['handleKeydownInput', handleKeydown])
 emit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime])

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

@@ -293,14 +293,6 @@ const parseUserInput = (days: Dayjs[] | Dayjs) => {
   return dayjs(days, props.format).locale(lang.value)
 }
 
-const formatToString = (days: Dayjs[] | Dayjs) => {
-  if (!days) return null
-  if (isArray(days)) {
-    return days.map((d) => d.format(props.format))
-  }
-  return days.format(props.format)
-}
-
 const getDefaultValue = () => {
   if (isArray(defaultValue)) {
     return defaultValue.map((d: Date) => dayjs(d).locale(lang.value))
@@ -309,7 +301,6 @@ const getDefaultValue = () => {
   return [defaultDay, defaultDay.add(60, 'm')]
 }
 
-emit('set-picker-option', ['formatToString', formatToString])
 emit('set-picker-option', ['parseUserInput', parseUserInput])
 emit('set-picker-option', ['isValidValue', isValidValue])
 emit('set-picker-option', ['handleKeydownInput', handleKeydown])