From 5ce46fac90d1b00a72ed16958fba8ce473617f5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Fri, 6 Dec 2024 04:35:06 +0800
Subject: [PATCH 1/2] feat(TimePicker): support `readonly`

---
 src/time-picker/props.ts                   | 5 +++++
 src/time-picker/time-picker.tsx            | 2 +-
 src/time-picker/time-range-picker-props.ts | 5 +++++
 src/time-picker/time-range-picker.tsx      | 5 ++++-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts
index b6dd3b66f4..acf9db8d4e 100644
--- a/src/time-picker/props.ts
+++ b/src/time-picker/props.ts
@@ -54,6 +54,11 @@ export default {
   presets: {
     type: Object as PropType<TdTimePickerProps['presets']>,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 透传 SelectInput 筛选器输入框组件的全部属性 */
   selectInputProps: {
     type: Object as PropType<TdTimePickerProps['selectInputProps']>,
diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
index e077b31474..4b2052b800 100755
--- a/src/time-picker/time-picker.tsx
+++ b/src/time-picker/time-picker.tsx
@@ -110,7 +110,7 @@ export default defineComponent({
           class={inputClasses.value}
           label={props.label}
           suffixIcon={() => <TimeIcon />}
-          popupVisible={isShowPanel.value}
+          popupVisible={!props.readonly && isShowPanel.value}
           onInputChange={handleInputChange}
           onBlur={handleInputBlur}
           onPopupVisibleChange={handleShowPopup}
diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts
index 74d11e9849..493e765775 100644
--- a/src/time-picker/time-range-picker-props.ts
+++ b/src/time-picker/time-range-picker-props.ts
@@ -59,6 +59,11 @@ export default {
   rangeInputProps: {
     type: Object as PropType<TdTimeRangePickerProps['rangeInputProps']>,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 尺寸 */
   size: {
     type: String as PropType<TdTimeRangePickerProps['size']>,
diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
index 5ee06d9a25..4ed32d55cd 100644
--- a/src/time-picker/time-range-picker.tsx
+++ b/src/time-picker/time-range-picker.tsx
@@ -19,6 +19,7 @@ import useVModel from '../hooks/useVModel';
 import { useCommonClassName, useConfig, usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import { useDisabled } from '../hooks/useDisabled';
+import { useReadonly } from '../hooks/useReadonly';
 
 dayjs.extend(customParseFormat);
 
@@ -37,6 +38,7 @@ export default defineComponent({
     const currentPanelIdx = ref(undefined);
     const currentValue = ref<Array<string>>(TIME_PICKER_EMPTY);
     const isShowPanel = ref(false);
+    const isReadOnly = useReadonly();
 
     const inputClasses = computed(() => [
       `${COMPONENT_NAME.value}__group`,
@@ -48,6 +50,7 @@ export default defineComponent({
     const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange as any);
 
     const handleShowPopup = (visible: boolean, context: any) => {
+      if (isReadOnly.value) return;
       // 输入框点击不关闭面板
       if (context.trigger === 'trigger-element-click') {
         isShowPanel.value = true;
@@ -173,7 +176,7 @@ export default defineComponent({
             onClick: handleClick,
             onFocus: handleFocus,
             onBlur: handleInputBlur,
-            readonly: !allowInput.value,
+            readonly: props.readonly || !allowInput.value,
             activeIndex: currentPanelIdx.value,
             ...props.rangeInputProps,
           }}

From 74565d37f4b54001404133b8a67e00afc0e8f9fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=20Cai?= <jimmyrss1102@gmail.com>
Date: Fri, 6 Dec 2024 17:13:25 +0800
Subject: [PATCH 2/2] fix: use global readonly

---
 src/time-picker/time-picker.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
index 4b2052b800..af21eed792 100755
--- a/src/time-picker/time-picker.tsx
+++ b/src/time-picker/time-picker.tsx
@@ -17,6 +17,7 @@ import { useDisabled } from '../hooks/useDisabled';
 import { useCommonClassName, useConfig, usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import { TdTimePickerProps } from './type';
+import { useReadonly } from '../hooks/useReadonly';
 
 dayjs.extend(customParseFormat);
 
@@ -34,6 +35,7 @@ export default defineComponent({
 
     const currentValue = ref('');
     const isShowPanel = ref(false);
+    const isReadonly = useReadonly();
 
     const { value, modelValue } = toRefs(props);
     const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
@@ -110,7 +112,7 @@ export default defineComponent({
           class={inputClasses.value}
           label={props.label}
           suffixIcon={() => <TimeIcon />}
-          popupVisible={!props.readonly && isShowPanel.value}
+          popupVisible={!isReadonly && isShowPanel.value}
           onInputChange={handleInputChange}
           onBlur={handleInputBlur}
           onPopupVisibleChange={handleShowPopup}