diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index 9c98702a1c..8fe28ed48a 100644
--- a/src/date-picker/DatePicker.tsx
+++ b/src/date-picker/DatePicker.tsx
@@ -11,6 +11,7 @@ import { subtractMonth, addMonth, extractTimeObj, covertToDate } from '../_commo
 import props from './props';
 import TSelectInput from '../select-input';
 import TSinglePanel from './panel/SinglePanel';
+import { useReadonly } from '../hooks/useReadonly';
 
 import type { TdDatePickerProps } from './type';
 import type { DateValue } from './type';
@@ -44,6 +45,7 @@ export default defineComponent({
     const disabled = useDisabled();
     const renderTNodeJSX = useTNodeJSX();
     const { globalConfig } = useConfig('datePicker');
+    const isReadOnly = useReadonly();
 
     const formatRef = computed(() =>
       getDefaultFormat({
@@ -292,7 +294,7 @@ export default defineComponent({
           popupProps={popupProps.value}
           inputProps={inputProps.value}
           placeholder={props.placeholder || globalConfig.value.placeholder[props.mode]}
-          popupVisible={!props.readonly && popupVisible.value}
+          popupVisible={!isReadOnly && popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
           needConfirm={props.needConfirm}
           {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])}