diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index e0bcc1b77..fd193fdcc 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -21,6 +21,7 @@ import { initYearMonthTime, } from '../_common/js/date-picker/format'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; +import useFormDisabled from '../hooks/useFormDisabled'; export default defineComponent({ name: 'TDateRangePicker', @@ -28,6 +29,7 @@ export default defineComponent({ setup(props, { emit }) { const COMPONENT_NAME = usePrefixClass('date-range-picker'); const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon }); + const { formDisabled } = useFormDisabled(); const { inputValue, @@ -51,6 +53,7 @@ export default defineComponent({ format: props.format, valueType: props.valueType, })); + const isDisabled = computed(() => formDisabled.value || props.disabled); // 记录面板是否选中过 const isSelected = ref(false); @@ -416,6 +419,7 @@ export default defineComponent({ popupVisible, panelProps, CalendarIcon, + isDisabled, }; }, render() { @@ -440,7 +444,7 @@ export default defineComponent({ return (
renderTNode('valueDisplay', { params: this.valueDisplayParams }), clearable: this.clearable, - disabled: this.disabled, + disabled: this.isDisabled, label: this.renderLabel, suffixIcon: this.renderSuffixIcon, placeholder: this.placeholderText, diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx index 1238e5047..8e0bccb75 100755 --- a/src/time-picker/time-picker.tsx +++ b/src/time-picker/time-picker.tsx @@ -13,6 +13,7 @@ import type { InputProps } from '../input'; import useVModel from '../hooks/useVModel'; import { useConfig, usePrefixClass } from '../hooks/useConfig'; import { useGlobalIcon } from '../hooks/useGlobalIcon'; +import useFormDisabled from '../hooks/useFormDisabled'; import props from './props'; @@ -25,10 +26,12 @@ export default defineComponent({ const { classPrefix } = useConfig('classPrefix'); const componentName = usePrefixClass('time-picker'); const { TimeIcon } = useGlobalIcon({ TimeIcon: TdTimeIcon }); + const { formDisabled } = useFormDisabled(); const currentValue = ref(''); const isShowPanel = ref(false); const { global } = useConfig('timePicker'); + const isDisabled = computed(() => formDisabled.value || props.disabled); const { value } = toRefs(props); const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange, 'change'); @@ -116,6 +119,7 @@ export default defineComponent({ global, currentValue, TimeIcon, + isDisabled, }; }, render() { @@ -129,7 +133,7 @@ export default defineComponent({ onClear: this.handleClear, onBlur: this.handleInputBlur, onInputChange: this.handleInputChange, - disabled: this.disabled, + disabled: this.isDisabled, clearable: this.clearable, allowInput: this.allowInput, class: this.inputClasses, diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx index e6430a79d..55de55588 100644 --- a/src/time-picker/time-range-picker.tsx +++ b/src/time-picker/time-range-picker.tsx @@ -19,6 +19,7 @@ import type { TimeRangePickerPartial } from './type'; import useVModel from '../hooks/useVModel'; import { useConfig, usePrefixClass } from '../hooks/useConfig'; import { useGlobalIcon } from '../hooks/useGlobalIcon'; +import useFormDisabled from '../hooks/useFormDisabled'; dayjs.extend(customParseFormat); @@ -36,6 +37,7 @@ export default defineComponent({ const { global } = useConfig('timePicker'); const { classPrefix } = useConfig('classPrefix'); const { TimeIcon } = useGlobalIcon({ TimeIcon: TdTimeIcon }); + const { formDisabled } = useFormDisabled(); const currentPanelIdx = ref(undefined); const currentValue = ref>(TIME_PICKER_EMPTY); @@ -47,6 +49,8 @@ export default defineComponent({ [`${classPrefix.value}-is-focused`]: isShowPanel.value, }, ]); + const isDisabled = computed(() => formDisabled.value || props.disabled); + const { value, format } = toRefs(props); const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange, 'change'); @@ -150,6 +154,7 @@ export default defineComponent({ handleInputBlur, handleTimeChange, TimeIcon, + isDisabled, }; }, render() { @@ -161,7 +166,7 @@ export default defineComponent({ {...{ props: { onInputChange: this.handleInputChange, - disabled: this.disabled, + disabled: this.isDisabled, popupVisible: this.isShowPanel, inputValue: this.isShowPanel ? this.currentValue : this.innerValue ?? TIME_PICKER_EMPTY, popupProps: {