From d8e1b77ad6ed2973805f195aea6c6d31177fc52f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Fri, 8 Nov 2024 17:10:52 +0800 Subject: [PATCH] feat(datepicker): support disabletime API (#459) Co-authored-by: github-actions[bot] --- db/TDesign.db | Bin 1003520 -> 1003520 bytes .../src/date-picker/date-picker.en-US.md | 4 +- .../src/date-picker/date-picker.md | 4 +- .../tdesign-react/src/date-picker/type.ts | 14 +++ .../src/date-picker/date-picker.en-US.md | 4 +- .../src/date-picker/date-picker.md | 4 +- .../date-picker/date-range-picker-props.ts | 4 + .../tdesign-vue-next/src/date-picker/props.ts | 4 + .../tdesign-vue-next/src/date-picker/type.ts | 14 +++ .../src/date-picker/date-picker.en-US.md | 4 +- .../src/date-picker/date-picker.md | 4 +- .../date-picker/date-range-picker-props.ts | 4 + .../tdesign-vue/src/date-picker/props.ts | 4 + .../tdesign-vue/src/date-picker/type.ts | 14 +++ packages/scripts/api.json | 84 +++++++++++++++++- 15 files changed, 159 insertions(+), 7 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index 5b2664bfe850eec714bd498cff7b87b2aeb05e63..1f0f8cd98d84bb4a3f7968052194741b3202396a 100644 GIT binary patch delta 617 zcmZozVB4_3c7ha>EaOBOCpK9|2EDS5#+23+#?}<3))eN}6qeQ$)~zXQi}tgXFmS{% zluYM2z?Q+?q&mSd5*#%@j?O*?V$_l9S6iPC4Qx%f)^U^ZY71B!c zl1no4^Nb9POmqzmbqy>O3@ofnOs$NKu?T5Mg7g+!DL57tC05$FB$lKq)F|YY=H%E- zUzo@wHof~lvlx>??eqhVi~(8-wRTPBb9sQCQ-pX<9O^kngy)X*vI9+-uIR{Ui0(It zA5i>8k~hq)Of9SoOp(0-7199t!b$<;d`$&gJB5J6qLR$S>8BkTlbCAl+VyfdfS41A zxqz4(h$s#LmFL7{auJVY*Bbujlr_1iok{7Tz5GbK5s0@$KQ_;$&uFO4mKo Z%h$8LESE2W2`X@YEnn~U8~J=14*-Hl-C6(u delta 218 zcmZozVB4_3c7ha>%)f~;PHZy&81%}z8dF+R7+X`AT2q)?Q&?J4ShuFIE!xl4!oU&7 z&@!Fp09%GMFE0ZF2d}X)0|Nsm2QLS2ljsCbDJDj3#%96k^#|CprY|_f7TX?nkZpU| zLH2d?cvyJ#82G*UrtyB})!VL^z!Af>-9Ui-5L3HeE(Z{E0x=g5a|1EYcD-EQ%b(bJ za~Ok|b}&qrN#ga~9+ \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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 }>` | N disabled | Boolean | undefined | make DatePicker to be disabled | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N @@ -57,6 +58,7 @@ cancelRangeSelectLimit | Boolean | false | The default date selection interactio 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-react/blob/develop/src/date-picker/type.ts) | N +disableTime | Function | - | disable time config function。Typescript：`(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | undefined | \- | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N @@ -96,7 +98,7 @@ name | type | default | description | required className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N 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/packages/products/tdesign-react/src/date-picker/date-picker.md b/packages/products/tdesign-react/src/date-picker/date-picker.md index 982930d1..aee35395 100644 --- a/packages/products/tdesign-react/src/date-picker/date-picker.md +++ b/packages/products/tdesign-react/src/date-picker/date-picker.md @@ -13,6 +13,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-react/blob/develop/src/date-picker/type.ts) | N +disableTime | Function | - | 禁用时间项的配置函数，仅在日期时间选择器中可用。TS 类型：`(time: Date) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | undefined | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -57,6 +58,7 @@ cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据 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-react/blob/develop/src/date-picker/type.ts) | N +disableTime | Function | - | 禁用时间项的配置函数，仅在日期区间选择器中开启时间展示时可用。TS 类型：`(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | undefined | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -96,7 +98,7 @@ onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: Mo className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N 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 diff --git a/packages/products/tdesign-react/src/date-picker/type.ts b/packages/products/tdesign-react/src/date-picker/type.ts index 83a0c230..d1e50617 100644 --- a/packages/products/tdesign-react/src/date-picker/type.ts +++ b/packages/products/tdesign-react/src/date-picker/type.ts @@ -38,6 +38,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 }>; /** * 是否禁用组件 */ @@ -200,6 +206,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: Array, + context: { partial: DateRangePickerPartial }, + ) => Partial<{ hour: Array; minute: Array; second: Array }>; /** * 是否禁用组件 */ @@ -357,6 +370,7 @@ export interface TdDatePickerPanelProps | 'value' | 'defaultValue' | 'disableDate' + | 'disableTime' | 'enableTimePicker' | 'firstDayOfWeek' | 'format' diff --git a/packages/products/tdesign-vue-next/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue-next/src/date-picker/date-picker.en-US.md index 6480679a..e5d21d4f 100644 --- a/packages/products/tdesign-vue-next/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue-next/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-next/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 }>` | N disabled | Boolean | undefined | make DatePicker to be disabled | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N @@ -64,6 +65,7 @@ cancelRangeSelectLimit | Boolean | false | The default date selection interactio 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-next/tree/develop/src/date-picker/type.ts) | N +disableTime | Function | - | disable time config function。Typescript：`(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | undefined | \- | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N @@ -113,7 +115,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/packages/products/tdesign-vue-next/src/date-picker/date-picker.md b/packages/products/tdesign-vue-next/src/date-picker/date-picker.md index abd8cb13..0293f7ca 100644 --- a/packages/products/tdesign-vue-next/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue-next/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-next/tree/develop/src/date-picker/type.ts) | N +disableTime | Function | - | 禁用时间项的配置函数，仅在日期时间选择器中可用。TS 类型：`(time: Date) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | undefined | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -64,6 +65,7 @@ cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据 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-next/tree/develop/src/date-picker/type.ts) | N +disableTime | Function | - | 禁用时间项的配置函数，仅在日期区间选择器中开启时间展示时可用。TS 类型：`(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | undefined | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -113,7 +115,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 diff --git a/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts index 1bd0a2c2..01597f41 100644 --- a/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts @@ -25,6 +25,10 @@ export default { disableDate: { type: [Object, Array, Function] as PropType, }, + /** 禁用时间项的配置函数，仅在日期区间选择器中开启时间展示时可用 */ + disableTime: { + type: Function as PropType, + }, /** 是否禁用组件 */ disabled: { type: Boolean, diff --git a/packages/products/tdesign-vue-next/src/date-picker/props.ts b/packages/products/tdesign-vue-next/src/date-picker/props.ts index 72e2cad6..0bfaafd1 100644 --- a/packages/products/tdesign-vue-next/src/date-picker/props.ts +++ b/packages/products/tdesign-vue-next/src/date-picker/props.ts @@ -23,6 +23,10 @@ export default { disableDate: { type: [Object, Array, Function] as PropType, }, + /** 禁用时间项的配置函数，仅在日期时间选择器中可用 */ + disableTime: { + type: Function as PropType, + }, /** 是否禁用组件 */ disabled: { type: Boolean, diff --git a/packages/products/tdesign-vue-next/src/date-picker/type.ts b/packages/products/tdesign-vue-next/src/date-picker/type.ts index cbea98de..b05e9f3b 100644 --- a/packages/products/tdesign-vue-next/src/date-picker/type.ts +++ b/packages/products/tdesign-vue-next/src/date-picker/type.ts @@ -37,6 +37,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 }>; /** * 是否禁用组件 */ @@ -204,6 +210,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: Array, + context: { partial: DateRangePickerPartial }, + ) => Partial<{ hour: Array; minute: Array; second: Array }>; /** * 是否禁用组件 */ @@ -357,6 +370,7 @@ export interface TdDatePickerPanelProps | 'value' | 'defaultValue' | 'disableDate' + | 'disableTime' | 'enableTimePicker' | 'firstDayOfWeek' | 'format' diff --git a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md b/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md index ac8586e7..5df50d3b 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.en-US.md +++ b/packages/products/tdesign-vue/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 }>` | N disabled | Boolean | undefined | make DatePicker to be disabled | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N @@ -64,6 +65,7 @@ cancelRangeSelectLimit | Boolean | false | The default date selection interactio 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 | - | disable time config function。Typescript：`(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | undefined | \- | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N @@ -113,7 +115,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/packages/products/tdesign-vue/src/date-picker/date-picker.md b/packages/products/tdesign-vue/src/date-picker/date-picker.md index 7ce3fec3..708d591c 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-picker.md +++ b/packages/products/tdesign-vue/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 }>` | N disabled | Boolean | undefined | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -64,6 +65,7 @@ cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据 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: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>` | N disabled | Boolean | undefined | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N @@ -113,7 +115,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 diff --git a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts index e0c8c6cd..a15a986f 100644 --- a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts +++ b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts @@ -25,6 +25,10 @@ export default { disableDate: { type: [Object, Array, Function] as PropType, }, + /** 禁用时间项的配置函数，仅在日期区间选择器中开启时间展示时可用 */ + disableTime: { + type: Function as PropType, + }, /** 是否禁用组件 */ disabled: { type: Boolean, diff --git a/packages/products/tdesign-vue/src/date-picker/props.ts b/packages/products/tdesign-vue/src/date-picker/props.ts index 2222cb75..53011c80 100644 --- a/packages/products/tdesign-vue/src/date-picker/props.ts +++ b/packages/products/tdesign-vue/src/date-picker/props.ts @@ -23,6 +23,10 @@ export default { disableDate: { type: [Object, Array, Function] as PropType, }, + /** 禁用时间项的配置函数，仅在日期时间选择器中可用 */ + disableTime: { + type: Function as PropType, + }, /** 是否禁用组件 */ disabled: { type: Boolean, diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts index 60aa7098..d176b758 100644 --- a/packages/products/tdesign-vue/src/date-picker/type.ts +++ b/packages/products/tdesign-vue/src/date-picker/type.ts @@ -37,6 +37,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 }>; /** * 是否禁用组件 */ @@ -199,6 +205,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: Array, + context: { partial: DateRangePickerPartial }, + ) => Partial<{ hour: Array; minute: Array; second: Array }>; /** * 是否禁用组件 */ @@ -347,6 +360,7 @@ export interface TdDatePickerPanelProps | 'value' | 'defaultValue' | 'disableDate' + | 'disableTime' | 'enableTimePicker' | 'firstDayOfWeek' | 'format' diff --git a/packages/scripts/api.json b/packages/scripts/api.json index bb022aec..a95df47d 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -31172,6 +31172,47 @@ "Function" ] }, + { + "id": 1731052685, + "platform_framework": [ + "1", + "2", + "4" + ], + "component": "DatePicker", + "field_category": 1, + "field_name": "disableTime", + "field_type": [ + "32" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "禁用时间项的配置函数，仅在日期时间选择器中可用", + "field_desc_en": "disable time config function", + "field_required": 0, + "event_input": "", + "create_time": "2024-11-08 07:58:05", + "update_time": "2024-11-08 07:58:05", + "event_output": null, + "custom_field_type": "(time: Date) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)", + "Angular(PC)" + ], + "field_type_text": [ + "Function" + ] + }, { "id": 1003, "platform_framework": [ @@ -33679,7 +33720,7 @@ ], "component": "DatePickerPanel", "field_category": 16, - "field_name": "Pick", + "field_name": "Pick", "field_type": [], "field_default_value": "", "field_enum": "", @@ -33955,6 +33996,47 @@ "Function" ] }, + { + "id": 1731055533, + "platform_framework": [ + "1", + "2", + "4" + ], + "component": "DateRangePicker", + "field_category": 1, + "field_name": "disableTime", + "field_type": [ + "32" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "禁用时间项的配置函数，仅在日期区间选择器中开启时间展示时可用", + "field_desc_en": "disable time config function", + "field_required": 0, + "event_input": "", + "create_time": "2024-11-08 08:45:33", + "update_time": "2024-11-08 08:45:33", + "event_output": null, + "custom_field_type": "(times: Array, context: { partial: DateRangePickerPartial }) => Partial<{ hour: Array, minute: Array, second: Array }>", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)", + "Angular(PC)" + ], + "field_type_text": [ + "Function" + ] + }, { "id": 1021, "platform_framework": [