From 8eab666986ab3664b4a9078d5561b56abab4fd3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Mon, 26 Aug 2024 13:31:46 +0800 Subject: [PATCH 1/5] fix(TimePicker): fixed only support hh:mm format --- src/time-picker/__tests__/index.test.jsx | 8 ++++ src/time-picker/panel/single-panel.tsx | 51 +++++++++++++++--------- 2 files changed, 41 insertions(+), 18 deletions(-) diff --git a/src/time-picker/__tests__/index.test.jsx b/src/time-picker/__tests__/index.test.jsx index 256afd20f..6f40a87b8 100644 --- a/src/time-picker/__tests__/index.test.jsx +++ b/src/time-picker/__tests__/index.test.jsx @@ -76,6 +76,14 @@ describe('TimePicker', () => { const panelNode = document.querySelector('.t-time-picker__panel'); // format为HH:mm 只展示两列 即时分 expect(panelNode.querySelectorAll('.t-time-picker__panel-body-scroll').length).toBe(2); + + await wrapper.setProps({ + popupProps: { + visible: true, + }, + format: 'HH时mm分', + }); + expect(panelNode.querySelectorAll('.t-time-picker__panel-body-scroll').length).toBe(2); panelNode.parentNode.removeChild(panelNode); }); diff --git a/src/time-picker/panel/single-panel.tsx b/src/time-picker/panel/single-panel.tsx index 5dacb513d..f600248cb 100644 --- a/src/time-picker/panel/single-panel.tsx +++ b/src/time-picker/panel/single-panel.tsx @@ -9,12 +9,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat'; import { panelColProps } from './props'; import { - EPickerCols, - TWELVE_HOUR_FORMAT, - TIME_FORMAT, - AM, - PM, - MERIDIEM_LIST, + EPickerCols, TWELVE_HOUR_FORMAT, AM, PM, MERIDIEM_LIST, } from '../../_common/js/time-picker/const'; import { closestLookup } from '../../_common/js/time-picker/utils'; import { useConfig } from '../../hooks/useConfig'; @@ -28,6 +23,8 @@ const panelOffset = { bottom: 21, }; +export const REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g; + export default defineComponent({ name: 'TTimePickerPanelCol', props: { @@ -82,22 +79,40 @@ export default defineComponent({ ); onMounted(() => { - const match = format.value.match(TIME_FORMAT); - - const [, startCol, hourCol, minuteCol, secondCol, milliSecondCol, endCol] = match; + const match = format.value.match(REGEX_FORMAT); const { meridiem, hour, minute, second, milliSecond, } = EPickerCols; - const renderCol = [ - startCol && meridiem, - hourCol && hour, - minuteCol && minute, - secondCol && second, - milliSecondCol && milliSecond, - endCol && meridiem, - ].filter((v) => !!v); - + const renderCol: EPickerCols[] = []; + + match.forEach((m) => { + switch (m) { + case 'H': + case 'HH': + case 'h': + case 'hh': + renderCol.push(hour); + break; + case 'a': + case 'A': + renderCol.push(meridiem); + break; + case 'm': + case 'mm': + renderCol.push(minute); + break; + case 's': + case 'ss': + renderCol.push(second); + break; + case 'SSS': + renderCol.push(milliSecond); + break; + default: + break; + } + }); cols.value = renderCol; }); From c44f9db7febb40593c113d29a6370c08f70ba3cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Tue, 27 Aug 2024 12:40:28 +0800 Subject: [PATCH 2/5] fix(TimePicker): disabled position only is start --- src/time-picker/panel/props.ts | 1 + src/time-picker/panel/time-picker-panel.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/time-picker/panel/props.ts b/src/time-picker/panel/props.ts index 7daa564d0..96c3b8e38 100644 --- a/src/time-picker/panel/props.ts +++ b/src/time-picker/panel/props.ts @@ -20,6 +20,7 @@ export const panelProps = () => ({ type: String, default: 'HH:mm:ss', }, + position: String, steps: { type: Array as PropType>, default: () => [1, 1, 1], diff --git a/src/time-picker/panel/time-picker-panel.tsx b/src/time-picker/panel/time-picker-panel.tsx index cee0d92d3..d9dce7406 100644 --- a/src/time-picker/panel/time-picker-panel.tsx +++ b/src/time-picker/panel/time-picker-panel.tsx @@ -109,6 +109,7 @@ export default defineComponent({ steps: this.steps || DEFAULT_STEPS, triggerScroll: this.triggerScroll, disableTime: this.disableTime, + position: this.position, resetTriggerScroll: this.resetTriggerScroll, isShowPanel: this.isShowPanel, hideDisabledTime: this.hideDisabledTime, From d5baa7d4450c18f2c91a2b4a415bff64fb78c944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Thu, 5 Sep 2024 19:38:39 +0800 Subject: [PATCH 3/5] fix(Upload): fixed vue error on uploadPastedFiles is false --- src/upload/upload.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx index 90d1a338b..b1d75b402 100644 --- a/src/upload/upload.tsx +++ b/src/upload/upload.tsx @@ -94,9 +94,15 @@ export default defineComponent({ }, ]); + const handlePasteFileChange = (e: ClipboardEvent) => { + if (props.uploadPastedFiles) { + onPasteFileChange(e); + } + }; + return { ...uploadData, - onPasteFileChange, + handlePasteFileChange, commonDisplayFileProps, dragProps, uploadClasses, @@ -246,7 +252,7 @@ export default defineComponent({ render() { return ( -
+
Date: Wed, 11 Sep 2024 12:26:28 +0800 Subject: [PATCH 4/5] docs: add readonly in api --- src/date-picker/date-picker.en-US.md | 1 + src/date-picker/date-picker.md | 1 + src/time-picker/time-picker.en-US.md | 1 + src/time-picker/time-picker.md | 1 + 4 files changed, 4 insertions(+) diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index a04cb7b39..21a45eb56 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -23,6 +23,7 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | Typescript：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +readonly | Boolean | false | \- | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | default | options: default/success/warning/error | N suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index c2a07f3be..54c693dd3 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -23,6 +23,7 @@ popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupPr prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N +readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | default | 输入框状态。可选项：default/success/warning/error | N suffixIcon | Slot / Function | - | 用于自定义组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index 3c9145352..0591185e9 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -17,6 +17,7 @@ inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./in placeholder | String | undefined | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +readonly | Boolean | false | \- | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N steps | Array | [1, 1, 1] | Typescript：`Array` | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index 592d08ed2..600daccc1 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -17,6 +17,7 @@ inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类 placeholder | String | undefined | 占位符 | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N +readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N size | String | medium | 尺寸。可选项：small/medium/large | N status | String | default | 输入框状态。可选项：default/success/warning/error | N steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array` | N From fe1f87a86bfab8a638355dd958c437eca2d8a1fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=87=E9=98=B3?= Date: Sun, 15 Sep 2024 18:13:34 +0800 Subject: [PATCH 5/5] feat(DatePicker): add disableTime prop --- src/date-picker/DatePicker.tsx | 1 + src/date-picker/DateRangePicker.tsx | 1 + src/date-picker/DateRangePickerPanel.tsx | 2 ++ .../_example-composition/disable-date.vue | 23 ++++++--------- src/date-picker/_example/disable-date.vue | 25 +++++++--------- src/date-picker/date-picker.en-US.md | 4 ++- src/date-picker/date-picker.md | 6 ++-- src/date-picker/date-range-picker-props.ts | 4 +++ src/date-picker/panel/PanelContent.tsx | 1 + src/date-picker/panel/RangePanel.tsx | 29 ++++++++++++++++++- src/date-picker/panel/SinglePanel.tsx | 17 ++++++++++- src/date-picker/props.ts | 4 +++ src/date-picker/type.ts | 14 +++++++++ src/date-picker/utils.ts | 21 ++++++++++++++ 14 files changed, 118 insertions(+), 34 deletions(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 69c6f9324..84bb38d9f 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -237,6 +237,7 @@ export default defineComponent({ presets: props.presets, time: time.value as string, disableDate: props.disableDate, + disableTime: props.disableTime, firstDayOfWeek: props.firstDayOfWeek, timePickerProps: props.timePickerProps, enableTimePicker: props.enableTimePicker, diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index e2e727943..39d22c17d 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -403,6 +403,7 @@ export default defineComponent({ presets: props.presets, time: time.value, disableDate: props.disableDate, + disableTime: props.disableTime, firstDayOfWeek: props.firstDayOfWeek, timePickerProps: props.timePickerProps, enableTimePicker: props.enableTimePicker, diff --git a/src/date-picker/DateRangePickerPanel.tsx b/src/date-picker/DateRangePickerPanel.tsx index 486e00c50..414001180 100644 --- a/src/date-picker/DateRangePickerPanel.tsx +++ b/src/date-picker/DateRangePickerPanel.tsx @@ -26,6 +26,7 @@ export default defineComponent({ defaultValue: dateRangePickerProps.defaultValue, disabled: dateRangePickerProps.disabled, disableDate: dateRangePickerProps.disableDate, + disableTime: dateRangePickerProps.disableTime, enableTimePicker: dateRangePickerProps.enableTimePicker, firstDayOfWeek: dateRangePickerProps.firstDayOfWeek, format: dateRangePickerProps.format, @@ -385,6 +386,7 @@ export default defineComponent({ presets: props.presets, time: time.value, disableDate: props.disableDate, + disableTime: props.disableTime, firstDayOfWeek: props.firstDayOfWeek, timePickerProps: props.timePickerProps, enableTimePicker: props.enableTimePicker, diff --git a/src/date-picker/_example-composition/disable-date.vue b/src/date-picker/_example-composition/disable-date.vue index 2227e41cd..9a0ab5e25 100644 --- a/src/date-picker/_example-composition/disable-date.vue +++ b/src/date-picker/_example-composition/disable-date.vue @@ -23,8 +23,7 @@ placeholder="禁用日期精确到时间" enable-time-picker :disable-date="{ before: dayjs().subtract(1, 'day').format() }" - :time-picker-props="timePickerProps" - @pick="(date) => (pickDate = dayjs(date).format('YYYY-MM-DD'))" + :disable-time="disableTime" /> diff --git a/src/date-picker/_example/disable-date.vue b/src/date-picker/_example/disable-date.vue index f81ba257e..78dfa93b7 100644 --- a/src/date-picker/_example/disable-date.vue +++ b/src/date-picker/_example/disable-date.vue @@ -23,8 +23,7 @@ placeholder="禁用日期精确到时间" enable-time-picker :disable-date="{ before: dayjs().subtract(1, 'day').format() }" - :time-picker-props="timePickerProps" - @pick="(date) => (pickDate = dayjs(date).format('YYYY-MM-DD'))" + :disable-time="disableTime" /> { - if (this.pickDate === dayjs().format('YYYY-MM-DD')) { - return { - hour: [0, 1, 2, 3, 4, 5, 6], - }; - } - return {}; - }, - }; + methods: { + disableTime: (time) => { + if (dayjs(time).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')) { + return { + hour: [0, 1, 2, 3, 4, 5, 6], + }; + } + return {}; }, }, }; diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index 21a45eb56..1601b1add 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -11,6 +11,7 @@ borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N defaultTime | String | '00:00:00' | Time selector default value | N disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +disableTime | Function | - | disable time config function。Typescript：`(time: Date) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | make DatePicker to be disabled | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N @@ -60,6 +61,7 @@ borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N disableDate | Object / Array / Function | - | Typescript：`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'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +disableTime | Function | - | Typescript：`(times: [Date \| null, Date \| null], context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | \- | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N @@ -108,7 +110,7 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \- name | type | default | description | required -- | -- | -- | -- | -- defaultTime | String | '00:00:00' | Time selector default value | N -`Pick` | \- | - | extends `Pick` | N +`Pick` | \- | - | extends `Pick` | N onCellClick | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`
| N onConfirm | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index 54c693dd3..6dc2b85e2 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -11,6 +11,7 @@ borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | 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 类型：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N +disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(time: Date) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -60,6 +61,7 @@ borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | 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 +disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(times: [Date \| null, Date \| null], context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N disabled | Boolean | - | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -108,7 +110,7 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N -`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N +`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N onCellClick | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
点击日期单元格时触发 | N onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同 | N onConfirm | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N @@ -137,7 +139,7 @@ year-change | `(context: { year: number, date: Date, trigger: DatePickerYearChan 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N -`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N +`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N onCellClick | Function | | TS 类型：`(context: { date: Date[], partial: DateRangePickerPartial, e: MouseEvent }) => void`
点击日期单元格时触发 | N onChange | Function | | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], partial: DateRangePickerPartial, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同 | N onConfirm | Function | | TS 类型：`(context: { date: Date[], e: MouseEvent }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N diff --git a/src/date-picker/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts index 619792390..33d443635 100644 --- a/src/date-picker/date-range-picker-props.ts +++ b/src/date-picker/date-range-picker-props.ts @@ -23,6 +23,10 @@ export default { disableDate: { type: [Object, Array, Function] as PropType, }, + /** 禁用时间项的配置函数 */ + disableTime: { + type: Function as PropType, + }, /** 是否禁用组件 */ disabled: Boolean, /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */ diff --git a/src/date-picker/panel/PanelContent.tsx b/src/date-picker/panel/PanelContent.tsx index a6d90ea57..4bce69407 100644 --- a/src/date-picker/panel/PanelContent.tsx +++ b/src/date-picker/panel/PanelContent.tsx @@ -87,6 +87,7 @@ export default defineComponent({ {...{ key: this.partial, props: { + position: this.partial, format: timeFormat, value: this.time, onChange: this.onTimePickerChange, diff --git a/src/date-picker/panel/RangePanel.tsx b/src/date-picker/panel/RangePanel.tsx index 8b94f8e84..5e13d1ab0 100644 --- a/src/date-picker/panel/RangePanel.tsx +++ b/src/date-picker/panel/RangePanel.tsx @@ -1,4 +1,5 @@ import { defineComponent, PropType, computed } from '@vue/composition-api'; +import isFunction from 'lodash/isFunction'; import { useConfig, usePrefixClass } from '../../hooks/useConfig'; import TPanelContent from './PanelContent'; import TExtraContent from './ExtraContent'; @@ -6,6 +7,8 @@ import { TdDateRangePickerProps } from '../type'; import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; import useTableData from '../hooks/useTableData'; import useDisableDate from '../hooks/useDisableDate'; +import { TdTimePickerProps, TdTimeRangePickerProps } from '../../time-picker'; +import { parseToDateTime } from '../utils'; export default defineComponent({ name: 'TRangePanel', @@ -14,6 +17,7 @@ export default defineComponent({ activeIndex: Number, isFirstValueSelected: Boolean, disableDate: [Object, Array, Function] as PropType, + disableTime: Function as PropType, mode: { type: String as PropType, default: 'date', @@ -75,6 +79,26 @@ export default defineComponent({ : undefined, })); + const disableTime: TdTimeRangePickerProps['disableTime'] = (h: number, m: number, s: number, context) => { + if (!isFunction(props.disableTime)) { + return {}; + } + + const [startTime, endTime] = props.value || []; + + if (context.partial) { + return (props.disableTime as TdDateRangePickerProps['disableTime'])( + [parseToDateTime(startTime, format, [h, m, s]), parseToDateTime(endTime, format)], + context, + ); + } + + return (props.disableTime as TdDateRangePickerProps['disableTime'])( + [parseToDateTime(startTime, format), parseToDateTime(endTime, format, [h, m, s])], + context, + ); + }; + const startTableData = computed(() => useTableData({ isRange: true, start: props.value[0] ? parseToDayjs(props.value[0] as string, format).toDate() : undefined, @@ -120,7 +144,10 @@ export default defineComponent({ popupVisible: props.popupVisible, enableTimePicker: props.enableTimePicker, - timePickerProps: props.timePickerProps, + timePickerProps: { + disableTime, + ...(props.timePickerProps as TdTimePickerProps), + }, onMonthChange: props.onMonthChange, onYearChange: props.onYearChange, onJumperClick: props.onJumperClick, diff --git a/src/date-picker/panel/SinglePanel.tsx b/src/date-picker/panel/SinglePanel.tsx index b569b5d30..4d07eabb1 100644 --- a/src/date-picker/panel/SinglePanel.tsx +++ b/src/date-picker/panel/SinglePanel.tsx @@ -1,4 +1,5 @@ import { defineComponent, PropType, computed } from '@vue/composition-api'; +import isFunction from 'lodash/isFunction'; import { useConfig, usePrefixClass } from '../../hooks/useConfig'; import TPanelContent from './PanelContent'; import TExtraContent from './ExtraContent'; @@ -6,11 +7,14 @@ import { TdDatePickerProps } from '../type'; import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; import useTableData from '../hooks/useTableData'; import useDisableDate from '../hooks/useDisableDate'; +import { TdTimePickerProps } from '../../time-picker'; +import { parseToDateTime } from '../utils'; export default defineComponent({ name: 'TSinglePanel', props: { disableDate: [Object, Array, Function] as PropType, + disableTime: Function as PropType, mode: { type: String as PropType, default: 'date', @@ -56,6 +60,14 @@ export default defineComponent({ disableDate: props.disableDate, })); + const disableTime: TdTimePickerProps['disableTime'] = (h: number, m: number, s: number, ms: number) => { + if (!isFunction(props.disableTime) || !props.value) { + return {}; + } + + return props.disableTime(parseToDateTime(props.value, format, [h, m, s, ms])); + }; + const tableData = computed(() => useTableData({ year: props.year, month: props.month, @@ -75,7 +87,10 @@ export default defineComponent({ tableData: tableData.value, popupVisible: props.popupVisible, enableTimePicker: props.enableTimePicker, - timePickerProps: props.timePickerProps, + timePickerProps: { + disableTime, + ...(props.timePickerProps as TdTimePickerProps), + }, time: props.time, onMonthChange: props.onMonthChange, onYearChange: props.onYearChange, diff --git a/src/date-picker/props.ts b/src/date-picker/props.ts index b9ba422ae..350b5e538 100644 --- a/src/date-picker/props.ts +++ b/src/date-picker/props.ts @@ -23,6 +23,10 @@ export default { disableDate: { type: [Object, Array, Function] as PropType, }, + /** 禁用时间项的配置函数 */ + disableTime: { + type: Function as PropType, + }, /** 是否禁用组件 */ disabled: Boolean, /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */ diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 08d8b1373..8c6d4551c 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -36,6 +36,12 @@ export interface TdDatePickerProps { * 禁用日期，示例：['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 的日期会被禁用 */ disableDate?: DisableDate; + /** + * 禁用时间项 + */ + disableTime?: ( + time: Date, + ) => Partial<{ hour: Array; minute: Array; second: Array; millisecond: Array }>; /** * 是否禁用组件 */ @@ -179,6 +185,13 @@ export interface TdDateRangePickerProps { * 禁用日期，示例：['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 的日期会被禁用 */ disableDate?: DisableRangeDate; + /** + * 禁用时间项 + */ + disableTime?: ( + times: [Date | null, Date | null], + context: { partial: DateRangePickerPartial }, + ) => Partial<{ hour: Array; minute: Array; second: Array }>; /** * 是否禁用组件 */ @@ -387,6 +400,7 @@ export interface TdDateRangePickerPanelProps | 'value' | 'defaultValue' | 'disableDate' + | 'disableTime' | 'enableTimePicker' | 'firstDayOfWeek' | 'format' diff --git a/src/date-picker/utils.ts b/src/date-picker/utils.ts index 44c3ce2cb..6b9b32a13 100644 --- a/src/date-picker/utils.ts +++ b/src/date-picker/utils.ts @@ -1,3 +1,5 @@ +import isNil from 'lodash/isNil'; +import { parseToDayjs } from '../_common/js/date-picker/format'; // 用于头部日期切换修正 // eslint-disable-next-line import/prefer-default-export export function dateCorrection( @@ -47,3 +49,22 @@ export function dateCorrection( } return { nextYear, nextMonth }; } + +export function parseToDateTime( + value: string | Date | number, + format: string, + times?: [number, number, number, number?], +) { + if (isNil(value)) { + return null; + } + + let dayjs = parseToDayjs(value, format); + + if (times) { + const [hour = 0, minute = 0, second = 0, millisecond = 0] = times; + dayjs = dayjs.hour(hour).minute(minute).second(second).millisecond(millisecond); + } + + return dayjs.toDate(); +}