diff --git a/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue b/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue
index 8689e9fb19..ab932dc039 100644
--- a/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue
+++ b/packages/nc-gui/components/cell/ReadOnlyDateTimePicker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ReadonlyInj, provide, ref, EditModeInj, ActiveCellInj } from '#imports'
+import { ActiveCellInj, EditModeInj, ReadonlyInj, provide, ref } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -12,9 +12,11 @@ provide(ReadonlyInj, ref(true))
 provide(EditModeInj, ref(true))
 
 provide(ActiveCellInj, ref(true))
-
 </script>
 
 <template>
-  <LazyCellDateTimePicker :model-value="modelValue" :is-pk="false" />
+  <div class="relative">
+    <LazyCellDateTimePicker class="z-0" :model-value="modelValue" :is-pk="false" />
+    <div class="w-full h-full z-1 absolute top-0 left-0"></div>
+  </div>
 </template>