Repository: Tencent/tdesign-mobile-vue
Pull request #407 (2022-10-13 08:17:41)

test(DateTimePicker): add unit test for date-time-picker
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？
- [x] 日常 bug 修复
- [x] 测试用例

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(DateTimePicker): 修复 `cancelBtn` 和 `confirmBtn` 无效的问题
- feat(DateTimePicker): 新增组件单元测试



github-actions[bot]: <a href="https://preview-pr407-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/3240810270) -->
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** +45 B (0%) 

**Total Size:** 258 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 131 kB | +24 B (0%) |
| `./dist/tdesign.min.js` | 80.4 kB | +21 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 24.4 kB |
| `./dist/tdesign.min.css` | 22.6 kB |

</details>


github-actions[bot]: **Size Change:** +49 B (0%) 

**Total Size:** 259 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 131 kB | +26 B (0%) |
| `./dist/tdesign.min.js` | 80.5 kB | +23 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 24.4 kB |
| `./dist/tdesign.min.css` | 22.6 kB |

</details>


github-actions[bot]: **Size Change:** +49 B (0%) 

**Total Size:** 259 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 131 kB | +26 B (0%) |
| `./dist/tdesign.min.js` | 80.5 kB | +23 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 24.4 kB |
| `./dist/tdesign.min.css` | 22.6 kB |

</details>



Patch:
diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index 28b47b31..70563f35 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -4,6 +4,8 @@
       ref="pickeInstance"
       :value="currentPicker"
       :title="title"
+      :confirm-btn="confirmButtonText"
+      :cancel-btn="cancelButtonText"
       :columns="(selected) => generateDatePickerColumns(selected, start, end, renderLabel)"
       @change="onChange"
       @confirm="onConfirm"
diff --git a/src/date-time-picker/demos/base.vue b/src/date-time-picker/demos/base.vue
index d04ed112..62fd526c 100644
--- a/src/date-time-picker/demos/base.vue
+++ b/src/date-time-picker/demos/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-cell title="选择日期(年月日)" :note="pickerValue || '年 月 日'" @click="visible = true" />
+  <t-cell title="选择日期(年月日)" :note="pickerValueText || '年 月 日'" @click="visible = true" />
   <t-popup v-model="visible" placement="bottom">
     <t-date-time-picker
       :value="pickerValue"
@@ -15,11 +15,10 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 
 const visible = ref(false);
-const pickerValue = ref('');
-
+const pickerValue = ref('2021-12-23');
+const pickerValueText = ref('');
 const onChange = (value: string) => {
   console.log('change: ', value);
 };
