diff --git a/src/time-picker/_example/disabled.vue b/src/time-picker/_example/disabled.vue index 7adbdcb0a..9045b2a91 100644 --- a/src/time-picker/_example/disabled.vue +++ b/src/time-picker/_example/disabled.vue @@ -4,6 +4,8 @@

禁用指定时间

+

禁用指定时间 同时展示禁用的时间选项

+ diff --git a/src/time-picker/panel/single-panel.tsx b/src/time-picker/panel/single-panel.tsx index 5dbdfd18c..5dacb513d 100644 --- a/src/time-picker/panel/single-panel.tsx +++ b/src/time-picker/panel/single-panel.tsx @@ -53,7 +53,7 @@ export default defineComponent({ const maskRef = ref(null); const dayjsValue = computed(() => { - const isStepsSet = !!steps.value.filter((v) => v > 1).length; + const isStepsSet = !!steps.value.filter((v: number) => v > 1).length; if (value.value) return dayjs(value.value, format.value); @@ -148,10 +148,11 @@ export default defineComponent({ return props.hideDisabledTime && !!props.disableTime ? colList.filter((t) => { - const params: [number, number, number] = [ + const params: [number, number, number, number] = [ dayjsValue.value.hour(), dayjsValue.value.minute(), dayjsValue.value.second(), + dayjsValue.value.millisecond(), ]; params[colIdx] = Number(t); return !props @@ -215,7 +216,11 @@ export default defineComponent({ if (!dayjs(dayjsValue.value).isValid() || (value.value && !dayjs(value.value, format.value, true).isValid())) return; if (timeArr.includes(col)) { - if (timeItemCanUsed(col, val)) formattedVal = dayjsValue.value[col]?.(val).format(format.value); + if (timeItemCanUsed(col, val)) { + formattedVal = dayjsValue.value[col]?.(val).format(format.value); + } else { + formattedVal = dayjsValue.value.format(format.value); + } } else { const currentHour = dayjsValue.value.hour(); if (meridiem === AM && currentHour >= 12) { diff --git a/src/time-picker/panel/time-picker-panel.tsx b/src/time-picker/panel/time-picker-panel.tsx index 64ce896e5..cee0d92d3 100644 --- a/src/time-picker/panel/time-picker-panel.tsx +++ b/src/time-picker/panel/time-picker-panel.tsx @@ -27,7 +27,7 @@ export default defineComponent({ const panelClassName = usePrefixClass('time-picker__panel'); const triggerScroll = ref(false); const { global } = useConfig('timePicker'); - const showNowTimeBtn = computed(() => !!props.steps.filter((v) => v > 1).length); + const showNowTimeBtn = computed(() => !!props.steps.filter((v: number) => v > 1).length); const defaultValue = computed(() => { const isStepsSet = showNowTimeBtn.value; const formattedValue = dayjs(props.value, props.format); @@ -111,6 +111,7 @@ export default defineComponent({ disableTime: this.disableTime, resetTriggerScroll: this.resetTriggerScroll, isShowPanel: this.isShowPanel, + hideDisabledTime: this.hideDisabledTime, }, }} /> diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts index 67d9ae1a9..3c8e6cdf1 100644 --- a/src/time-picker/props.ts +++ b/src/time-picker/props.ts @@ -12,7 +12,7 @@ export default { allowInput: Boolean, /** 是否允许清除选中值 */ clearable: Boolean, - /** 禁用时间项 */ + /** 禁用时间项的配置函数 */ disableTime: { type: Function as PropType, }, diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index bb9c48d6b..fff7569a2 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -7,7 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N clearable | Boolean | false | \- | N -disableTime | Function | - | Typescript：`(h: number, m: number, s: number) => Partial<{ hour: Array, minute: Array, second: Array }>` | N +disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | - | \- | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N @@ -15,13 +15,13 @@ 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 -size | String | medium | options：small/medium/large | N -status | String | default | options：default/success/warning/error | 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 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 | - | `v-model` is supported。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N -onBlur | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N +onBlur | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: TimePickerValue) => void`
| N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onFocus | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N @@ -55,8 +55,8 @@ placeholder | String / Array | undefined | Typescript：`string \| Array 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：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N -size | String | medium | options：small/medium/large | N -status | String | default | options：default/success/warning/error | 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 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：`TimeRangeValue` `type TimeRangeValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index 9d36d9e93..9749a3478 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -7,7 +7,7 @@ -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许直接输入时间 | N clearable | Boolean | false | 是否允许清除选中值 | N -disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number) => Partial<{ hour: Array, minute: Array, second: Array }>` | N +disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N disabled | Boolean | - | 是否禁用组件 | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N @@ -21,7 +21,7 @@ steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N value | String | - | 选中值。支持语法糖 `v-model`。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N -onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
当输入框失去焦点时触发，value 表示组件当前有效值 | N +onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
当输入框失去焦点时触发，value 表示组件当前有效值 | N onChange | Function | | TS 类型：`(value: TimePickerValue) => void`
选中值发生变化时触发 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
面板关闭时触发 | N onFocus | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
输入框获得焦点时触发，value 表示组件当前有效值 | N diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index 226a8cf59..045c66479 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -22,13 +22,14 @@ export interface TdTimePickerProps { */ clearable?: boolean; /** - * 禁用时间项 + * 禁用时间项的配置函数 */ disableTime?: ( h: number, m: number, s: number, - ) => Partial<{ hour: Array; minute: Array; second: Array }>; + ms: number, + ) => Partial<{ hour: Array; minute: Array; second: Array; millisecond: Array }>; /** * 是否禁用组件 */ diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 68c680b5d..b2c06149b 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -134479,6 +134479,66 @@ exports[`csr snapshot test > csr test ./src/time-picker/_example/disabled.vue 1` +
+

+ 禁用指定时间 同时展示禁用的时间选项 +

+
+
+
+
+
+
+
+ + + + + + + +
+
+
+
+
`; diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap index 9b79b455a..baaa3d4c7 100644 --- a/test/snap/__snapshots__/ssr.test.js.snap +++ b/test/snap/__snapshots__/ssr.test.js.snap @@ -1105,7 +1105,7 @@ exports[`ssr snapshot test > renders ./src/time-picker/_example/base.vue correct exports[`ssr snapshot test > renders ./src/time-picker/_example/clearable.vue correctly 1`] = `"

具备清空按钮

禁止清空按钮

"`; -exports[`ssr snapshot test > renders ./src/time-picker/_example/disabled.vue correctly 1`] = `"

禁用整个选择器

禁用指定时间

"`; +exports[`ssr snapshot test > renders ./src/time-picker/_example/disabled.vue correctly 1`] = `"

禁用整个选择器

禁用指定时间

禁用指定时间 同时展示禁用的时间选项

"`; exports[`ssr snapshot test > renders ./src/time-picker/_example/format.vue correctly 1`] = `"
"`;