From d8c8bc41561aeee3030e32f01d60bec1f2f2c5b0 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 3 Aug 2021 16:21:17 +0800 Subject: [PATCH] feat: support valueFormat --- components/date-picker/date-fns.tsx | 35 ++ components/date-picker/dayjs.tsx | 36 ++ .../generatePicker/generateRangePicker.tsx | 333 ++++++++++-------- .../generatePicker/generateSinglePicker.tsx | 43 ++- .../date-picker/generatePicker/props.ts | 27 +- components/date-picker/index.tsx | 37 +- components/date-picker/moment.tsx | 38 ++ components/vc-picker/Picker.tsx | 2 +- components/vc-picker/RangePicker.tsx | 2 +- components/vc-picker/generate/dataFns.ts | 23 ++ components/vc-picker/generate/dayjs.ts | 19 + components/vc-picker/generate/index.ts | 8 + components/vc-picker/generate/moment.ts | 18 + 13 files changed, 429 insertions(+), 192 deletions(-) create mode 100755 components/date-picker/date-fns.tsx create mode 100755 components/date-picker/dayjs.tsx create mode 100755 components/date-picker/moment.tsx diff --git a/components/date-picker/date-fns.tsx b/components/date-picker/date-fns.tsx new file mode 100755 index 000000000..337df66d4 --- /dev/null +++ b/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 & ExtraDatePickerProps; +export type MonthPickerProps = Omit, 'picker'> & ExtraDatePickerProps; +export type WeekPickerProps = Omit, 'picker'> & ExtraDatePickerProps; +export type RangePickerProps = BaseRangePickerProps & ExtraRangePickerProps; + +const DatePicker = generatePicker(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; diff --git a/components/date-picker/dayjs.tsx b/components/date-picker/dayjs.tsx new file mode 100755 index 000000000..b77f1b0da --- /dev/null +++ b/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 & ExtraDatePickerProps; +export type MonthPickerProps = Omit, 'picker'> & ExtraDatePickerProps; +export type WeekPickerProps = Omit, 'picker'> & ExtraDatePickerProps; +export type RangePickerProps = BaseRangePickerProps & ExtraRangePickerProps; + +const DatePicker = generatePicker(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; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index cb1cd88ed..6ec3a1b7e 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/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(generateConfig: GenerateConfig) { - const RangePicker = defineComponent>({ - name: 'ARangePicker', - inheritAttrs: false, - props: { - ...commonProps(), - ...rangePickerProps(), - } as any, - slots: [ - 'suffixIcon', - // 'clearIcon', - // 'prevIcon', - // 'nextIcon', - // 'superPrevIcon', - // 'superNextIcon', - // 'panelRender', - 'dateRender', - 'renderExtraFooter', - // 'separator', - ], - emits: [ - 'change', - 'panelChange', - 'ok', - 'openChange', - 'update:value', - 'calendarChange', - 'focus', - 'blur', - ], - setup(props, { expose, slots, attrs, emit }) { - devWarning( - !(attrs as any).getCalendarContainer, - '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, modes: [PanelMode, PanelMode]) => { - emit('panelChange', values, modes); - }; - const onOk = (value: DateType) => { - emit('ok', value); - }; - const onCalendarChange: RangePickerSharedProps['onCalendarChange'] = (...args) => { - emit('calendarChange', ...args); - }; - const [contextLocale] = useLocaleReceiver('DatePicker', enUS); - return () => { - const locale = { ...contextLocale.value, ...props.locale }; - const p = { ...props, ...attrs } as RangePickerProps; - 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 ( - - - - } - ref={pickerRef} - placeholder={getRangePlaceholder(picker, locale, placeholder)} - suffixIcon={ - suffixIcon || (picker === 'time' ? : ) - } - clearIcon={} - 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={} - nextIcon={} - superPrevIcon={} - superNextIcon={} - components={Components} - direction={direction.value} - onChange={onChange} - onOpenChange={onOpenChange} - onFocus={onFoucs} - onBlur={onBlur} - onPanelChange={onPanelChange} - onOk={onOk} - onCalendarChange={onCalendarChange} - /> + const RangePicker = defineComponent & ExtraRangePickerProps>( + { + name: 'ARangePicker', + inheritAttrs: false, + props: { + ...commonProps(), + ...rangePickerProps(), + } as any, + slots: [ + 'suffixIcon', + // 'clearIcon', + // 'prevIcon', + // 'nextIcon', + // 'superPrevIcon', + // 'superNextIcon', + // 'panelRender', + 'dateRender', + 'renderExtraFooter', + // 'separator', + ], + emits: [ + 'change', + 'panelChange', + 'ok', + 'openChange', + 'update:value', + 'calendarChange', + 'focus', + 'blur', + ], + setup(props, { expose, slots, attrs, emit }) { + devWarning( + !(attrs as any).getCalendarContainer, + '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]) => { + 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, 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['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; + 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 ( + + + + } + ref={pickerRef} + placeholder={getRangePlaceholder(picker, locale, placeholder)} + suffixIcon={ + suffixIcon || (picker === 'time' ? : ) + } + clearIcon={} + 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={} + nextIcon={} + superPrevIcon={} + superNextIcon={} + components={Components} + direction={direction.value} + onChange={onChange} + onOpenChange={onOpenChange} + onFocus={onFoucs} + onBlur={onBlur} + onPanelChange={onPanelChange} + onOk={onOk} + onCalendarChange={onCalendarChange} + /> + ); + }; + }, }, - }); + ); return RangePicker; } diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index dbadf66b3..c3be3bc6c 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/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(generateConfig: GenerateConfig) { - type DatePickerProps = PickerProps; + type DatePickerProps = PickerProps & ExtraDatePickerProps; function getPicker( picker?: PickerMode, @@ -68,8 +68,9 @@ export default function generatePicker(generateConfig: GenerateConfig< }, }); const onChange = (date: DateType, dateString: string) => { - emit('update:value', date); - emit('change', date, dateString); + const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date; + emit('update:value', value); + emit('change', value, dateString); }; const onOpenChange = (open: boolean) => { emit('openChange', open); @@ -80,7 +81,8 @@ export default function generatePicker(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(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(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( diff --git a/components/date-picker/generatePicker/props.ts b/components/date-picker/generatePicker/props.ts index 6137f1656..a5e68e10c 100644 --- a/components/date-picker/generatePicker/props.ts +++ b/components/date-picker/generatePicker/props.ts @@ -72,14 +72,15 @@ function commonProps() { disabledDate: { type: Function as PropType<(date: DateType) => boolean> }, mode: { type: String as PropType }, picker: { type: String as PropType }, + valueFormat: String, }; } function datePickerProps() { return { - defaultPickerValue: { type: [String, Object] as PropType }, - defaultValue: { type: [String, Object] as PropType }, - value: { type: [String, Object] as PropType }, + defaultPickerValue: { type: [String, Object] as PropType }, + defaultValue: { type: [String, Object] as PropType }, + value: { type: [String, Object] as PropType }, disabledTime: { type: Function as PropType> }, format: { type: [String, Function, Array] as PropType< @@ -98,8 +99,10 @@ function rangePickerProps() { return { allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> }, dateRender: { type: Function as PropType> }, - defaultPickerValue: { type: Array as unknown as PropType<[DateType, DateType]> }, - defaultValue: { type: Array as unknown as PropType<[DateType, DateType]> }, + defaultPickerValue: { + 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, type: RangeType) => DisabledTimes>, @@ -121,4 +124,18 @@ function rangePickerProps() { }; } +export type ExtraDatePickerProps = { + valueFormat?: string; + defaultPickerValue?: DateType | string; + defaultValue?: DateType | string; + value?: DateType | string; +}; + +export type ExtraRangePickerProps = { + valueFormat?: string; + defaultPickerValue?: [DateType, DateType] | [string, string]; + defaultValue?: [DateType, DateType] | [string, string]; + value?: [DateType, DateType] | [string, string]; +}; + export { commonProps, datePickerProps, rangePickerProps }; diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index e917b5638..21a09fb71 100755 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -1,35 +1,4 @@ -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 DatePicker from './moment'; +export * from './moment'; -export type DatePickerProps = PickerProps; -export type MonthPickerProps = Omit, 'picker'>; -export type WeekPickerProps = Omit, 'picker'>; -export type RangePickerProps = BaseRangePickerProps; - -const DatePicker = generatePicker(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; +export default DatePicker; diff --git a/components/date-picker/moment.tsx b/components/date-picker/moment.tsx new file mode 100755 index 000000000..13f26465e --- /dev/null +++ b/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 & ExtraDatePickerProps; +export type MonthPickerProps = Omit, 'picker'> & + ExtraDatePickerProps; +export type WeekPickerProps = Omit, 'picker'> & + ExtraDatePickerProps; +export type RangePickerProps = BaseRangePickerProps & ExtraRangePickerProps; + +const DatePicker = generatePicker(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; diff --git a/components/vc-picker/Picker.tsx b/components/vc-picker/Picker.tsx index e9c53d705..75508f3e2 100644 --- a/components/vc-picker/Picker.tsx +++ b/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'; diff --git a/components/vc-picker/RangePicker.tsx b/components/vc-picker/RangePicker.tsx index 1ec5512f1..6f8f2c2dc 100644 --- a/components/vc-picker/RangePicker.tsx +++ b/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'; diff --git a/components/vc-picker/generate/dataFns.ts b/components/vc-picker/generate/dataFns.ts index 196f8d7ec..29d9be5ea 100644 --- a/components/vc-picker/generate/dataFns.ts +++ b/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 = { 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; diff --git a/components/vc-picker/generate/dayjs.ts b/components/vc-picker/generate/dayjs.ts index ff6c4b16e..39ab3a1d5 100644 --- a/components/vc-picker/generate/dayjs.ts +++ b/components/vc-picker/generate/dayjs.ts @@ -113,6 +113,25 @@ const generateConfig: GenerateConfig = { 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; diff --git a/components/vc-picker/generate/index.ts b/components/vc-picker/generate/index.ts index b0cd56d5e..4e3e7ca38 100644 --- a/components/vc-picker/generate/index.ts +++ b/components/vc-picker/generate/index.ts @@ -26,6 +26,14 @@ export type GenerateConfig = { 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; diff --git a/components/vc-picker/generate/moment.ts b/components/vc-picker/generate/moment.ts index 24ed8ce0d..cbe549a62 100644 --- a/components/vc-picker/generate/moment.ts +++ b/components/vc-picker/generate/moment.ts @@ -135,6 +135,24 @@ const generateConfig: GenerateConfig = { 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;