diff --git a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts b/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
deleted file mode 100644
index f495533fbf..0000000000
--- a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { defineComponent, h, inject } from 'vue'
-import { buildProps, definePropType } from '@element-plus/utils'
-import { ROOT_PICKER_INJECTION_KEY } from '@element-plus/tokens'
-import { useNamespace } from '@element-plus/hooks'
-import type { DateCell } from '../date-picker.type'
-
-export default defineComponent({
-  name: 'ElDatePickerCell',
-  props: buildProps({
-    cell: {
-      type: definePropType<DateCell>(Object),
-    },
-  }),
-  setup(props) {
-    const ns = useNamespace('date-table-cell')
-    const picker = inject(ROOT_PICKER_INJECTION_KEY)!
-    return () => {
-      const cell = props.cell
-      if (picker.slots.default) {
-        const list = picker.slots.default(cell).filter((item) => {
-          return (
-            item.patchFlag !== -2 && item.type.toString() !== 'Symbol(Comment)'
-          )
-        })
-        if (list.length) {
-          return list
-        }
-      }
-      return h(
-        'div',
-        {
-          class: ns.b(),
-        },
-        [
-          h(
-            'span',
-            {
-              class: ns.e('text'),
-            },
-            [cell?.text]
-          ),
-        ]
-      )
-    }
-  },
-})
diff --git a/packages/components/date-picker/src/date-picker-com/basic-cell-render.tsx b/packages/components/date-picker/src/date-picker-com/basic-cell-render.tsx
new file mode 100644
index 0000000000..c3f07a4c5d
--- /dev/null
+++ b/packages/components/date-picker/src/date-picker-com/basic-cell-render.tsx
@@ -0,0 +1,32 @@
+import { defineComponent, inject } from 'vue'
+import { ROOT_PICKER_INJECTION_KEY } from '@element-plus/tokens'
+import { useNamespace } from '@element-plus/hooks'
+import { basicCellProps } from '../props/basic-cell'
+
+export default defineComponent({
+  name: 'ElDatePickerCell',
+  props: basicCellProps,
+  setup(props) {
+    const ns = useNamespace('date-table-cell')
+    const { slots } = inject(ROOT_PICKER_INJECTION_KEY)!
+    return () => {
+      const { cell } = props
+      if (slots.default) {
+        const list = slots.default(cell).filter((item) => {
+          return (
+            item.patchFlag !== -2 && item.type.toString() !== 'Symbol(Comment)'
+          )
+        })
+        if (list.length) {
+          return list
+        }
+      }
+
+      return (
+        <div class={ns.b()}>
+          <span class={ns.e('text')}>{cell?.text}</span>
+        </div>
+      )
+    }
+  },
+})
diff --git a/packages/components/date-picker/src/props/basic-cell.ts b/packages/components/date-picker/src/props/basic-cell.ts
new file mode 100644
index 0000000000..312fbd1cbe
--- /dev/null
+++ b/packages/components/date-picker/src/props/basic-cell.ts
@@ -0,0 +1,12 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+
+import type { ExtractPropTypes } from 'vue'
+import type { DateCell } from '../date-picker.type'
+
+export const basicCellProps = buildProps({
+  cell: {
+    type: definePropType<DateCell>(Object),
+  },
+} as const)
+
+export type BasicCellProps = ExtractPropTypes<typeof basicCellProps>