feat: support valueFormat

components/date-picker/date-fns.tsx

@@ -0,0 +1,35 @@
+import type { App } from 'vue';
+import dataFnsGenerateConfig from '../vc-picker/generate/dataFns';
+import type {
+  PickerProps,
+  PickerDateProps,
+  RangePickerProps as BaseRangePickerProps,
+} from './generatePicker';
+import generatePicker from './generatePicker';
+import { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
+
+export type DatePickerProps = PickerProps<Date> & ExtraDatePickerProps<Date>;
+export type MonthPickerProps = Omit<PickerDateProps<Date>, 'picker'> & ExtraDatePickerProps<Date>;
+export type WeekPickerProps = Omit<PickerDateProps<Date>, 'picker'> & ExtraDatePickerProps<Date>;
+export type RangePickerProps = BaseRangePickerProps<Date> & ExtraRangePickerProps<Date>;
+
+const DatePicker = generatePicker<Date>(dataFnsGenerateConfig);
+
+const RangePicker = DatePicker.RangePicker;
+const MonthPicker = DatePicker.MonthPicker;
+const WeekPicker = DatePicker.WeekPicker;
+const QuarterPicker = DatePicker.QuarterPicker;
+
+/* istanbul ignore next */
+DatePicker.install = function (app: App) {
+  app.component(DatePicker.name, DatePicker);
+  app.component(RangePicker.name, RangePicker);
+  app.component(MonthPicker.name, MonthPicker);
+  app.component(WeekPicker.name, WeekPicker);
+  app.component(QuarterPicker.name, QuarterPicker);
+  return app;
+};
+
+export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
+
+export default DatePicker as typeof DatePicker & Plugin;

components/date-picker/dayjs.tsx

@@ -0,0 +1,36 @@
+import type { Dayjs } from 'dayjs';
+import type { App } from 'vue';
+import dayjsGenerateConfig from '../vc-picker/generate/dayjs';
+import type {
+  PickerProps,
+  PickerDateProps,
+  RangePickerProps as BaseRangePickerProps,
+} from './generatePicker';
+import generatePicker from './generatePicker';
+import { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
+
+export type DatePickerProps = PickerProps<Dayjs> & ExtraDatePickerProps<Dayjs>;
+export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'> & ExtraDatePickerProps<Dayjs>;
+export type WeekPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'> & ExtraDatePickerProps<Dayjs>;
+export type RangePickerProps = BaseRangePickerProps<Dayjs> & ExtraRangePickerProps<Dayjs>;
+
+const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
+
+const RangePicker = DatePicker.RangePicker;
+const MonthPicker = DatePicker.MonthPicker;
+const WeekPicker = DatePicker.WeekPicker;
+const QuarterPicker = DatePicker.QuarterPicker;
+
+/* istanbul ignore next */
+DatePicker.install = function (app: App) {
+  app.component(DatePicker.name, DatePicker);
+  app.component(RangePicker.name, RangePicker);
+  app.component(MonthPicker.name, MonthPicker);
+  app.component(WeekPicker.name, WeekPicker);
+  app.component(QuarterPicker.name, QuarterPicker);
+  return app;
+};
+
+export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
+
+export default DatePicker as typeof DatePicker & Plugin;

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -9,160 +9,203 @@ import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
 import { getRangePlaceholder } from '../util';
 import type { RangePickerProps } from '.';
 import { getTimeProps, Components } from '.';
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
-import { commonProps, rangePickerProps } from './props';
+import { commonProps, ExtraRangePickerProps, rangePickerProps } from './props';
 import { PanelMode, RangeValue } from '../../vc-picker/interface';
 import { RangePickerSharedProps } from '../../vc-picker/RangePicker';
 import devWarning from '../../vc-util/devWarning';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
-  const RangePicker = defineComponent<RangePickerProps<DateType>>({
+  const RangePicker = defineComponent<RangePickerProps<DateType> & ExtraRangePickerProps<DateType>>(
-    name: 'ARangePicker',
+    {
-    inheritAttrs: false,
+      name: 'ARangePicker',
-    props: {
+      inheritAttrs: false,
-      ...commonProps<DateType>(),
+      props: {
-      ...rangePickerProps<DateType>(),
+        ...commonProps<DateType>(),
-    } as any,
+        ...rangePickerProps<DateType>(),
-    slots: [
+      } as any,
-      'suffixIcon',
+      slots: [
-      // 'clearIcon',
+        'suffixIcon',
-      // 'prevIcon',
+        // 'clearIcon',
-      // 'nextIcon',
+        // 'prevIcon',
-      // 'superPrevIcon',
+        // 'nextIcon',
-      // 'superNextIcon',
+        // 'superPrevIcon',
-      // 'panelRender',
+        // 'superNextIcon',
-      'dateRender',
+        // 'panelRender',
-      'renderExtraFooter',
+        'dateRender',
-      // 'separator',
+        'renderExtraFooter',
-    ],
+        // 'separator',
-    emits: [
+      ],
-      'change',
+      emits: [
-      'panelChange',
+        'change',
-      'ok',
+        'panelChange',
-      'openChange',
+        'ok',
-      'update:value',
+        'openChange',
-      'calendarChange',
+        'update:value',
-      'focus',
+        'calendarChange',
-      'blur',
+        'focus',
-    ],
+        'blur',
-    setup(props, { expose, slots, attrs, emit }) {
+      ],
-      devWarning(
+      setup(props, { expose, slots, attrs, emit }) {
-        !(attrs as any).getCalendarContainer,
+        devWarning(
-        'DatePicker',
+          !(attrs as any).getCalendarContainer,
-        '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
+          'DatePicker',
-      );
+          '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
-      const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
-        'picker',
-        props,
-      );
-      const pickerRef = ref();
-      expose({
-        focus: () => {
-          pickerRef.value?.focus();
-        },
-        blur: () => {
-          pickerRef.value?.blur();
-        },
-      });
-      const onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => {
-        emit('update:value', dates);
-        emit('change', dates, dateStrings);
-      };
-      const onOpenChange = (open: boolean) => {
-        emit('openChange', open);
-      };
-      const onFoucs = () => {
-        emit('focus');
-      };
-      const onBlur = () => {
-        emit('blur');
-      };
-      const onPanelChange = (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
-        emit('panelChange', values, modes);
-      };
-      const onOk = (value: DateType) => {
-        emit('ok', value);
-      };
-      const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (...args) => {
-        emit('calendarChange', ...args);
-      };
-      const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
-      return () => {
-        const locale = { ...contextLocale.value, ...props.locale };
-        const p = { ...props, ...attrs } as RangePickerProps<DateType>;
-        const {
-          prefixCls: customizePrefixCls,
-          bordered = true,
-          placeholder,
-          suffixIcon = slots.suffixIcon?.(),
-          picker = 'date',
-          transitionName,
-          allowClear = true,
-          dateRender = slots.dateRender,
-          renderExtraFooter = slots.renderExtraFooter,
-          ...restProps
-        } = p;
-        const { format, showTime } = p as any;
-
-        let additionalOverrideProps: any = {};
-
-        additionalOverrideProps = {
-          ...additionalOverrideProps,
-          ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
-          ...(picker === 'time' ? getTimeProps({ format, ...p, picker }) : {}),
-        };
-        const pre = prefixCls.value;
-        return (
-          <VCRangePicker
-            dateRender={dateRender}
-            renderExtraFooter={renderExtraFooter}
-            separator={
-              <span aria-label="to" class={`${pre}-separator`}>
-                <SwapRightOutlined />
-              </span>
-            }
-            ref={pickerRef}
-            placeholder={getRangePlaceholder(picker, locale, placeholder)}
-            suffixIcon={
-              suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
-            }
-            clearIcon={<CloseCircleFilled />}
-            allowClear={allowClear}
-            transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
-            {...restProps}
-            {...additionalOverrideProps}
-            picker={picker}
-            class={classNames(
-              {
-                [`${pre}-${size.value}`]: size.value,
-                [`${pre}-borderless`]: !bordered,
-              },
-              attrs.class,
-            )}
-            locale={locale!.lang}
-            prefixCls={pre}
-            getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
-            generateConfig={generateConfig}
-            prevIcon={<span class={`${pre}-prev-icon`} />}
-            nextIcon={<span class={`${pre}-next-icon`} />}
-            superPrevIcon={<span class={`${pre}-super-prev-icon`} />}
-            superNextIcon={<span class={`${pre}-super-next-icon`} />}
-            components={Components}
-            direction={direction.value}
-            onChange={onChange}
-            onOpenChange={onOpenChange}
-            onFocus={onFoucs}
-            onBlur={onBlur}
-            onPanelChange={onPanelChange}
-            onOk={onOk}
-            onCalendarChange={onCalendarChange}
-          />
         );
-      };
+        const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
+          'picker',
+          props,
+        );
+        const pickerRef = ref();
+        expose({
+          focus: () => {
+            pickerRef.value?.focus();
+          },
+          blur: () => {
+            pickerRef.value?.blur();
+          },
+        });
+        const onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => {
+          const values = props.valueFormat
+            ? generateConfig.toString(dates, props.valueFormat)
+            : dates;
+          emit('update:value', values);
+          emit('change', values, dateStrings);
+        };
+        const onOpenChange = (open: boolean) => {
+          emit('openChange', open);
+        };
+        const onFoucs = () => {
+          emit('focus');
+        };
+        const onBlur = () => {
+          emit('blur');
+        };
+        const onPanelChange = (dates: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
+          const values = props.valueFormat
+            ? generateConfig.toString(dates, props.valueFormat)
+            : dates;
+          emit('panelChange', values, modes);
+        };
+        const onOk = (value: DateType) => {
+          emit('ok', value);
+        };
+        const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
+          dates: [DateType, DateType],
+          dateStrings: [string, string],
+          info,
+        ) => {
+          const values = props.valueFormat
+            ? generateConfig.toString(dates, props.valueFormat)
+            : dates;
+          emit('calendarChange', values, dateStrings, info);
+        };
+        const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
+
+        const value = computed(() => {
+          if (props.value) {
+            return props.valueFormat
+              ? generateConfig.toDate(props.value, props.valueFormat)
+              : props.value;
+          }
+          return props.value;
+        });
+        const defaultValue = computed(() => {
+          if (props.defaultValue) {
+            return props.valueFormat
+              ? generateConfig.toDate(props.defaultValue, props.valueFormat)
+              : props.defaultValue;
+          }
+          return props.defaultValue;
+        });
+        const defaultPickerValue = computed(() => {
+          if (props.defaultPickerValue) {
+            return props.valueFormat
+              ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat)
+              : props.defaultPickerValue;
+          }
+          return props.defaultPickerValue;
+        });
+        return () => {
+          const locale = { ...contextLocale.value, ...props.locale };
+          const p = { ...props, ...attrs } as RangePickerProps<DateType>;
+          const {
+            prefixCls: customizePrefixCls,
+            bordered = true,
+            placeholder,
+            suffixIcon = slots.suffixIcon?.(),
+            picker = 'date',
+            transitionName,
+            allowClear = true,
+            dateRender = slots.dateRender,
+            renderExtraFooter = slots.renderExtraFooter,
+            ...restProps
+          } = p;
+          const { format, showTime } = p as any;
+
+          let additionalOverrideProps: any = {};
+
+          additionalOverrideProps = {
+            ...additionalOverrideProps,
+            ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
+            ...(picker === 'time' ? getTimeProps({ format, ...p, picker }) : {}),
+          };
+          const pre = prefixCls.value;
+          return (
+            <VCRangePicker
+              dateRender={dateRender}
+              renderExtraFooter={renderExtraFooter}
+              separator={
+                <span aria-label="to" class={`${pre}-separator`}>
+                  <SwapRightOutlined />
+                </span>
+              }
+              ref={pickerRef}
+              placeholder={getRangePlaceholder(picker, locale, placeholder)}
+              suffixIcon={
+                suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
+              }
+              clearIcon={<CloseCircleFilled />}
+              allowClear={allowClear}
+              transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
+              {...restProps}
+              {...additionalOverrideProps}
+              value={value.value}
+              defaultValue={defaultValue.value}
+              defaultPickerValue={defaultPickerValue.value}
+              picker={picker}
+              class={classNames(
+                {
+                  [`${pre}-${size.value}`]: size.value,
+                  [`${pre}-borderless`]: !bordered,
+                },
+                attrs.class,
+              )}
+              locale={locale!.lang}
+              prefixCls={pre}
+              getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
+              generateConfig={generateConfig}
+              prevIcon={<span class={`${pre}-prev-icon`} />}
+              nextIcon={<span class={`${pre}-next-icon`} />}
+              superPrevIcon={<span class={`${pre}-super-prev-icon`} />}
+              superNextIcon={<span class={`${pre}-super-next-icon`} />}
+              components={Components}
+              direction={direction.value}
+              onChange={onChange}
+              onOpenChange={onOpenChange}
+              onFocus={onFoucs}
+              onBlur={onBlur}
+              onPanelChange={onPanelChange}
+              onOk={onOk}
+              onCalendarChange={onCalendarChange}
+            />
+          );
+        };
+      },
     },
-  });
+  );
 
   return RangePicker;
 }

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -9,14 +9,14 @@ import { getPlaceholder } from '../util';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
 import type { PickerProps, PickerDateProps, PickerTimeProps } from '.';
 import { getTimeProps, Components } from '.';
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
-import { commonProps, datePickerProps } from './props';
+import { commonProps, datePickerProps, ExtraDatePickerProps } from './props';
 import devWarning from '../../vc-util/devWarning';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
