refactor(DatePicker): useDisableDate to use common isEnabledDate (#5119)

fix(date-picker): disable date range error
chore: remove unnecessary explicit type declarations

close #4927

Author: RSS1102

packages/components/date-picker/components/panel/RangePanel.tsx

@@ -79,15 +79,15 @@ export default defineComponent({
     const startTableData = computed(() =>
       useTableData({
         isRange: true,
-        start: props.value[0] ? parseToDayjs(props.value[0] as string, format.value).toDate() : undefined,
-        end: props.value[1] ? parseToDayjs(props.value[1] as string, format.value).toDate() : undefined,
+        start: props.value[0] ? parseToDayjs(props.value[0], format.value).toDate() : undefined,
+        end: props.value[1] ? parseToDayjs(props.value[1], format.value).toDate() : undefined,
         hoverStart:
           !hidePreselection && props.hoverValue[0]
-            ? parseToDayjs(props.hoverValue[0] as string, format.value).toDate()
+            ? parseToDayjs(props.hoverValue[0], format.value).toDate()
             : undefined,
         hoverEnd:
           !hidePreselection && props.hoverValue[1]
-            ? parseToDayjs(props.hoverValue[1] as string, format.value).toDate()
+            ? parseToDayjs(props.hoverValue[1], format.value).toDate()
             : undefined,
         year: props.year[0],
         month: props.month[0],
@@ -101,15 +101,15 @@ export default defineComponent({
     const endTableData = computed(() =>
       useTableData({
         isRange: true,
-        start: props.value[0] ? parseToDayjs(props.value[0] as string, format.value).toDate() : undefined,
-        end: props.value[1] ? parseToDayjs(props.value[1] as string, format.value).toDate() : undefined,
+        start: props.value[0] ? parseToDayjs(props.value[0], format.value).toDate() : undefined,
+        end: props.value[1] ? parseToDayjs(props.value[1], format.value).toDate() : undefined,
         hoverStart:
           !hidePreselection && props.hoverValue[0]
-            ? parseToDayjs(props.hoverValue[0] as string, format.value).toDate()
+            ? parseToDayjs(props.hoverValue[0], format.value).toDate()
             : undefined,
         hoverEnd:
           !hidePreselection && props.hoverValue[1]
-            ? parseToDayjs(props.hoverValue[1] as string, format.value).toDate()
+            ? parseToDayjs(props.hoverValue[1], format.value).toDate()
             : undefined,
         year: props.year[1],
         month: props.month[1],

packages/components/date-picker/hooks/useDisableDate.ts

@@ -1,12 +1,7 @@
-import dayjs from 'dayjs';
-import { isArray } from 'lodash-es';
-import { isFunction } from 'lodash-es';
 import { isObject } from 'lodash-es';
-import dayJsIsBetween from 'dayjs/plugin/isBetween';
-
-dayjs.extend(dayJsIsBetween);
-
+import dayjs from 'dayjs';
 import type { TdDatePickerProps, TdDateRangePickerProps } from '../type';
+import { isEnabledDate } from '@tdesign/common-js/date-picker/utils';
 
 export interface disableDateProps {
   disableDate?: TdDatePickerProps['disableDate'] | TdDateRangePickerProps['disableDate'];
@@ -17,60 +12,15 @@ export interface disableDateProps {
 }
 
 export function useDisableDate(props: disableDateProps) {
+  const { disableDate, format, mode, start, end } = props;
+
   return {
-    disableDate: (value: Date) =>
-      !isEnabled({ disableDate: props.disableDate, format: props.format, mode: props.mode, value }),
+    disableDate: (value: Date) => !isEnabledDate({ disableDate, format, mode, value }),
     minDate:
-      isObject(props.disableDate) && 'before' in props.disableDate ? new Date(props.disableDate.before) : props.start,
+      isObject(disableDate) && 'before' in disableDate
+        ? new Date(dayjs(disableDate.before).startOf('day').format())
+        : start,
     maxDate:
-      isObject(props.disableDate) && 'after' in props.disableDate ? new Date(props.disableDate.after) : props.end,
+      isObject(disableDate) && 'after' in disableDate ? new Date(dayjs(disableDate.after).endOf('day').format()) : end,
   };
 }
-
-function isEnabled(props: any): boolean {
-  if (!props.disableDate) return true;
-
-  let isEnabled = true;
-  // 值类型为 Function 则表示返回值为 true 的日期会被禁用
-  if (isFunction(props.disableDate)) {
-    return !props.disableDate(props.value);
-  }
-
-  // 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。
-  if (isArray(props.disableDate)) {
-    let isIncludes = false;
-    const formatedDisabledDate = props.disableDate.map((item: string) => dayjs(item, props.format));
-    formatedDisabledDate.forEach((item: any) => {
-      if (item.isSame(dayjs(props.value))) {
-        isIncludes = true;
-      }
-    });
-    return !isIncludes;
-  }
-
-  // { from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。
-  if (props.disableDate.from && props.disableDate.to) {
-    const compareMin = dayjs(new Date(props.disableDate.from));
-    const compareMax = dayjs(new Date(props.disableDate.to));
-
-    return !dayjs(props.value).isBetween(compareMin, compareMax, props.mode, '[]');
-  }
-
-  const min = props.disableDate.before ? new Date(props.disableDate.before) : null;
-  const max = props.disableDate.after ? new Date(props.disableDate.after) : null;
-
-  // { before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。
-  if (max && min) {
-    const compareMin = dayjs(new Date(min));
-    const compareMax = dayjs(new Date(max));
-
-    isEnabled = dayjs(props.value).isBetween(compareMin, compareMax, props.mode, '[]');
-  } else if (min) {
-    const compareMin = dayjs(new Date(min));
-    isEnabled = !dayjs(props.value).isBefore(compareMin, props.mode);
-  } else if (max) {
-    const compareMax = dayjs(new Date(max));
-    isEnabled = !dayjs(props.value).isAfter(compareMax, props.mode);
-  }
-  return isEnabled;
-}