feat(DatePicker): support disableTime API

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,

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,

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,

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"
     />
     <t-date-range-picker
       placeholder="禁用最近 5 天外的日期"
@@ -37,18 +36,14 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
 import dayjs from 'dayjs';
 
-const pickDate = ref('');
-const timePickerProps = computed(() => ({
-  disableTime: () => {
-    if (pickDate.value === dayjs().format('YYYY-MM-DD')) {
-      return {
-        hour: [0, 1, 2, 3, 4, 5, 6],
-      };
-    }
-    return {};
-  },
-}));
+const disableTime = (time) => {
+  if (dayjs(time).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')) {
+    return {
+      hour: [0, 1, 2, 3, 4, 5, 6],
+    };
+  }
+  return {};
+};
 </script>

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"
     />
     <t-date-range-picker
       placeholder="禁用最近 5 天外的日期"
@@ -41,20 +40,16 @@ import dayjs from 'dayjs';
 
 export default {
   data() {
-    return { pickDate: '', dayjs };
+    return { dayjs };
   },
-  computed: {
-    timePickerProps() {
-      return {
-        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 {};
     },
   },
 };

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<DateValue> \| 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<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>`。[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<DateValue> \| 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<number>, minute: Array<number>, second: Array<number> }>`。[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<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | \- | - | extends `Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | N
+`Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'disableTime' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | \- | - | extends `Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'disableTime' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | N
 onCellClick | Function |  | Typescript：`(context: { date: Date, e: MouseEvent }) => void`<br/> | N
 onChange | Function |  | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`<br/> | N
 onConfirm | Function |  | Typescript：`(context: { date: Date, e: MouseEvent }) => void`<br/> | N

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<DateValue> \| 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<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number>  }>`。[详细类型定义](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<DateValue> \| 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<number>, minute: Array<number>, second: Array<number> }>`。[详细类型定义](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<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | \- | - | 继承 `Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` 中的全部属性 | N
+`Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'disableTime' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` | \- | - | 继承 `Pick<DatePickerProps, 'value' \| 'defaultValue' \| 'disableDate' \| 'disableTime' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'timePickerProps'>` 中的全部属性 | N
 onCellClick | Function |  | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`<br/>点击日期单元格时触发 | N
 onChange | Function |  | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同 | N
 onConfirm | Function |  | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`<br/>如果存在“确定”按钮，则点击“确定”按钮时触发 | 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<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` | \- | - | 继承 `Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` 中的全部属性 | N
+`Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'disableTime' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` | \- | - | 继承 `Pick<DateRangePickerProps, 'value'\| 'defaultValue' \| 'disableDate' \| 'disableTime' \| 'enableTimePicker' \| 'firstDayOfWeek' \| 'format' \| 'mode' \| 'presets' \| 'presetsPlacement' \| 'panelPreselection' \| 'timePickerProps'>` 中的全部属性 | N
 onCellClick | Function |  | TS 类型：`(context: { date: Date[], partial: DateRangePickerPartial, e: MouseEvent }) => void`<br/>点击日期单元格时触发 | N
 onChange | Function |  | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], partial: DateRangePickerPartial, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同 | N
 onConfirm | Function |  | TS 类型：`(context: { date: Date[], e: MouseEvent }) => void`<br/>如果存在“确定”按钮，则点击“确定”按钮时触发 | N

src/date-picker/date-range-picker-props.ts

@@ -23,6 +23,10 @@ export default {
   disableDate: {
     type: [Object, Array, Function] as PropType<TdDateRangePickerProps['disableDate']>,
   },
+  /** 禁用时间项的配置函数 */
+  disableTime: {
+    type: Function as PropType<TdDateRangePickerProps['disableTime']>,
+  },
   /** 是否禁用组件 */
   disabled: Boolean,
   /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */

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,

src/date-picker/panel/RangePanel.tsx

@@ -1,11 +1,14 @@
 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';
 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<TdDateRangePickerProps['disableDate']>,
+    disableTime: Function as PropType<TdDateRangePickerProps['disableTime']>,
     mode: {
       type: String as PropType<TdDateRangePickerProps['mode']>,
       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,

src/date-picker/panel/SinglePanel.tsx

@@ -1,16 +1,20 @@
 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';
 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<TdDatePickerProps['disableDate']>,
+    disableTime: Function as PropType<TdDatePickerProps['disableTime']>,
     mode: {
       type: String as PropType<TdDatePickerProps['mode']>,
       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,

src/date-picker/props.ts

@@ -23,6 +23,10 @@ export default {
   disableDate: {
     type: [Object, Array, Function] as PropType<TdDatePickerProps['disableDate']>,
   },
+  /** 禁用时间项的配置函数 */
+  disableTime: {
+    type: Function as PropType<TdDatePickerProps['disableTime']>,
+  },
   /** 是否禁用组件 */
   disabled: Boolean,
   /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */