diff --git a/src/_common b/src/_common
index c261efa95..becfba8b1 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit c261efa959465cb49f85843761e659281b6a2b88
+Subproject commit becfba8b1e450af231fe6ed80b16fcae2d56f27a
diff --git a/src/date-time-picker/__test__/index.test.jsx b/src/date-time-picker/__test__/index.test.jsx
index b5b883a8a..dc5d3ccd6 100644
--- a/src/date-time-picker/__test__/index.test.jsx
+++ b/src/date-time-picker/__test__/index.test.jsx
@@ -3,8 +3,8 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import dayjs from 'dayjs';
 
-import DateTimePicker from '../date-time-picker.vue';
-import PickerItem from '../../picker/picker-item.vue';
+import DateTimePicker from '../date-time-picker';
+import PickerItem from '../../picker/picker-item';
 import { DEFAULT_ITEM_HEIGHT, ANIMATION_TIME_LIMIT } from '../../picker/picker.class';
 
 const makeTouch = (el, eventName, touchPosition) => {
@@ -139,7 +139,7 @@ describe('DateTimePicker', () => {
           start: '2023-06-13'
         },
       });
-      expect(wrapper.vm.valueOfPicker).toStrictEqual(['10', '0', '0'])
+      expect(wrapper.vm.value).toStrictEqual('10:00:00')
     })
 
     it(': start && end ', async () => {
diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.tsx
similarity index 88%
rename from src/date-time-picker/date-time-picker.vue
rename to src/date-time-picker/date-time-picker.tsx
index 4be7d610c..1f164c55e 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.tsx
@@ -1,22 +1,8 @@
-<template>
-  <t-picker
-    :class="className"
-    :value="valueOfPicker"
-    :title="title"
-    :confirm-btn="confirmButtonText"
-    :cancel-btn="cancelButtonText"
-    :columns="columns"
-    @confirm="onConfirm"
-    @cancel="onCancel"
-    @pick="onPick"
-  />
-</template>
-
-<script lang="ts">
 import { ref, computed, defineComponent, toRefs, watch, nextTick } from 'vue';
 import dayjs, { Dayjs, UnitType } from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import objectSupport from 'dayjs/plugin/objectSupport';
 import isArray from 'lodash/isArray';
 
 import config from '../config';
@@ -29,25 +15,17 @@ import { useConfig } from '../config-provider/useConfig';
 
 dayjs.extend(weekday);
 dayjs.extend(customParseFormat);
+dayjs.extend(objectSupport);
 
 const { prefix } = config;
 const name = `${prefix}-date-time-picker`;
 
-const precisionRankRecord: Record<string, number> = {
-  year: 0,
-  month: 1,
-  date: 2,
-  hour: 3,
-  minute: 4,
-  second: 5,
-};
-
 export default defineComponent({
   name,
   components: { TPicker },
   props: DateTimePickerProps,
   emits: ['change', 'cancel', 'confirm', 'pick', 'update:modelValue', 'update:value'],
-  setup(props: any) {
+  setup(props) {
     const { globalConfig } = useConfig('dateTimePicker');
     const className = computed(() => [`${name}`]);
     const { value } = toRefs(props);
@@ -60,6 +38,7 @@ export default defineComponent({
     const title = computed(() => {
       return props.title || globalConfig.value.title;
     });
+
     const confirmButtonText = computed(() => props.confirmBtn || globalConfig.value.confirm);
     const cancelButtonText = computed(() => props.cancelBtn || globalConfig.value.cancel);
     const normalize = (val: string | number, defaultDay: Dayjs) =>
@@ -84,7 +63,6 @@ export default defineComponent({
         const dateStr = dayjs(start.value).format('YYYY-MM-DD');
         currentValue = `${dateStr} ${currentValue}`;
       }
-
       return currentValue && dayjs(currentValue).isValid() ? rationalize(dayjs(currentValue)) : start.value;
     };
     const curDate = ref(calcDate(innerValue.value));
@@ -174,9 +152,15 @@ export default defineComponent({
       return ret;
     });
 
-    const onConfirm = () => {
-      props.onConfirm?.(dayjs(curDate.value).format(props.format));
-      setDateTimePickerValue(dayjs(curDate.value).format(props.format));
+    const onConfirm = (value: string[]) => {
+      const dayObject = value.reduce((map, cur, index) => {
+        const type = meaningColumn.value[index];
+        map[type] = cur;
+        return map;
+      }, {});
+      const cur = dayjs(dayObject);
+      props.onConfirm?.(dayjs(cur || curDate.value).format(props.format));
+      setDateTimePickerValue(dayjs(cur || curDate.value).format(props.format));
     };
 
     const onCancel = (context: { e: MouseEvent }) => {
@@ -196,19 +180,20 @@ export default defineComponent({
       curDate.value = calcDate(val);
     });
 
-    return {
-      className,
-      confirmButtonText,
-      cancelButtonText,
-      title,
-      start,
-      end,
-      valueOfPicker,
-      columns,
-      onConfirm,
-      onCancel,
-      onPick,
+    return () => {
+      return (
+        <t-picker
+          class={className.value}
+          value={valueOfPicker.value}
+          title={title.value}
+          confirm-btn={confirmButtonText.value}
+          cancel-btn={cancelButtonText.value}
+          columns={columns.value}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          onPick={onPick}
+        />
+      );
     };
   },
 });
-</script>
diff --git a/src/date-time-picker/index.ts b/src/date-time-picker/index.ts
index a094af096..2efe27cea 100644
--- a/src/date-time-picker/index.ts
+++ b/src/date-time-picker/index.ts
@@ -1,4 +1,4 @@
-import DateTimePicker from './date-time-picker.vue';
+import DateTimePicker from './date-time-picker';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index 627ca3b1d..fb2735d8c 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -73,7 +73,9 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >
@@ -262,7 +264,9 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >
@@ -367,7 +371,9 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >
@@ -808,7 +814,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -913,7 +921,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -1102,7 +1112,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -1305,7 +1317,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -1485,7 +1499,9 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >
diff --git a/src/picker/__test__/index.test.jsx b/src/picker/__test__/index.test.jsx
index 05d288f78..589359c73 100644
--- a/src/picker/__test__/index.test.jsx
+++ b/src/picker/__test__/index.test.jsx
@@ -1,8 +1,8 @@
 import { nextTick, ref } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import Picker from '../picker.vue';
-import PickerItem from '../picker-item.vue';
+import Picker from '../picker';
+import PickerItem from '../picker-item';
 
 import { DEFAULT_ITEM_HEIGHT, ANIMATION_TIME_LIMIT } from '../picker.class';
 
diff --git a/src/picker/cascade.vue b/src/picker/cascade.vue
index 7ed4d5f2b..c5a49616d 100644
--- a/src/picker/cascade.vue
+++ b/src/picker/cascade.vue
@@ -10,7 +10,7 @@ import { computed, defineComponent, ref } from 'vue';
 import config from '../config';
 import PickerProps from './props';
 import { PickerColumn, PickerValue } from './type';
-import Picker from './picker.vue';
+import Picker from './picker';
 
 const { prefix } = config;
 const name = `${prefix}-cascade`;
diff --git a/src/picker/index.ts b/src/picker/index.ts
index 8d58416fd..95e1794d0 100644
--- a/src/picker/index.ts
+++ b/src/picker/index.ts
@@ -1,4 +1,4 @@
-import _Picker from './picker.vue';
+import _Picker from './picker';
 import _Cascade from './cascade.vue';
 import { withInstall, WithInstallType } from '../shared';
 
diff --git a/src/picker/picker-item.vue b/src/picker/picker-item.tsx
similarity index 72%
rename from src/picker/picker-item.vue
rename to src/picker/picker-item.tsx
index f83b898e0..4950acbbf 100644
--- a/src/picker/picker-item.vue
+++ b/src/picker/picker-item.tsx
@@ -1,12 +1,3 @@
-<template>
-  <ul ref="root" :class="className">
-    <li v-for="(option, index) in options" :key="index" :class="itemClassName">
-      {{ renderLabel ? renderLabel(option) : option.label }}
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
 import { ref, computed, onMounted, toRefs, defineComponent, PropType, watch } from 'vue';
 import config from '../config';
 import Picker from './picker.class';
@@ -46,7 +37,6 @@ export default defineComponent({
     };
 
     const className = computed(() => `${name}`);
-    const wrapperClassName = computed(() => [`${name}__wrapper`]);
     const itemClassName = computed(() => [`${name}__item`]);
     const setIndex = (index: number) => {
       if (picker) {
@@ -78,15 +68,17 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      picker = new Picker({
-        el: root.value,
-        defaultIndex: getIndexByValue(props.value) || 0,
-        onChange: (index: number) => {
-          const curItem = props.options[index];
-          const changeValue = { value: curItem.value, index };
-          props.onPick?.(changeValue);
-        },
-      });
+      if (root.value) {
+        picker = new Picker({
+          el: root.value,
+          defaultIndex: getIndexByValue(props.value) || 0,
+          onChange: (index: number) => {
+            const curItem = props.options[index];
+            const changeValue = { value: curItem.value, index };
+            props.onPick?.(changeValue);
+          },
+        });
+      }
     });
 
     watch(
@@ -97,13 +89,16 @@ export default defineComponent({
       { flush: 'post', deep: true },
     );
 
-    return {
-      root,
-      className,
-      wrapperClassName,
-      itemClassName,
-      ...toRefs(props),
+    return () => {
+      return (
+        <ul ref={root} class={className.value}>
+          {(props.options || []).map((option, index) => (
+            <li key={index} class={itemClassName.value}>
+              {props.renderLabel ? props.renderLabel(option) : option.label}
+            </li>
+          ))}
+        </ul>
+      );
     };
   },
 });
-</script>
diff --git a/src/picker/picker.vue b/src/picker/picker.tsx
similarity index 64%
rename from src/picker/picker.vue
rename to src/picker/picker.tsx
index 3862d89e7..83ce38fea 100644
--- a/src/picker/picker.vue
+++ b/src/picker/picker.tsx
@@ -1,55 +1,31 @@
-<template>
-  <div :class="`${name}`">
-    <div :class="`${name}__toolbar`">
-      <div v-if="cancelButtonText" :class="`${name}__cancel`" @click="handleCancel">{{ cancelButtonText }}</div>
-      <div :class="`${name}__title`">{{ title }}</div>
-      <div v-if="confirmButtonText" :class="`${name}__confirm`" @click="handleConfirm">{{ confirmButtonText }}</div>
-    </div>
-    <t-node :content="header" />
-    <div :class="`${name}__main`">
-      <div v-for="(item, index) in realColumns" :key="index" :class="`${name}-item__group`">
-        <picker-item
-          :ref="(item) => setPickerItemRef(item, index)"
-          :options="item"
-          :value="pickerValue?.[index]"
-          :render-label="renderLabel"
-          @pick="handlePick($event, index)"
-        />
-      </div>
-      <div :class="`${name}__mask ${name}__mask--top`" />
-      <div :class="`${name}__mask ${name}__mask--bottom`" />
-      <div :class="`${name}__indicator`" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, toRefs, ref, getCurrentInstance, watch } from 'vue';
+import { computed, defineComponent, toRefs, ref, watch } from 'vue';
 import isString from 'lodash/isString';
 import isBoolean from 'lodash/isBoolean';
 
 import config from '../config';
 import PickerProps from './props';
 import { PickerValue, PickerColumn, PickerColumnItem } from './type';
-import { useVModel, TNode, renderTNode } from '../shared';
-import PickerItem from './picker-item.vue';
+import { useVModel } from '../shared';
+import { useTNodeJSX } from '../hooks/tnode';
+import PickerItem from './picker-item';
 import { useConfig } from '../config-provider/useConfig';
 
 const { prefix } = config;
 const name = `${prefix}-picker`;
-// 通过value和columns，生成对应的indexArray
 const getIndexFromColumns = (column: PickerColumn, value: PickerValue) => {
   if (!value) return 0;
   return column?.findIndex((item: PickerColumnItem) => item.value === value);
 };
+
 export default defineComponent({
   name,
-  components: { PickerItem, TNode },
+  components: { PickerItem },
   props: PickerProps,
   emits: ['change', 'cancel', 'pick', 'update:modelValue', 'update:value'],
-  setup(props: any) {
+  setup(props) {
     const { globalConfig } = useConfig('picker');
-    const internalInstance = getCurrentInstance();
+    const renderTNodeJSX = useTNodeJSX();
+
     const { value, modelValue } = toRefs(props);
     const [pickerValue = ref([]), setPickerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
     const getDefaultText = (prop: string | boolean, defaultText: string): string => {
@@ -59,7 +35,6 @@ export default defineComponent({
     };
     const confirmButtonText = computed(() => getDefaultText(props.confirmBtn, globalConfig.value.confirm));
     const cancelButtonText = computed(() => getDefaultText(props.cancelBtn, globalConfig.value.cancel));
-    const header = computed(() => renderTNode(internalInstance, 'header'));
     const curValueArray = ref(pickerValue.value?.map((item: PickerValue) => item) || []);
     const realColumns = computed(() => {
       if (typeof props.columns === 'function') {
@@ -77,7 +52,9 @@ export default defineComponent({
     };
 
     const handleConfirm = (e: MouseEvent) => {
-      const target = realColumns.value.map((item: PickerColumnItem, index: number) => item[curIndexArray[index]]);
+      const target = realColumns.value.map((item, index) => {
+        return item[curIndexArray[index]];
+      });
       const label = target.map((item: PickerColumnItem) => item.label);
       const value = target.map((item: PickerColumnItem) => item.value);
       setPickerValue(value);
@@ -110,19 +87,42 @@ export default defineComponent({
       });
     });
 
-    return {
-      name,
-      header,
-      pickerValue,
-      curIndexArray,
-      confirmButtonText,
-      cancelButtonText,
-      handleConfirm,
-      handleCancel,
-      handlePick,
-      realColumns,
-      setPickerItemRef,
+    return () => {
+      const header = renderTNodeJSX('header');
+      return (
+        <div class={`${name}`}>
+          <div class={`${name}__toolbar`}>
+            {cancelButtonText.value && (
+              <div class={`${name}__cancel`} onClick={handleCancel}>
+                {cancelButtonText.value}
+              </div>
+            )}
+            <div class={`${name}__title`}>{props.title}</div>
+            {confirmButtonText.value && (
+              <div class={`${name}__confirm`} onClick={handleConfirm}>
+                {confirmButtonText.value}
+              </div>
+            )}
+          </div>
+          {header}
+          <div class={`${name}__main`}>
+            {realColumns.value.map((item, index) => (
+              <div key={index} class={`${name}-item__group`}>
+                <picker-item
+                  ref={(item: any) => setPickerItemRef(item, index)}
+                  options={item}
+                  value={pickerValue.value?.[index]}
+                  render-label={props.renderLabel}
+                  onPick={($event: any) => handlePick($event, index)}
+                />
+              </div>
+            ))}
+            <div class={`${name}__mask ${name}__mask--top`} />
+            <div class={`${name}__mask ${name}__mask--bottom`} />
+            <div class={`${name}__indicator`} />
+          </div>
+        </div>
+      );
     };
   },
 });
-</script>