@@ -36,6 +35,7 @@ const onCancel = () => {
 const onConfirm = (value: string) => {
   console.log('confirm: ', value);
   pickerValue.value = value;
+  pickerValueText.value = value;
   visible.value = false;
 };
 </script>
diff --git a/src/date-time-picker/demos/custom-range.vue b/src/date-time-picker/demos/custom-range.vue
index 712eafd0..74a2f4a1 100644
--- a/src/date-time-picker/demos/custom-range.vue
+++ b/src/date-time-picker/demos/custom-range.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-cell title="选择日期" :note="pickerValue || '年 月 日'" @click="visible = true" />
+  <t-cell title="选择日期" :note="pickerValueText || '年 月 日'" @click="visible = true" />
   <t-popup v-model="visible" placement="bottom">
     <t-date-time-picker
       :value="pickerValue"
@@ -17,11 +17,10 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 
 const visible = ref(false);
-const pickerValue = ref('');
-
+const pickerValue = ref('2021-12-23');
+const pickerValueText = ref('');
 const onChange = (value: string) => {
   console.log('change: ', value);
 };
@@ -38,6 +37,7 @@ const onCancel = () => {
 const onConfirm = (value: string) => {
   console.log('confirm: ', value);
   pickerValue.value = value;
+  pickerValueText.value = value;
   visible.value = false;
 };
 </script>
diff --git a/src/date-time-picker/demos/full.vue b/src/date-time-picker/demos/full.vue
index 4ba638c5..9391f113 100644
--- a/src/date-time-picker/demos/full.vue
+++ b/src/date-time-picker/demos/full.vue
@@ -14,7 +14,6 @@
 </template>
 <script lang="ts" setup>
 import { reactive } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 import { DateValue } from '../type';
 
 const show = reactive({
diff --git a/src/date-time-picker/demos/mobile.vue b/src/date-time-picker/demos/mobile.vue
index 532c9fb0..c2187e53 100644
--- a/src/date-time-picker/demos/mobile.vue
+++ b/src/date-time-picker/demos/mobile.vue
@@ -13,68 +13,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue';
-import dayjs from 'dayjs';
-import { DateValue } from '../type';
 import baseVue from './base.vue';
 import yearMonthVue from './year-month.vue';
 import timeVue from './time.vue';
 import customRangeVue from './custom-range.vue';
-
-const modeArray = ['date', 'second'];
-
-const mode = ref(modeArray);
-const show = reactive({
-  ymdhms: false,
-  ymd: false,
-  ym: false,
-  hm: false,
-
-  ymdhms2: false,
-  ymdhms3: false,
-});
-const text = reactive({
-  ymdhms: '2020-08-10 12:50:00',
-  ymd: '2020-08-10',
-  ym: '2020-08',
-  hm: '2020-08-10 12:01',
-
-  ymdhms2: '2020-08-10 12:50:00',
-  ymdhms3: '2020-08-10 12:50:00',
-});
-
-const showHm = computed(() => {
-  return dayjs(text.hm).format('HH:mm');
-});
-
-const onChange = (value: DateValue) => {
-  console.log('date-time-picker:change', value);
-};
-
-const onPick = (value: DateValue) => {
-  console.log('date-time-picker:pick', value);
-};
-
-const onCancel = () => {
-  console.log('date-time-picker:cancel');
-  Object.keys(show).forEach((item) => (show[item] = false));
-};
-
-const onConfirm = (value: DateValue) => {
-  console.log('date-time-picker:confirm', value);
-  Object.keys(show).forEach((item) => (show[item] = false));
-};
-
-const renderLabel = (type: string, value: number) => {
-  if (type === 'year') {
-    return `${value}年`;
-  }
-  if (type === 'month') {
-    return `${value}月`;
-  }
-  if (type === 'date') {
-    return `${value}日`;
-  }
-  return value;
-};
 </script>
diff --git a/src/date-time-picker/demos/time.vue b/src/date-time-picker/demos/time.vue
index 45916dea..a6e4709a 100644
--- a/src/date-time-picker/demos/time.vue
+++ b/src/date-time-picker/demos/time.vue
@@ -15,7 +15,6 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
 
 const visible = ref(false);
 const pickerValue = ref('');
diff --git a/src/date-time-picker/demos/year-month.vue b/src/date-time-picker/demos/year-month.vue
index f7e0d228..17f1f5d2 100644
--- a/src/date-time-picker/demos/year-month.vue
+++ b/src/date-time-picker/demos/year-month.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-cell title="选择日期(年月)" :note="value || '年 月'" @click="visible = true" />
+  <t-cell title="选择日期(年月)" :note="valueText || '年 月'" @click="visible = true" />
   <t-popup v-model="visible" placement="bottom">
     <t-date-time-picker
       v-model="value"
@@ -15,17 +15,15 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { cell } from 'tdesign-mobile-vue';
-import { DateValue } from '../type';
 
 const visible = ref(false);
-const value = ref('');
-
-const onChange = (value: DateValue) => {
+const value = ref('2021-09');
+const valueText = ref('');
+const onChange = (value: string) => {
   console.log('change: ', value);
 };
 
-const onPick = (value: DateValue) => {
+const onPick = (value: string) => {
   console.log('pick: ', value);
 };
 
@@ -34,8 +32,9 @@ const onCancel = () => {
   visible.value = false;
 };
 
-const onConfirm = (value: DateValue) => {
+const onConfirm = (value: string) => {
   console.log('confirm: ', value);
+  valueText.value = value;
   visible.value = false;
 };
 </script>


Test patch:
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 2f6a44c4..930c5f99 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -102,7 +102,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -119,11 +119,11 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -280px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
                     >
                       2012
                     </li>
@@ -168,7 +168,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                       2020
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       2021
                     </li>
@@ -235,11 +235,56 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -360px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
                       10
                     </li>
@@ -249,7 +294,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                       11
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       12
                     </li>
@@ -261,11 +306,91 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -800px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      10
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      11
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      12
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      13
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      14
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      15
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      16
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
                       17
                     </li>
@@ -295,7 +420,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                       22
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       23
                     </li>
@@ -464,7 +589,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -481,101 +606,276 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, 40px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
+                    >
+                      2020
+                    </li>
+                    <li
+                      class="t-picker-item__item t-picker-item__item--selected"
+                    >
+                      2021
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2022
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2023
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2024
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2025
+                    </li>
+                    
+                  </ul>
+                </div>
+                <div
+                  class="t-picker-item"
+                >
+                  <ul
+                    class="t-picker-item__wrapper"
+                    style="transform: translate3d(0, -360px, 0);"
+                  >
+                    
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      10
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      11
+                    </li>
+                    <li
+                      class="t-picker-item__item t-picker-item__item--selected"
+                    >
+                      12
+                    </li>
+                    
+                  </ul>
+                </div>
+                <div
+                  class="t-picker-item"
+                >
+                  <ul
+                    class="t-picker-item__wrapper"
+                    style="transform: translate3d(0, -800px, 0);"
+                  >
+                    
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      10
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      11
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      12
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      13
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      14
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      15
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      16
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
-                      2020
+                      17
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2021
+                      18
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2022
+                      19
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2023
+                      20
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2024
+                      21
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      2025
+                      22
                     </li>
-                    
-                  </ul>
-                </div>
-                <div
-                  class="t-picker-item"
-                >
-                  <ul
-                    class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
-                  >
-                    
                     <li
                       class="t-picker-item__item t-picker-item__item--selected"
                     >
-                      6
+                      23
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      7
+                      24
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      8
+                      25
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      9
+                      26
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      10
+                      27
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      11
+                      28
                     </li>
                     <li
                       class="t-picker-item__item"
                     >
-                      12
+                      29
                     </li>
-                    
-                  </ul>
-                </div>
-                <div
-                  class="t-picker-item"
-                >
-                  <ul
-                    class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
-                  >
-                    
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
                     >
                       30
                     </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      31
+                    </li>
                     
                   </ul>
                 </div>
@@ -701,7 +1001,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -1965,7 +2265,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -1982,11 +2282,11 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -280px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         2012
                       </li>
@@ -2031,7 +2331,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         2020
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         2021
                       </li>
@@ -2098,11 +2398,56 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -360px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        8
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        9
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         10
                       </li>
@@ -2112,7 +2457,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         11
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         12
                       </li>
@@ -2124,11 +2469,91 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -800px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        8
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        9
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        10
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        11
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        12
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        13
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        14
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        15
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        16
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         17
                       </li>
@@ -2158,7 +2583,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         22
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         23
                       </li>
@@ -2320,7 +2745,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -2337,11 +2762,11 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -280px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         2012
                       </li>
@@ -2386,7 +2811,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         2020
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         2021
                       </li>
@@ -2433,31 +2858,76 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       <li
                         class="t-picker-item__item"
                       >
-                        2030
+                        2030
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2031
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2032
+                      </li>
+                      
+                    </ul>
+                  </div>
+                  <div
+                    class="t-picker-item"
+                  >
+                    <ul
+                      class="t-picker-item__wrapper"
+                      style="transform: translate3d(0, -240px, 0);"
+                    >
+                      
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2031
+                        8
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        2032
+                        9
                       </li>
-                      
-                    </ul>
-                  </div>
-                  <div
-                    class="t-picker-item"
-                  >
-                    <ul
-                      class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
-                    >
-                      
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         10
                       </li>
@@ -2589,7 +3059,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -3174,7 +3644,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                     class="t-button__text"
                   >
                     
-                    确认
+                    确定
                     
                   </span>
                 </button>
@@ -3191,16 +3661,16 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, 40px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
                         2020
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         2021
                       </li>
@@ -3232,11 +3702,36 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -360px, 0);"
                     >
                       
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         6
                       </li>
@@ -3266,7 +3761,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                         11
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
                         12
                       </li>
@@ -3278,14 +3773,164 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item__wrapper"
-                      style="transform: translate3d(0, 80px, 0);"
+                      style="transform: translate3d(0, -800px, 0);"
                     >
                       
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        1
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        3
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        4
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        5
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        6
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        7
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        8
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        9
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        10
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        11
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        12
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        13
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        14
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        15
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        16
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        17
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        18
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        19
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        20
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        21
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        22
+                      </li>
                       <li
                         class="t-picker-item__item t-picker-item__item--selected"
+                      >
+                        23
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        24
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        25
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        26
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        27
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        28
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        29
+                      </li>
+                      <li
+                        class="t-picker-item__item"
                       >
                         30
                       </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        31
+                      </li>
                       
                     </ul>
                   </div>
@@ -3413,7 +4058,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -3989,7 +4634,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                   class="t-button__text"
                 >
                   
-                  确认
+                  确定
                   
                 </span>
               </button>
@@ -4006,11 +4651,11 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -280px, 0);"
                   >
                     
                     <li
-                      class="t-picker-item__item t-picker-item__item--selected"
+                      class="t-picker-item__item"
                     >
                       2012
                     </li>
@@ -4055,7 +4700,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                       2020
                     </li>
                     <li
-                      class="t-picker-item__item"
+                      class="t-picker-item__item t-picker-item__item--selected"
                     >
                       2021
                     </li>
@@ -4122,11 +4767,56 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                 >
                   <ul
                     class="t-picker-item__wrapper"
-                    style="transform: translate3d(0, 80px, 0);"
+                    style="transform: translate3d(0, -240px, 0);"
                   >
                     
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      1
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      2
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      3
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      4
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      5
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      6
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      7
+                    </li>
+                    <li
+                      class="t-picker-item__item"
+                    >
+                      8
+                    </li>
                     <li
                       class="t-picker-item__item t-picker-item__item--selected"
+                    >
+                      9
+                    </li>
+                    <li
+                      class="t-picker-item__item"
                     >
                       10
                     </li>
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..772099b3
--- /dev/null
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,418 @@
+// Vitest Snapshot v1
+
+exports[`DateTimePicker > props > : onPick 1`] = `
+<div
+  class="t-date-time-picker"
+>
+  <div
+    class="t-picker"
+  >
+    <div
+      class="t-picker__toolbar"
+    >
+      <button
+        aria-disabled="false"
+        class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-picker__cancel"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          取消
+          
+        </span>
+      </button>
+      <div
+        class="t-picker__title"
+      >
+        选择时间
+      </div>
+      <button
+        aria-disabled="false"
+        class="t-button t-size-m t-button--text t-button--default t-button--shape-rectangle t-picker__confirm"
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          确定
+          
+        </span>
+      </button>
+    </div>
+    <div
+      class="t-picker__main"
+    >
+      <div
+        class="t-picker-item__group"
+      >
+        
+        <div
+          class="t-picker-item"
+        >
+          <ul
+            class="t-picker-item__wrapper"
+            style="transform: translate3d(0, -400px, 0); transition: 150ms ease-out;"
+          >
+            
+            <li
+              class="t-picker-item__item"
+            >
+              2012
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2013
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2014
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2015
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2016
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2017
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2018
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2019
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2020
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2021
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2022
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2023
+            </li>
+            <li
+              class="t-picker-item__item t-picker-item__item--selected"
+            >
+              2024
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2025
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2026
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2027
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2028
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2029
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2030
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2031
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2032
+            </li>
+            
+          </ul>
+        </div>
+        <div
+          class="t-picker-item"
+        >
+          <ul
+            class="t-picker-item__wrapper"
+            style="transform: translate3d(0, -280px, 0);"
+          >
+            
+            <li
+              class="t-picker-item__item"
+            >
+              1
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              3
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              4
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              5
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              6
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              7
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              8
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              9
+            </li>
+            <li
+              class="t-picker-item__item t-picker-item__item--selected"
+            >
+              10
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              11
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              12
+            </li>
+            
+          </ul>
+        </div>
+        <div
+          class="t-picker-item"
+        >
+          <ul
+            class="t-picker-item__wrapper"
+            style="transform: translate3d(0, -400px, 0);"
+          >
+            
+            <li
+              class="t-picker-item__item"
+            >
+              1
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              2
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              3
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              4
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              5
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              6
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              7
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              8
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              9
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              10
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              11
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              12
+            </li>
+            <li
+              class="t-picker-item__item t-picker-item__item--selected"
+            >
+              13
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              14
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              15
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              16
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              17
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              18
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              19
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              20
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              21
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              22
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              23
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              24
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              25
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              26
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              27
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              28
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              29
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              30
+            </li>
+            <li
+              class="t-picker-item__item"
+            >
+              31
+            </li>
+            
+          </ul>
+        </div>
+        
+      </div>
+      <div
+        class="t-picker__mask"
+      />
+      <div
+        class="t-picker__indicator"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/date-time-picker/__test__/index.test.jsx b/src/date-time-picker/__test__/index.test.jsx
new file mode 100644
index 00000000..17cc8a26
--- /dev/null
+++ b/src/date-time-picker/__test__/index.test.jsx
@@ -0,0 +1,228 @@
+import { nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import DateTimePicker from '../date-time-picker.vue';
+import PickerItem from '../../picker/picker-item.vue';
+import { DEFAULT_ITEM_HEIGHT, ANIMATION_TIME_LIMIT } from '../../picker/picker.class';
+
+const makeTouch = (el, eventName, touchPosition) => {
+  const event = new Event(eventName);
+  if (touchPosition) {
+    event.changedTouches = [touchPosition];
+  }
+
+  el.dispatchEvent(event);
+};
+
+const simulateMoveOption = async (optionContainerEl, distance) => {
+  makeTouch(optionContainerEl, 'touchstart', { pageY: 0 });
+  makeTouch(optionContainerEl, 'touchmove', { pageY: -distance * DEFAULT_ITEM_HEIGHT });
+
+  vi.useFakeTimers().advanceTimersByTime(ANIMATION_TIME_LIMIT + 1);
+  makeTouch(optionContainerEl, 'touchend', { pageY: -distance * DEFAULT_ITEM_HEIGHT });
+  vi.useRealTimers();
+
+  await nextTick();
+}
+
+const prefix = 't'
+const name = `${prefix}-date-time-picker`;
+
+const renderLabel = (type, value) => {
+  if (type === 'year') {
+    return `${value}年`;
+  }
+  if (type === 'month') {
+    return `${value}月`;
+  }
+  if (type === 'date') {
+    return `${value}日`;
+  }
+  return value;
+};
+
+const addZero = (el) => {
+  return el < 10 ? `0${el}` : el
+}
+
+// 获取当前月份的天数
+const getDateCount = (Y, M) => {
+  var d = new Date(Y, M, 0);
+  return d.getDate();
+}
+
+// 相关日期计算
+const precisionRankRecord = ['year', 'month', 'date', 'hour', 'minute','second'];
+const currentDate = new Date('2022-10-13');
+const Y = currentDate.getFullYear();
+const M = currentDate.getMonth() + 1;
+const D = currentDate.getDate();
+const defaultDateTime = `${Y}-${addZero(M)}-${addZero(D)}`;
+
+const ret = [];
+const generateColumn = (start, end, type) => {
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    const value = i.toString();
+    arr.push({
+      label: renderLabel ? renderLabel(type, i) : value,
+      value: type === 'month' ? `${+value - 1}` : value,
+    });
+  }
+  ret.push(arr);
+};
+
+describe('DateTimePicker', () => {
+  describe('props', () => {
+    it(': title && confirmBtn && cancelBtn', async () => {
+      const title = '';
+      const confirmBtn = '';
+      const cancelBtn = '';
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          title,
+          confirmBtn,
+          cancelBtn
+        }
+      })
+      const $title = wrapper.find(`.${prefix}-picker__title`);
+      const $confirmButton = wrapper.find(`.${prefix}-picker__confirm`);
+      const $cancelButton = wrapper.find(`.${prefix}-picker__cancel`);
+      expect($title.text()).toBe(title || '选择时间');
+      expect($confirmButton.text()).toBe(confirmBtn || '确定');
+      expect($cancelButton.text()).toBe(cancelBtn || '取消');
+
+      const newTitle = '标题测试';
+      const newConfirmBtn = 'confirm';
+      const newCancelBtn = 'cancel';
+      await wrapper.setProps({
+        title: newTitle,
+        confirmBtn: newConfirmBtn,
+        cancelBtn: newCancelBtn
+      })
+      expect($title.text()).toBe(newTitle || '选择时间');
+      expect($confirmButton.text()).toBe(newConfirmBtn || '确定');
+      expect($cancelButton.text()).toBe(newCancelBtn || '取消');
+    });
+
+    it(': mode', async () => {
+      const defaultValue = defaultDateTime;
+      const modeArray = ['date', 'second'];
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          defaultValue,
+          title: 'mode 测试',
+          mode: modeArray,
+        }
+      })
+      // mode = ['date', 'second'], 渲染年月日时分秒，6列
+      const pickerItem = wrapper.findComponent(PickerItem);
+      expect(pickerItem.exists()).toBeTruthy();
+      const $pickerItems = wrapper.findAllComponents(PickerItem);
+      expect($pickerItems).toHaveLength(6);
+      await wrapper.setProps({
+        mode: false
+      })
+      // mode = false, 不渲染列
+      expect(pickerItem.exists()).toBeFalsy();
+    });
+
+    it(': start && end ', async () => {
+      const defaultValue = defaultDateTime;
+      const start = "2020-6-30";
+      const end = "2025-6-30";
+
+      const startYear = start.split('-')[0];
+      const endYear =end.split('-')[0];
+
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          defaultValue,
+          start,
+          end,
+        }
+      })
+      const $pickerItems = wrapper.findAllComponents(PickerItem);
+      let res = {};
+      $pickerItems.forEach((item, index) => {
+        res[precisionRankRecord[index]] = item.findAll(`.${prefix}-picker-item__item`)
+      });
+      expect(res[precisionRankRecord[0]].length).toEqual(endYear - startYear + 1);
+    });
+
+    it(': renderLabel', async () => {
+      generateColumn(Y - 10, Y + 10, 'year')
+      generateColumn(1, 12, 'month')
+      generateColumn(1, getDateCount(Y, M), 'date')
+
+      const defaultValue = defaultDateTime;
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          defaultValue,
+          title: '自定义label',
+          renderLabel,
+        }
+      })
+      // mode = 'date', 渲染年月日，3列
+      const $pickerItems = wrapper.findAllComponents(PickerItem);
+      expect($pickerItems.length).toEqual(3);
+
+      let res = {};
+      $pickerItems.forEach((item, index) => {
+        res[precisionRankRecord[index]] = item.findAll(`.${prefix}-picker-item__item`)
+      });
+
+      Object.keys(res).forEach((key, keyIndex) => {
+        expect(res[key].length).toEqual(ret[keyIndex].length)
+        res[key].forEach((item, itemIndex) => {
+          expect(item.text()).toEqual(ret[keyIndex][itemIndex].label)
+        })
+      })
+    })
+    it(': onCancel', async () => {
+      const onCancel = vi.fn();
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          onCancel,
+        }
+      })
+      const $cancelButton = wrapper.find(`.${prefix}-picker__cancel`);
+      await $cancelButton.trigger('click');
+      expect(onCancel).toBeCalledTimes(1);
+    })
+
+    it(': onPick', async () => {
+      const initValue = ref(defaultDateTime);
+      const onConfirm = vi.fn((e) => {
+        // confirm && change && pick 事件的返回值格式是 yyyy-mm-dd hh:mm:ss, 需要自行处理。
+        // Q: 返回值是否应该按照 mode 类型返回？
+        initValue.value = String(e).split(' ')[0].trim();
+      });
+      const onChange = vi.fn();
+      const onPick = vi.fn();
+      const wrapper = mount(DateTimePicker, {
+        props: {
+          value: initValue.value,
+          onConfirm,
+          onChange,
+          onPick
+        }
+      })
+      const $confirmButton = wrapper.find(`.${prefix}-picker__confirm`);
+      await $confirmButton.trigger('click');
+      expect(onConfirm).toBeCalledTimes(1);
+      expect(onChange).toBeCalledTimes(0); // value 不变，不触发 change
+      expect(onPick).toBeCalledTimes(0);
+      const el = wrapper.findAll(`.${prefix}-picker-item`);
+      const touchItemIndex = 0;
+      const touchIndex = 2;
+      simulateMoveOption(el[touchItemIndex].element, touchIndex);
+      expect(wrapper.element).toMatchSnapshot();
+      expect(onPick).toBeCalledTimes(1);
+      await $confirmButton.trigger('click');
+      expect(onConfirm).toBeCalledTimes(2);
+      expect(onChange).toBeCalledTimes(1);
+      expect(initValue.value).toEqual(`${ret[touchItemIndex][10 + touchIndex].value}-${addZero(M)}-${addZero(D)}`)
+    })
+  });
+})