From 95de091bfba3902f7c51cfa9c3280526d22cab5b Mon Sep 17 00:00:00 2001 From: HQ-Lin Date: Wed, 28 Sep 2022 17:28:26 +0800 Subject: [PATCH] feat: support valueType --- src/_common | 2 +- src/date-picker/DatePicker.tsx | 4 +++ src/date-picker/DateRangePicker.tsx | 4 +++ src/date-picker/date-picker.en-US.md | 2 ++ src/date-picker/date-picker.md | 6 +++-- src/date-picker/date-range-picker-props.ts | 20 ++++++++++++++- src/date-picker/hooks/useRange.ts | 2 ++ src/date-picker/hooks/useSingle.ts | 12 ++++++--- src/date-picker/props.ts | 20 ++++++++++++++- src/date-picker/type.ts | 30 ++++++++++++++++++++-- 10 files changed, 91 insertions(+), 11 deletions(-) diff --git a/src/_common b/src/_common index 421d9798f..c775b4f3c 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 421d9798f82604b5e12705c75b74fc5c20847d55 +Subproject commit c775b4f3cc7e246aeabee5e6f3bf2213c370698a diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index bfe0a7024..0b858f755 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -40,6 +40,7 @@ export default defineComponent({ const formatRef = computed(() => getDefaultFormat({ mode: props.mode, format: props.format, + valueType: props.valueType, enableTimePicker: props.enableTimePicker, })); @@ -93,6 +94,7 @@ export default defineComponent({ onChange?.( formatDate(date, { format: formatRef.value.format, + targetFormat: formatRef.value.valueType, }) as DateValue, { dayjsValue: parseToDayjs(date, formatRef.value.format), @@ -168,6 +170,7 @@ export default defineComponent({ onChange?.( formatDate(inputValue.value, { format: formatRef.value.format, + targetFormat: formatRef.value.valueType, }) as DateValue, { dayjsValue: parseToDayjs(inputValue.value as string, formatRef.value.format), @@ -188,6 +191,7 @@ export default defineComponent({ onChange?.( formatDate(presetVal, { format: formatRef.value.format, + targetFormat: formatRef.value.valueType, }) as DateValue, { dayjsValue: parseToDayjs(presetVal, formatRef.value.format), diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index 9a462d919..54a11b11d 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -45,6 +45,7 @@ export default defineComponent({ mode: props.mode, enableTimePicker: props.enableTimePicker, format: props.format, + valueType: props.valueType, })); // 记录面板是否选中过 @@ -163,6 +164,7 @@ export default defineComponent({ onChange?.( formatDate(nextValue, { format: formatRef.value.format, + targetFormat: formatRef.value.valueType, }) as DateValue[], { dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)), @@ -286,6 +288,7 @@ export default defineComponent({ onChange?.( formatDate(nextValue, { format: formatRef.value.format, + targetFormat: formatRef.value.valueType, }) as DateValue[], { dayjsValue: nextValue.map((v) => parseToDayjs(v, formatRef.value.format)), @@ -318,6 +321,7 @@ export default defineComponent({ onChange?.( formatDate(presetValue, { format: formatRef.value.format, + targetFormat: formatRef.value.valueType, }) as DateValue[], { dayjsValue: presetValue.map((p) => parseToDayjs(p, formatRef.value.format)), diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index 0e079f075..5fe9d1a44 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -25,6 +25,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API tips | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | `v-model` is supported。Typescript：`DateValue` `type DateValue = string | number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/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-vue/tree/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-vue/tree/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 @@ -65,6 +66,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API tips | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | Array | [] | `v-model` is supported。Typescript：`DateRangeValue` `type DateRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/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-vue/tree/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-vue/tree/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 e862e2aa5..7e15eaa84 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -11,7 +11,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-vue/tree/develop/src/date-picker/type.ts) | N mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N @@ -25,6 +25,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | 选中值。支持语法糖 `v-model`。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string | number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/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-vue/tree/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 @@ -46,7 +47,7 @@ pick | `(value: DateValue)` | 面板选中值后触发 allowInput | Boolean | false | 是否允许输入日期 | N clearable | Boolean | false | 是否显示清楚按钮 | N disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array | DisableDateObj | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' | 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N -disabled | Boolean | - | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 | N +disabled | Boolean | - | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N @@ -65,6 +66,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | Array | [] | 选中值。支持语法糖 `v-model`。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/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-vue/tree/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/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts index 508294104..738e96724 100644 --- a/src/date-picker/date-range-picker-props.ts +++ b/src/date-picker/date-range-picker-props.ts @@ -16,7 +16,7 @@ export default { disableDate: { type: [Object, Array, Function] as PropType, }, - /** 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 */ + /** 是否禁用组件 */ disabled: Boolean, /** 是否显示时间选择 */ enableTimePicker: Boolean, @@ -111,6 +111,24 @@ export default { type: Array as PropType, default: (): TdDateRangePickerProps['defaultValue'] => [], }, + /** 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式 */ + valueType: { + type: String as PropType, + validator(val: TdDateRangePickerProps['valueType']): boolean { + if (!val) return true; + return [ + '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', + ].includes(val); + }, + }, /** 当输入框失去焦点时触发 */ onBlur: Function as PropType, /** 选中值发生变化时触发 */ diff --git a/src/date-picker/hooks/useRange.ts b/src/date-picker/hooks/useRange.ts index 39bd21887..b6edf29fc 100644 --- a/src/date-picker/hooks/useRange.ts +++ b/src/date-picker/hooks/useRange.ts @@ -24,6 +24,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { const formatRef = computed(() => getDefaultFormat({ mode: props.mode, format: props.format, + valueType: props.valueType, enableTimePicker: props.enableTimePicker, })); @@ -88,6 +89,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) { onChange?.( formatDate(newVal, { format: formatRef.value.format, + targetFormat: formatRef.value.valueType, }) as DateValue[], { dayjsValue: newVal.map((v) => parseToDayjs(v, formatRef.value.format)), diff --git a/src/date-picker/hooks/useSingle.ts b/src/date-picker/hooks/useSingle.ts index fb2fa91c3..a77196c46 100644 --- a/src/date-picker/hooks/useSingle.ts +++ b/src/date-picker/hooks/useSingle.ts @@ -25,6 +25,7 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { const formatRef = computed(() => getDefaultFormat({ mode: props.mode, format: props.format, + valueType: props.valueType, enableTimePicker: props.enableTimePicker, })); @@ -82,10 +83,13 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) { popupVisible.value = false; if (isValidDate(val, formatRef.value.format)) { - onChange?.(formatDate(val, { format: formatRef.value.format }) as DateValue, { - dayjsValue: parseToDayjs(val, formatRef.value.format), - trigger: 'enter', - }); + onChange?.( + formatDate(val, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }) as DateValue, + { + dayjsValue: parseToDayjs(val, formatRef.value.format), + trigger: 'enter', + }, + ); } else if (isValidDate(value.value, formatRef.value.format)) { inputValue.value = formatDate(value.value, { format: formatRef.value.format, diff --git a/src/date-picker/props.ts b/src/date-picker/props.ts index 7056949ea..0b3b0eb0c 100644 --- a/src/date-picker/props.ts +++ b/src/date-picker/props.ts @@ -28,7 +28,7 @@ export default { return [1, 2, 3, 4, 5, 6, 7].includes(val); }, }, - /** 用于格式化日期，全局配置默认为：'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: { type: String, default: undefined, @@ -102,6 +102,24 @@ export default { type: [String, Number, Array, Date] as PropType, default: '', }, + /** 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式 */ + valueType: { + type: String as PropType, + validator(val: TdDatePickerProps['valueType']): boolean { + if (!val) return true; + return [ + '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', + ].includes(val); + }, + }, /** 当输入框失去焦点时触发 */ onBlur: Function as PropType, /** 选中值发生变化时触发 */ diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 49e41830c..38cc5c21d 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -40,7 +40,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; /** @@ -99,6 +99,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'; /** * 当输入框失去焦点时触发 */ @@ -133,7 +146,7 @@ export interface TdDateRangePickerProps { */ disableDate?: DisableRangeDate; /** - * 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 + * 是否禁用组件 */ disabled?: boolean; /** @@ -216,6 +229,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'; /** * 当输入框失去焦点时触发 */