fix(DatePicker): 修复日期选择器在表单禁用后还能点击的问题 (#1117)

* fix(DatePicker): 修复日期选择器在表单禁用后还能点击

* fix: 修复IDE自动引入导致错误

src/date-picker/DatePicker.tsx

@@ -2,6 +2,7 @@ import { defineComponent, watchEffect, computed } from 'vue';
 import dayjs from 'dayjs';
 import { usePrefixClass } from '../hooks/useConfig';
 
+import { useFormDisabled } from '../form/hooks';
 import useSingle from './hooks/useSingle';
 import useFormat from './hooks/useFormat';
 import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
@@ -32,6 +33,8 @@ export default defineComponent({
       onChange,
     } = useSingle(props);
 
+    const disabled = useFormDisabled();
+
     const formatRef = computed(() =>
       useFormat({
         mode: props.mode,
@@ -194,7 +197,7 @@ export default defineComponent({
     return () => (
       <div class={COMPONENT_NAME.value}>
         <TSelectInput
-          disabled={props.disabled}
+          disabled={disabled.value}
           value={inputValue.value}
           popupProps={popupProps.value}
           inputProps={inputProps.value}

src/date-picker/DateRangePicker.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, watchEffect, computed, ref } from 'vue';
 import dayjs from 'dayjs';
+import { useFormDisabled } from '../form/hooks';
 import { usePrefixClass } from '../hooks/useConfig';
 
 import props from './date-range-picker-props';
@@ -33,6 +34,8 @@ export default defineComponent({
       onChange,
     } = useRange(props);
 
+    const disabled = useFormDisabled();
+
     const formatRef = computed(() =>
       useFormat({
         mode: props.mode,
@@ -298,7 +301,7 @@ export default defineComponent({
     return () => (
       <div class={COMPONENT_NAME.value}>
         <TRangeInputPopup
-          disabled={props.disabled}
+          disabled={disabled.value}
           inputValue={inputValue.value as string[]}
           popupProps={popupProps.value}
           rangeInputProps={rangeInputProps.value}

src/date-picker/hooks/useSingle.tsx

@@ -2,6 +2,7 @@ import { ref, computed, watchEffect } from 'vue';
 import { CalendarIcon } from 'tdesign-icons-vue-next';
 import dayjs from 'dayjs';
 
+import { useFormDisabled } from '../../form/hooks';
 import { usePrefixClass, useConfig } from '../../hooks/useConfig';
 import { TdDatePickerProps, DateValue } from '../type';
 import useFormat from './useFormat';
@@ -10,6 +11,7 @@ import useSingleValue from './useSingleValue';
 export default function useSingle(props: TdDatePickerProps) {
   const COMPONENT_NAME = usePrefixClass('date-picker');
   const { global } = useConfig('datePicker');
+  const disabled = useFormDisabled();
 
   const inputRef = ref();
 
@@ -89,10 +91,11 @@ export default function useSingle(props: TdDatePickerProps) {
   const popupProps = computed(() => ({
     expandAnimation: true,
     ...props.popupProps,
-    disabled: props.disabled,
+    disabled: disabled.value,
     overlayStyle: props.popupProps?.overlayStyle ?? { width: 'auto' },
     overlayClassName: [props.popupProps?.overlayClassName, `${COMPONENT_NAME.value}__panel-container`],
     onVisibleChange: (visible: boolean) => {
+      if (disabled) return;
       popupVisible.value = visible;
       if (!visible) {
         isHoverCell.value = false;