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..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={isShowPanel.value}
+          popupVisible={!isReadonly && 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,
           }}