-  type DatePickerProps = PickerProps<DateType>;
+  type DatePickerProps = PickerProps<DateType> & ExtraDatePickerProps<DateType>;
 
   function getPicker<InnerPickerProps extends DatePickerProps>(
     picker?: PickerMode,
@@ -68,8 +68,9 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           },
         });
         const onChange = (date: DateType, dateString: string) => {
-          emit('update:value', date);
+          const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
-          emit('change', date, dateString);
+          emit('update:value', value);
+          emit('change', value, dateString);
         };
         const onOpenChange = (open: boolean) => {
           emit('openChange', open);
@@ -80,7 +81,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const onBlur = () => {
           emit('blur');
         };
-        const onPanelChange = (value: DateType, mode: PanelMode | null) => {
+        const onPanelChange = (date: DateType, mode: PanelMode | null) => {
+          const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
           emit('panelChange', value, mode);
         };
         const onOk = (value: DateType) => {
@@ -88,6 +90,32 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         };
 
         const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
+
+        const value = computed(() => {
+          if (props.value) {
+            return props.valueFormat
+              ? generateConfig.toDate(props.value, props.valueFormat)
+              : props.value;
+          }
+          return props.value;
+        });
+        const defaultValue = computed(() => {
+          if (props.defaultValue) {
+            return props.valueFormat
+              ? generateConfig.toDate(props.defaultValue, props.valueFormat)
+              : props.defaultValue;
+          }
+          return props.defaultValue;
+        });
+        const defaultPickerValue = computed(() => {
+          if (props.defaultPickerValue) {
+            return props.valueFormat
+              ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat)
+              : props.defaultPickerValue;
+          }
+          return props.defaultPickerValue;
+        });
+
         return () => {
           const locale = { ...contextLocale.value, ...props.locale };
           const p = { ...props, ...attrs } as InnerPickerProps;
@@ -144,6 +172,9 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
               {...restProps}
               {...additionalOverrideProps}
+              value={value.value}
+              defaultValue={defaultValue.value}
+              defaultPickerValue={defaultPickerValue.value}
               showToday={showToday}
               locale={locale!.lang}
               class={classNames(

components/date-picker/generatePicker/props.ts

@@ -72,14 +72,15 @@ function commonProps<DateType>() {
     disabledDate: { type: Function as PropType<(date: DateType) => boolean> },
     mode: { type: String as PropType<PanelMode> },
     picker: { type: String as PropType<PickerMode> },
+    valueFormat: String,
   };
 }
 
 function datePickerProps<DateType>() {
   return {
-    defaultPickerValue: { type: [String, Object] as PropType<DateType> },
+    defaultPickerValue: { type: [String, Object] as PropType<DateType | string> },
-    defaultValue: { type: [String, Object] as PropType<DateType> },
+    defaultValue: { type: [String, Object] as PropType<DateType | string> },
-    value: { type: [String, Object] as PropType<DateType> },
+    value: { type: [String, Object] as PropType<DateType | string> },
     disabledTime: { type: Function as PropType<DisabledTime<DateType>> },
     format: {
       type: [String, Function, Array] as PropType<
@@ -98,8 +99,10 @@ function rangePickerProps<DateType>() {
   return {
     allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> },
     dateRender: { type: Function as PropType<RangeDateRender<DateType>> },
-    defaultPickerValue: { type: Array as unknown as PropType<[DateType, DateType]> },
+    defaultPickerValue: {
-    defaultValue: { type: Array as unknown as PropType<[DateType, DateType]> },
+      type: Array as unknown as PropType<[DateType, DateType] | [string, string]>,
+    },
+    defaultValue: { type: Array as unknown as PropType<[DateType, DateType] | [string, string]> },
     value: { type: Array as unknown as PropType<[DateType, DateType]> },
     disabledTime: {
       type: Function as PropType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>,
@@ -121,4 +124,18 @@ function rangePickerProps<DateType>() {
   };
 }
 
+export type ExtraDatePickerProps<DateType> = {
+  valueFormat?: string;
+  defaultPickerValue?: DateType | string;
+  defaultValue?: DateType | string;
+  value?: DateType | string;
+};
+
+export type ExtraRangePickerProps<DateType> = {
+  valueFormat?: string;
+  defaultPickerValue?: [DateType, DateType] | [string, string];
+  defaultValue?: [DateType, DateType] | [string, string];
+  value?: [DateType, DateType] | [string, string];
+};
+
 export { commonProps, datePickerProps, rangePickerProps };

components/date-picker/index.tsx

@@ -1,35 +1,4 @@
-import type { Moment } from 'moment';
+import DatePicker from './moment';
-import type { App } from 'vue';
+export * from './moment';
-import momentGenerateConfig from '../vc-picker/generate/moment';
-import type {
-  PickerProps,
-  PickerDateProps,
-  RangePickerProps as BaseRangePickerProps,
-} from './generatePicker';
-import generatePicker from './generatePicker';
 
-export type DatePickerProps = PickerProps<Moment>;
+export default DatePicker;
-export type MonthPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
-export type WeekPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
-export type RangePickerProps = BaseRangePickerProps<Moment>;
-
-const DatePicker = generatePicker<Moment>(momentGenerateConfig);
-
-const RangePicker = DatePicker.RangePicker;
-const MonthPicker = DatePicker.MonthPicker;
-const WeekPicker = DatePicker.WeekPicker;
-const QuarterPicker = DatePicker.QuarterPicker;
-
-/* istanbul ignore next */
-DatePicker.install = function (app: App) {
-  app.component(DatePicker.name, DatePicker);
-  app.component(RangePicker.name, RangePicker);
-  app.component(MonthPicker.name, MonthPicker);
-  app.component(WeekPicker.name, WeekPicker);
-  app.component(QuarterPicker.name, QuarterPicker);
-  return app;
-};
-
-export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
-
-export default DatePicker as typeof DatePicker & Plugin;

components/date-picker/moment.tsx

@@ -0,0 +1,38 @@
+import type { Moment } from 'moment';
+import type { App } from 'vue';
+import momentGenerateConfig from '../vc-picker/generate/moment';
+import type {
+  PickerProps,
+  PickerDateProps,
+  RangePickerProps as BaseRangePickerProps,
+} from './generatePicker';
+import generatePicker from './generatePicker';
+import { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
+
+export type DatePickerProps = PickerProps<Moment> & ExtraDatePickerProps<Moment>;
+export type MonthPickerProps = Omit<PickerDateProps<Moment>, 'picker'> &
+  ExtraDatePickerProps<Moment>;
+export type WeekPickerProps = Omit<PickerDateProps<Moment>, 'picker'> &
+  ExtraDatePickerProps<Moment>;
+export type RangePickerProps = BaseRangePickerProps<Moment> & ExtraRangePickerProps<Moment>;
+
+const DatePicker = generatePicker<Moment>(momentGenerateConfig);
+
+const RangePicker = DatePicker.RangePicker;
+const MonthPicker = DatePicker.MonthPicker;
+const WeekPicker = DatePicker.WeekPicker;
+const QuarterPicker = DatePicker.QuarterPicker;
+
+/* istanbul ignore next */
+DatePicker.install = function (app: App) {
+  app.component(DatePicker.name, DatePicker);
+  app.component(RangePicker.name, RangePicker);
+  app.component(MonthPicker.name, MonthPicker);
+  app.component(WeekPicker.name, WeekPicker);
+  app.component(QuarterPicker.name, QuarterPicker);
+  return app;
+};
+
+export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
+
+export default DatePicker as typeof DatePicker & Plugin;

components/vc-picker/Picker.tsx

@@ -29,7 +29,7 @@ import useTextValueMapping from './hooks/useTextValueMapping';
 import useValueTexts from './hooks/useValueTexts';
 import useHoverValue from './hooks/useHoverValue';
 import type { CSSProperties, HtmlHTMLAttributes, Ref } from 'vue';
-import { computed, createVNode, defineComponent, ref, toRef, watch } from 'vue';
+import { computed, defineComponent, ref, toRef, watch } from 'vue';
 import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
 import type { VueNode } from '../_util/type';
 import type { AlignType } from '../vc-align/interface';

components/vc-picker/RangePicker.tsx

@@ -31,7 +31,7 @@ import useHoverValue from './hooks/useHoverValue';
 import type { VueNode } from '../_util/type';
 import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
 import type { HTMLAttributes } from 'vue';
-import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
+import { computed, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
 import useMergedState from '../_util/hooks/useMergedState';
 import { warning } from '../vc-util/warning';
 import useState from '../_util/hooks/useState';

components/vc-picker/generate/dataFns.ts

@@ -22,6 +22,7 @@ import {
   startOfWeek,
   format as formatDate,
   parse as parseDate,
+  isDate,
 } from 'date-fns';
 import * as Locale from 'date-fns/locale';
 import type { GenerateConfig } from '.';
@@ -110,6 +111,28 @@ const generateConfig: GenerateConfig<Date> = {
       return null;
     },
   },
+  toDate: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) =>
+        typeof val === 'string' && val ? parseDate(val, valueFormat, new Date()) : val || null,
+      ) as Date[];
+    } else {
+      return (
+        typeof value === 'string' && value
+          ? parseDate(value, valueFormat, new Date())
+          : value || null
+      ) as Date;
+    }
+  },
+  toString: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) =>
+        isDate(val) ? formatDate(val as Date, valueFormat) : val,
+      ) as string[];
+    } else {
+      return (isDate(value) ? formatDate(value as Date, valueFormat) : value) as string;
+    }
+  },
 };
 
 export default generateConfig;

