From 457ef879d76c5952b2348887a425933ba3f2d316 Mon Sep 17 00:00:00 2001 From: HQ-Lin Date: Wed, 28 Sep 2022 17:14:49 +0800 Subject: [PATCH] feat: support valueType --- src/_common | 2 +- src/date-picker/DatePicker.tsx | 9 +++++---- src/date-picker/DateRangePicker.tsx | 9 +++++---- src/date-picker/date-picker.en-US.md | 2 ++ src/date-picker/date-picker.md | 4 +++- src/date-picker/hooks/useRange.tsx | 5 +++-- src/date-picker/hooks/useSingle.tsx | 8 ++++++-- src/date-picker/type.ts | 28 +++++++++++++++++++++++++++- 8 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/_common b/src/_common index eece31299a..deeb45db06 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit eece31299ae88e2c69d3ab58f4ac1c5c83b71703 +Subproject commit deeb45db06df9d822959a1cb1d3ed9963a33d17f diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 614e5bfe70..b85062b8ba 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -51,9 +51,10 @@ const DatePicker = forwardRef((props, ref) => { setCacheValue, } = useSingle(props); - const { format, timeFormat } = getDefaultFormat({ + const { format, timeFormat, valueType } = getDefaultFormat({ mode: props.mode, format: props.format, + valueType: props.valueType, enableTimePicker: props.enableTimePicker, }); @@ -96,7 +97,7 @@ const DatePicker = forwardRef((props, ref) => { if (enableTimePicker) { setCacheValue(formatDate(date, { format })); } else { - onChange(formatDate(date, { format }), { + onChange(formatDate(date, { format, targetFormat: valueType }), { dayjsValue: parseToDayjs(date, format), trigger: 'pick', }); @@ -148,7 +149,7 @@ const DatePicker = forwardRef((props, ref) => { function onConfirmClick() { const nextValue = formatDate(inputValue, { format }); if (nextValue) { - onChange(formatDate(inputValue, { format }), { + onChange(formatDate(inputValue, { format, targetFormat: valueType }), { dayjsValue: parseToDayjs(inputValue, format), trigger: 'confirm', }); @@ -164,7 +165,7 @@ const DatePicker = forwardRef((props, ref) => { if (typeof preset === 'function') { presetValue = preset(); } - onChange(formatDate(presetValue, { format }), { + onChange(formatDate(presetValue, { format, targetFormat: valueType }), { dayjsValue: parseToDayjs(presetValue, format), trigger: 'preset', }); diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index 69aceb6c86..79f421d378 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -58,10 +58,11 @@ const DateRangePicker = forwardRef((props, setCacheValue, } = useRange(props); - const { format, timeFormat } = getDefaultFormat({ + const { format, timeFormat, valueType } = getDefaultFormat({ mode, enableTimePicker, format: props.format, + valueType: props.valueType, }); // 记录面板是否选中过 @@ -150,7 +151,7 @@ const DateRangePicker = forwardRef((props, setCacheValue(nextValue); setInputValue(nextValue); } else { - onChange(formatDate(nextValue, { format }), { + onChange(formatDate(nextValue, { format, targetFormat: valueType }), { dayjsValue: nextValue.map((v) => parseToDayjs(v, format)), trigger: 'pick', }); @@ -252,7 +253,7 @@ const DateRangePicker = forwardRef((props, setCacheValue(nextValue); setInputValue(nextValue); } else { - onChange(formatDate(nextValue, { format }), { + onChange(formatDate(nextValue, { format, targetFormat: valueType }), { dayjsValue: nextValue.map((v) => parseToDayjs(v, format)), trigger: 'confirm', }); @@ -279,7 +280,7 @@ const DateRangePicker = forwardRef((props, if (!Array.isArray(presetValue)) { log.error('DateRangePicker', `preset: ${preset} 预设值必须是数组!`); } else { - onChange(formatDate(presetValue, { format }), { + onChange(formatDate(presetValue, { format, targetFormat: valueType }), { dayjsValue: presetValue.map((p) => parseToDayjs(p, format)), trigger: 'preset', }); diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index be1a336932..94bfa269e6 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -27,6 +27,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API tips | TNode | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | Typescript：`DateValue` `type DateValue = string | number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript：`DateValue` `type DateValue = string | number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueType | String | - | options：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N onBlur | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`

`type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear'`
| N onFocus | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`
| N @@ -60,6 +61,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API tips | TNode | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | Array | [] | Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueType | String | - | options：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N onBlur | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N onFocus | Function | | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
| N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index 100f36e00b..821bf454bb 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -13,7 +13,7 @@ disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] disabled | Boolean | - | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N -format | String | undefined | 用于格式化日期，全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N +format | String | undefined | 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N @@ -27,6 +27,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | 选中值。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N onBlur | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`

`type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear'`
| N onFocus | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N @@ -60,6 +61,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | Array | [] | 选中值。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：'time-stamp' | 'Date' | 'YYYY' | 'YYYY-MM' | 'YYYY-MM-DD' | 'YYYY-MM-DD HH' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss:SSS' | N onBlur | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
| N onFocus | Function | | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`
输入框获得焦点时触发 | N diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx index 3aaded0fdf..907ab175af 100644 --- a/src/date-picker/hooks/useRange.tsx +++ b/src/date-picker/hooks/useRange.tsx @@ -34,9 +34,10 @@ export default function useRange(props: TdDateRangePickerProps) { setIsFirstValueSelected, } = useRangeValue(props); - const { format, timeFormat } = getDefaultFormat({ + const { format, timeFormat, valueType } = getDefaultFormat({ mode: props.mode, format: props.format, + valueType: props.valueType, enableTimePicker: props.enableTimePicker, }); @@ -100,7 +101,7 @@ export default function useRange(props: TdDateRangePickerProps) { setPopupVisible(false); if (isValidDate(newVal, format)) { - onChange(formatDate(newVal, { format }) as DateValue[], { + onChange(formatDate(newVal, { format, targetFormat: valueType }) as DateValue[], { dayjsValue: newVal.map((v) => parseToDayjs(v, format)), trigger: 'enter', }); diff --git a/src/date-picker/hooks/useSingle.tsx b/src/date-picker/hooks/useSingle.tsx index 6346813e58..6052ee45ca 100644 --- a/src/date-picker/hooks/useSingle.tsx +++ b/src/date-picker/hooks/useSingle.tsx @@ -19,9 +19,10 @@ export default function useSingleInput(props: TdDatePickerProps) { const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon }); const name = `${classPrefix}-date-picker`; - const { format, timeFormat } = getDefaultFormat({ + const { format, valueType, timeFormat } = getDefaultFormat({ mode: props.mode, format: props.format, + valueType: props.valueType, enableTimePicker: props.enableTimePicker, }); @@ -82,7 +83,10 @@ export default function useSingleInput(props: TdDatePickerProps) { setPopupVisible(false); if (isValidDate(val, format)) { - onChange(formatDate(val, { format }), { dayjsValue: parseToDayjs(val, format), trigger: 'enter' }); + onChange(formatDate(val, { format, targetFormat: valueType }), { + dayjsValue: parseToDayjs(val, format), + trigger: 'enter', + }); } else if (isValidDate(value, format)) { setInputValue(formatDate(value, { format })); } else { diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 50c01bc365..5ddedcadf9 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -41,7 +41,7 @@ export interface TdDatePickerProps { */ firstDayOfWeek?: number; /** - * 用于格式化日期，全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) + * 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) */ format?: string; /** @@ -100,6 +100,19 @@ export interface TdDatePickerProps { * @default '' */ defaultValue?: DateValue; + /** + * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式 + */ + valueType?: + | 'time-stamp' + | 'Date' + | 'YYYY' + | 'YYYY-MM' + | 'YYYY-MM-DD' + | 'YYYY-MM-DD HH' + | 'YYYY-MM-DD HH:mm' + | 'YYYY-MM-DD HH:mm:ss' + | 'YYYY-MM-DD HH:mm:ss:SSS'; /** * 当输入框失去焦点时触发 */ @@ -217,6 +230,19 @@ export interface TdDateRangePickerProps { * @default [] */ defaultValue?: DateRangeValue; + /** + * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式 + */ + valueType?: + | 'time-stamp' + | 'Date' + | 'YYYY' + | 'YYYY-MM' + | 'YYYY-MM-DD' + | 'YYYY-MM-DD HH' + | 'YYYY-MM-DD HH:mm' + | 'YYYY-MM-DD HH:mm:ss' + | 'YYYY-MM-DD HH:mm:ss:SSS'; /** * 当输入框失去焦点时触发 */