components/vc-picker/generate/dayjs.ts

@@ -113,6 +113,25 @@ const generateConfig: GenerateConfig<Dayjs> = {
       return null;
     },
   },
+
+  toDate: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) =>
+        typeof val === 'string' && val ? dayjs(val, valueFormat) : val || null,
+      ) as Dayjs[];
+    } else {
+      return (
+        typeof value === 'string' && value ? dayjs(value, valueFormat) : value || null
+      ) as Dayjs;
+    }
+  },
+  toString: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) => (dayjs.isDayjs(val) ? val.format(valueFormat) : val));
+    } else {
+      return dayjs.isDayjs(value) ? value.format(valueFormat) : value;
+    }
+  },
 };
 
 export default generateConfig;

components/vc-picker/generate/index.ts

@@ -26,6 +26,14 @@ export type GenerateConfig<DateType> = {
   isAfter: (date1: DateType, date2: DateType) => boolean;
   isValidate: (date: DateType) => boolean;
 
+  toDate: (
+    value: string | string[] | DateType | DateType[],
+    valueFormat: string,
+  ) => DateType | DateType[];
+  toString: (
+    value: string | string[] | DateType | DateType[],
+    valueFormat: string,
+  ) => string | string[];
   locale: {
     getWeekFirstDay: (locale: string) => number;
     getWeekFirstDate: (locale: string, value: DateType) => DateType;

components/vc-picker/generate/moment.ts

@@ -135,6 +135,24 @@ const generateConfig: GenerateConfig<Moment> = {
       return null;
     },
   },
+  toDate: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) =>
+        typeof val === 'string' && val ? moment(val, valueFormat) : val || null,
+      ) as Moment[];
+    } else {
+      return (
+        typeof value === 'string' && value ? moment(value, valueFormat) : value || null
+      ) as Moment;
+    }
+  },
+  toString: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) => (moment.isMoment(val) ? val.format(valueFormat) : val));
+    } else {
+      return moment.isMoment(value) ? value.format(valueFormat) : value;
+    }
+  },
 };
 
 export default generateConfig;