From 3d0ab4122028e6184414b4abad47e57d1b034bbf Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Thu, 30 Mar 2023 20:39:42 +0800
Subject: [PATCH 1/6] feat(datetime-picker): using new style

---
 src/date-time-picker/date-time-picker.vue | 178 ++++++++--------------
 src/date-time-picker/demos/base.vue       |   1 +
 src/date-time-picker/shared.ts            |  29 ++++
 src/picker/picker-item.vue                |   6 +-
 src/picker/picker.vue                     |  34 ++---
 5 files changed, 114 insertions(+), 134 deletions(-)
 create mode 100644 src/date-time-picker/shared.ts

diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index f9cc4aaca..902c6b1e5 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -6,7 +6,7 @@
       :title="title"
       :confirm-btn="confirmButtonText"
       :cancel-btn="cancelButtonText"
-      :columns="(selected) => generateDatePickerColumns(selected, start, end, renderLabel)"
+      :columns="columns"
       @change="onChange"
       @confirm="onConfirm"
       @cancel="onCancel"
@@ -18,11 +18,16 @@
 
 <script lang="ts">
 import { ref, computed, defineComponent, toRefs, watch, nextTick } from 'vue';
-import dayjs from 'dayjs';
+import dayjs, { Dayjs, UnitType } from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import isArray from 'lodash/isArray';
+
 import config from '../config';
 import DateTimePickerProps from './props';
+import { getMeaningColumn } from './shared';
 import { useEmitEvent, useVModel } from '../shared';
 import { Picker as TPicker } from '../picker';
 import { PickerColumn, PickerColumnItem, PickerValue, PickerContext } from '../picker/type';
@@ -50,8 +55,6 @@ export default defineComponent({
   setup(props: any, context) {
     const emitEvent = useEmitEvent(props, context.emit);
     const pickeInstance = ref<any>(null);
-    const isChanged = ref(false);
-    const realDateValue = ref();
     const className = computed(() => [`${name}`]);
     const { value, modelValue } = toRefs(props);
     const [dateTimePickerValue, setDateTimePickerValue] = useVModel(
@@ -60,6 +63,7 @@ export default defineComponent({
       props.defaultValue,
       props.onChange,
     );
+    const innerValue = ref(dateTimePickerValue.value);
     const title = computed(() => {
       return props.title || '选择时间';
     });
@@ -74,49 +78,22 @@ export default defineComponent({
       return props.end ? dayjs(props.end) : dayjs().add(10, 'year');
     });
 
-    const renderLabel = computed(() => {
-      return props.renderLabel;
-    });
+    const meaningColumn = computed(() => getMeaningColumn(props.mode));
 
     // 根据mode，判断是否需要渲染'year','month','date','hour','minute','second'对应的列
     const isPrecision = (type: string) => {
       if (!props.mode) {
         return false;
       }
-      switch (type) {
-        case 'year':
-          return (
-            (typeof props.mode === 'string' && precisionRankRecord[props.mode] >= 0) ||
-            (typeof props.mode === 'object' && precisionRankRecord[props.mode[0]] >= 0)
-          );
-        case 'month':
-          return (
-            (typeof props.mode === 'string' && precisionRankRecord[props.mode] >= 1) ||
-            (typeof props.mode === 'object' && precisionRankRecord[props.mode[0]] >= 1)
-          );
-        case 'date':
-          return (
-            (typeof props.mode === 'string' && precisionRankRecord[props.mode] >= 2) ||
-            (typeof props.mode === 'object' && precisionRankRecord[props.mode[0]] >= 2)
-          );
-        case 'hour':
-          return (
-            (typeof props.mode === 'string' && precisionRankRecord[props.mode] >= 3) ||
-            (typeof props.mode === 'object' && precisionRankRecord[props.mode[1]] >= 3)
-          );
-        case 'minute':
-          return (
-            (typeof props.mode === 'string' && precisionRankRecord[props.mode] >= 4) ||
-            (typeof props.mode === 'object' && precisionRankRecord[props.mode[1]] >= 4)
-          );
-        case 'second':
-          return (
-            (typeof props.mode === 'string' && precisionRankRecord[props.mode] >= 5) ||
-            (typeof props.mode === 'object' && precisionRankRecord[props.mode[1]] >= 5)
-          );
-        default:
-          return true;
+
+      if (type in precisionRankRecord) {
+        return (
+          (isString(props.mode) && precisionRankRecord[props.mode] >= precisionRankRecord[type]) ||
+          (isObject(props.mode) && precisionRankRecord[props.mode[0]] >= precisionRankRecord[type])
+        );
       }
+
+      return true;
     };
 
     // 将dateTimeValue格式的值转为pickerValue，赋值给picker组件的value
@@ -150,58 +127,50 @@ export default defineComponent({
       return date;
     };
 
-    // 每次pick后，根据start,end生成最新的columns
-    const generateDatePickerColumns = (
-      selected: PickerValue[],
-      min: any,
-      max: any,
-      renderLabel: (type: string, value: number) => string,
-    ) => {
-      const ret: PickerColumn[] = [];
-      const minYear = min.year();
-      const minMonth = min.month() + 1;
-      const minDay = min.date();
-      const minHour = min.hour();
-      const minMinute = min.minute();
-      const minSecond = min.second();
-
-      const maxYear = max.year();
-      const maxMonth = max.month() + 1;
-      const maxDay = max.date();
-      const maxHour = max.hour();
-      const maxMinute = max.minute();
-      const maxSecond = max.second();
-
-      const selectedDate: any = {};
-      let selectedLength = 0;
-
-      Object.keys(precisionRankRecord).forEach((item) => {
-        const newKey = `selected${item.substr(0, 1).toUpperCase()}${item.substr(1, item.length)}`;
-        if (isPrecision(item)) {
-          selectedDate[newKey] = parseInt(`${selected[selectedLength]}`, 10);
-          selectedLength++;
-        } else {
-          selectedDate[newKey] = undefined;
+    const curDate = ref(
+      (() => {
+        const timeMode = ['hour', 'minute', 'second'];
+        if (timeMode.includes(props.mode) || (isArray(props.mode) && props.mode?.[0] == null)) {
+          return dayjs(`1900-1-1 ${innerValue.value}`);
         }
-      });
+        return dayjs(innerValue.value);
+      })(),
+    );
 
-      const isInMinYear = selectedDate.selectedYear === minYear;
-      const isInMaxYear = selectedDate.selectedYear === maxYear;
-      const isInMinMonth = isInMinYear && selectedDate.selectedMonth + 1 === minMonth;
-      const isInMaxMonth = isInMaxYear && selectedDate.selectedMonth + 1 === maxMonth;
-      const isInMinDay = isInMinMonth && selectedDate.selectedDay === minDay;
-      const isInMaxDay = isInMaxMonth && selectedDate.selectedDay === maxDay;
-      const isInMinHour = isInMinDay && selectedDate.selectedHour === minHour;
-      const isInMaxHour = isInMaxDay && selectedDate.selectedHour === maxHour;
-      const isInMinMinute = isInMinHour && selectedDate.selectedMinute === minMinute;
-      const isInMaxMinute = isInMaxHour && selectedDate.selectedMinute === maxMinute;
+    // 每次pick后，根据start,end生成最新的columns
+    const columns = computed(() => {
+      const ret: PickerColumn[] = [];
+      const getDate = (date: Dayjs) => [date.year(), date.month() + 1, date.date(), date.minute(), date.second()];
+      const [curYear, curMonth, curDay, curHour, curMinute] = getDate(curDate.value);
+      const [minYear, minMonth, minDay, minHour, minMinute, minSecond] = getDate(start.value);
+      const [maxYear, maxMonth, maxDay, maxHour, maxMinute, maxSecond] = getDate(end.value);
+
+      const isInMinYear = curYear === minYear;
+      const isInMaxYear = curYear === maxYear;
+      const isInMinMonth = isInMinYear && curMonth + 1 === minMonth;
+      const isInMaxMonth = isInMaxYear && curMonth + 1 === maxMonth;
+      const isInMinDay = isInMinMonth && curDay === minDay;
+      const isInMaxDay = isInMaxMonth && curDay === maxDay;
+      const isInMinHour = isInMinDay && curHour === minHour;
+      const isInMaxHour = isInMaxDay && curHour === maxHour;
+      const isInMinMinute = isInMinHour && curMinute === minMinute;
+      const isInMaxMinute = isInMaxHour && curMinute === maxMinute;
+
+      const typeUnit = {
+        year: '年',
+        month: '月',
+        date: '日',
+        hour: '时',
+        minute: '分',
+        second: '秒',
+      };
 
       const generateColumn = (start: number, end: number, type: string) => {
         const arr: PickerColumnItem[] = [];
         for (let i = start; i <= end; i++) {
           const value = i.toString();
           arr.push({
-            label: renderLabel ? renderLabel(type, i) : value,
+            label: props.renderLabel ? props.renderLabel(type, i) : `${value} ${typeUnit[type]}`,
             value: type === 'month' ? `${+value - 1}` : value,
           });
         }
@@ -220,7 +189,7 @@ export default defineComponent({
 
       if (isPrecision('date')) {
         const lower = isInMinMonth ? minDay : 1;
-        const upper = isInMaxMonth ? maxDay : dayjs(`${selected[0]}-${+selected[1] + 1}`).daysInMonth();
+        const upper = isInMaxMonth ? maxDay : dayjs(`${curYear}-${curMonth}`).daysInMonth();
         generateColumn(lower, upper, 'date');
       }
 
@@ -242,7 +211,7 @@ export default defineComponent({
         generateColumn(lower, upper, 'second');
       }
       return ret;
-    };
+    });
 
     const onConfirm = (value: Array<PickerValue>, context: { index: number[] }) => {
       lastTimePicker = [...currentPicker];
@@ -258,12 +227,14 @@ export default defineComponent({
     const onChange = (value: Array<PickerValue>, context: { columns: Array<PickerContext>; e: MouseEvent }) => {
       lastTimePicker = [...currentPicker];
       const currentDate = getDateTimePickerValueByPickerValue(value);
-      realDateValue.value = dayjs(currentDate).format(props.format);
-      isChanged.value = true;
+      setDateTimePickerValue(dayjs(currentDate).format(props.format));
     };
 
     const onPick = (value: Array<PickerValue>, context: PickerContext) => {
-      currentPicker = value;
+      const { column, index } = context;
+      const type = meaningColumn.value[column];
+      const val = curDate.value.set(type as UnitType, parseInt(columns.value[column][index]?.value, 10));
+      curDate.value = val;
       const currentDate = getDateTimePickerValueByPickerValue(value);
       emitEvent('pick', dayjs(currentDate).format(props.format));
     };
@@ -277,14 +248,9 @@ export default defineComponent({
       () => dateTimePickerValue,
       (val) => {
         nextTick(() => {
-          if (isChanged.value) {
-            isChanged.value = false;
-          } else {
-            pickeInstance.value?.setValues(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf()));
-            currentPicker = [...ref(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf())).value];
-            lastTimePicker = [...currentPicker];
-            isChanged.value = false;
-          }
+          pickeInstance.value?.setValues(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf()));
+          currentPicker = [...ref(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf())).value];
+          lastTimePicker = [...currentPicker];
         });
       },
       {
@@ -293,19 +259,6 @@ export default defineComponent({
       },
     );
 
-    watch(
-      () => isChanged,
-      (val) => {
-        if (val.value) {
-          setDateTimePickerValue(realDateValue.value);
-        }
-      },
-      {
-        immediate: true,
-        deep: true,
-      },
-    );
-
     return {
       pickeInstance,
       className,
@@ -314,12 +267,9 @@ export default defineComponent({
       title,
       start,
       end,
-      renderLabel,
       pickerValue,
       currentPicker,
-      realDateValue,
-      isChanged,
-      generateDatePickerColumns,
+      columns,
       onConfirm,
       onCancel,
       onPick,
diff --git a/src/date-time-picker/demos/base.vue b/src/date-time-picker/demos/base.vue
index 62fd526c0..406be8273 100644
--- a/src/date-time-picker/demos/base.vue
+++ b/src/date-time-picker/demos/base.vue
@@ -13,6 +13,7 @@
     />
   </t-popup>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue';
 
diff --git a/src/date-time-picker/shared.ts b/src/date-time-picker/shared.ts
new file mode 100644
index 000000000..421199af0
--- /dev/null
+++ b/src/date-time-picker/shared.ts
@@ -0,0 +1,29 @@
+import isString from 'lodash/isString';
+import isArray from 'lodash/isArray';
+
+export const getMeaningColumn = (mode: string | string[]) => {
+  const arr = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+
+  if (isString(mode)) {
+    const cutIndex = arr.indexOf(mode);
+    return arr.slice(0, cutIndex + 1);
+  }
+  if (isArray(mode)) {
+    const ans = [];
+    const [dateMode, timeMode] = mode;
+    if (dateMode != null) {
+      const cutIndex = arr.indexOf(dateMode);
+      if (cutIndex <= 2 && cutIndex > -1) {
+        ans.push(...arr.slice(0, cutIndex + 1));
+      }
+    }
+    if (timeMode != null) {
+      const cutIndex = arr.indexOf(timeMode);
+      if (cutIndex > 2) {
+        ans.push(...arr.slice(3, cutIndex + 1));
+      }
+    }
+    return ans;
+  }
+  return [];
+};
diff --git a/src/picker/picker-item.vue b/src/picker/picker-item.vue
index 02bca9cf0..6cd554de4 100644
--- a/src/picker/picker-item.vue
+++ b/src/picker/picker-item.vue
@@ -65,10 +65,10 @@ export default defineComponent({
       }
     };
     const setOptions = () => {
-      picker && picker.update();
+      picker?.update();
     };
     const setUpdateItems = () => {
-      picker && picker.updateItems();
+      picker?.updateItems();
     };
     context.expose({
       setIndex,
@@ -92,7 +92,7 @@ export default defineComponent({
     watch(
       () => props.options,
       () => {
-        picker?.init();
+        picker?.update();
       },
       { flush: 'post' },
     );
diff --git a/src/picker/picker.vue b/src/picker/picker.vue
index ed77a566f..af06c23e5 100644
--- a/src/picker/picker.vue
+++ b/src/picker/picker.vue
@@ -95,25 +95,25 @@ export default defineComponent({
     };
     const handlePick = (context: any, column: number) => {
       if (curValueArray.value[column] !== context.value) {
-        curValueArray.value[column] = context.value;
+        // curValueArray.value[column] = context.value;
         curIndexArray[column] = context.index;
         // 当使用cascade或者dateTimePicker时，需要更新子节点的value和index
-        if (typeof props.columns === 'function') {
-          const result = props.columns(curValueArray.value);
-          result.forEach((item: PickerColumnItem[], index: number) => {
-            if (!item.filter((ele: PickerColumnItem) => ele.value === curValueArray.value[index]).length) {
-              curValueArray.value[index] = item[0]?.value;
-              curIndexArray[index] = 0;
-              nextTick(() => {
-                pickerItemInstanceArray.value[index]?.exposed?.setIndex(0);
-              });
-            } else {
-              nextTick(() => {
-                pickerItemInstanceArray.value[index]?.exposed?.setUpdateItems();
-              });
-            }
-          });
-        }
+        // if (typeof props.columns === 'function') {
+        //   const result = props.columns(curValueArray.value);
+        //   result.forEach((item: PickerColumnItem[], index: number) => {
+        //     if (!item.find((ele: PickerColumnItem) => ele.value === curValueArray.value[index])) {
+        //       curValueArray.value[index] = item[0]?.value;
+        //       curIndexArray[index] = 0;
+        //       nextTick(() => {
+        //         pickerItemInstanceArray.value[index]?.exposed?.setIndex(0);
+        //       });
+        //     } else {
+        //       nextTick(() => {
+        //         pickerItemInstanceArray.value[index]?.exposed?.setUpdateItems();
+        //       });
+        //     }
+        //   });
+        // }
         emitEvent('pick', curValueArray.value, { index: context.index, column });
       }
     };

From 39d4717ad10470d1f596c1e81733cc40c86a6742 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 3 Apr 2023 17:34:05 +0800
Subject: [PATCH 2/6] feat(datetime-picker): finish new picker

---
 src/date-time-picker/date-time-picker.vue | 78 ++++++----------------
 src/date-time-picker/demos/base.vue       |  1 +
 src/picker/picker-item.vue                | 10 +--
 src/picker/picker.class.ts                | 21 ++++--
 src/picker/picker.vue                     | 79 ++++++++---------------
 5 files changed, 70 insertions(+), 119 deletions(-)

diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index 902c6b1e5..cd1c0b6b6 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -1,8 +1,7 @@
 <template>
   <div :class="className">
     <t-picker
-      ref="pickeInstance"
-      :value="currentPicker"
+      :value="pickerValue"
       :title="title"
       :confirm-btn="confirmButtonText"
       :cancel-btn="cancelButtonText"
@@ -11,8 +10,7 @@
       @confirm="onConfirm"
       @cancel="onCancel"
       @pick="onPick"
-    >
-    </t-picker>
+    />
   </div>
 </template>
 
@@ -54,7 +52,6 @@ export default defineComponent({
   emits: ['change', 'cancel', 'confirm', 'pick', 'update:modelValue', 'update:value'],
   setup(props: any, context) {
     const emitEvent = useEmitEvent(props, context.emit);
-    const pickeInstance = ref<any>(null);
     const className = computed(() => [`${name}`]);
     const { value, modelValue } = toRefs(props);
     const [dateTimePickerValue, setDateTimePickerValue] = useVModel(
@@ -97,8 +94,7 @@ export default defineComponent({
     };
 
     // 将dateTimeValue格式的值转为pickerValue，赋值给picker组件的value
-    const getPickerValueByDateTimePickerValue = (value: string | number) => {
-      const currentDate = dayjs(value);
+    const getPickerValueByDateTimePickerValue = (currentDate: Dayjs) => {
       const ret: PickerValue[] = [];
       Object.keys(precisionRankRecord).forEach((item) => {
         if (isPrecision(item)) {
@@ -108,25 +104,6 @@ export default defineComponent({
       return ret;
     };
 
-    // 当默认v-model为空时，当前value取最小日期
-    const pickerValue = ref(getPickerValueByDateTimePickerValue(dateTimePickerValue.value || start.value.valueOf()));
-
-    let lastTimePicker = [...pickerValue.value];
-    let currentPicker = [...pickerValue.value];
-
-    // 将pickerValue格式的值转为dateTimeValue，用于触发事件时进行输出
-    const getDateTimePickerValueByPickerValue = (value: PickerValue[]) => {
-      let valueLength = 0;
-      let date = dayjs();
-      Object.keys(precisionRankRecord).forEach((item, index) => {
-        if (isPrecision(item)) {
-          date = date[item](value[valueLength]);
-          valueLength++;
-        }
-      });
-      return date;
-    };
-
     const curDate = ref(
       (() => {
         const timeMode = ['hour', 'minute', 'second'];
@@ -137,6 +114,14 @@ export default defineComponent({
       })(),
     );
 
+    const rationalize = (val: Dayjs) => {
+      if (val.isBefore(start.value)) return start.value;
+      if (val.isAfter(end.value)) return end.value;
+      return val;
+    };
+
+    const pickerValue = computed(() => getPickerValueByDateTimePickerValue(curDate.value));
+
     // 每次pick后，根据start,end生成最新的columns
     const columns = computed(() => {
       const ret: PickerColumn[] = [];
@@ -147,8 +132,8 @@ export default defineComponent({
 
       const isInMinYear = curYear === minYear;
       const isInMaxYear = curYear === maxYear;
-      const isInMinMonth = isInMinYear && curMonth + 1 === minMonth;
-      const isInMaxMonth = isInMaxYear && curMonth + 1 === maxMonth;
+      const isInMinMonth = isInMinYear && curMonth === minMonth;
+      const isInMaxMonth = isInMaxYear && curMonth === maxMonth;
       const isInMinDay = isInMinMonth && curDay === minDay;
       const isInMaxDay = isInMaxMonth && curDay === maxDay;
       const isInMinHour = isInMinDay && curHour === minHour;
@@ -214,53 +199,27 @@ export default defineComponent({
     });
 
     const onConfirm = (value: Array<PickerValue>, context: { index: number[] }) => {
-      lastTimePicker = [...currentPicker];
-      const currentDate = getDateTimePickerValueByPickerValue(value);
-      emitEvent('confirm', dayjs(currentDate).format(props.format));
+      emitEvent('confirm', dayjs(curDate.value).format(props.format));
     };
 
     const onCancel = (context: { e: MouseEvent }) => {
-      currentPicker = [...lastTimePicker];
       emitEvent('cancel', { e: context.e });
     };
 
     const onChange = (value: Array<PickerValue>, context: { columns: Array<PickerContext>; e: MouseEvent }) => {
-      lastTimePicker = [...currentPicker];
-      const currentDate = getDateTimePickerValueByPickerValue(value);
-      setDateTimePickerValue(dayjs(currentDate).format(props.format));
+      emitEvent('change', dayjs(curDate.value).format(props.format));
     };
 
     const onPick = (value: Array<PickerValue>, context: PickerContext) => {
       const { column, index } = context;
       const type = meaningColumn.value[column];
       const val = curDate.value.set(type as UnitType, parseInt(columns.value[column][index]?.value, 10));
-      curDate.value = val;
-      const currentDate = getDateTimePickerValueByPickerValue(value);
-      emitEvent('pick', dayjs(currentDate).format(props.format));
-    };
 
-    /**
-     * 监听v-model变化，当modelValue发生变化时，更新数据和ui
-     * isChanged用来区分用户直接修改v-model，和滑动picker修改value两种方式
-     * 只有用户滑动picker时，isChanged为true，滑动结束后设为false
-     */
-    watch(
-      () => dateTimePickerValue,
-      (val) => {
-        nextTick(() => {
-          pickeInstance.value?.setValues(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf()));
-          currentPicker = [...ref(getPickerValueByDateTimePickerValue(val.value || start.value.valueOf())).value];
-          lastTimePicker = [...currentPicker];
-        });
-      },
-      {
-        immediate: true,
-        deep: true,
-      },
-    );
+      curDate.value = rationalize(val);
+      emitEvent('pick', val.format(props.format));
+    };
 
     return {
-      pickeInstance,
       className,
       confirmButtonText,
       cancelButtonText,
@@ -268,7 +227,6 @@ export default defineComponent({
       start,
       end,
       pickerValue,
-      currentPicker,
       columns,
       onConfirm,
       onCancel,
diff --git a/src/date-time-picker/demos/base.vue b/src/date-time-picker/demos/base.vue
index 406be8273..ce6f23896 100644
--- a/src/date-time-picker/demos/base.vue
+++ b/src/date-time-picker/demos/base.vue
@@ -5,6 +5,7 @@
       :value="pickerValue"
       :mode="['date']"
       title="选择日期"
+      start="2015-5-5"
       format="YYYY-MM-DD"
       @change="onChange"
       @pick="onPick"
diff --git a/src/picker/picker-item.vue b/src/picker/picker-item.vue
index 6cd554de4..9087b649a 100644
--- a/src/picker/picker-item.vue
+++ b/src/picker/picker-item.vue
@@ -22,7 +22,7 @@ export default defineComponent({
       type: Array as PropType<PickerColumnItem[]>,
       default: () => [],
     },
-    defaultValue: {
+    value: {
       type: [String, Number] as PropType<PickerValue>,
       default: undefined,
     },
@@ -80,8 +80,10 @@ export default defineComponent({
     onMounted(() => {
       picker = new Picker({
         el: root.value,
-        defaultIndex: getIndexByValue(props.defaultValue) || 0,
+        defaultIndex: getIndexByValue(props.value) || 0,
         onChange: (index: number) => {
+          console.log('onchange');
+
           const curItem = props.options[index];
           const changeValue = { value: curItem.value, index };
           emitEvent('pick', changeValue);
@@ -92,9 +94,9 @@ export default defineComponent({
     watch(
       () => props.options,
       () => {
-        picker?.update();
+        picker?.updateItems();
       },
-      { flush: 'post' },
+      { flush: 'post', deep: true },
     );
 
     return {
diff --git a/src/picker/picker.class.ts b/src/picker/picker.class.ts
index 155c56f12..8f0c50914 100644
--- a/src/picker/picker.class.ts
+++ b/src/picker/picker.class.ts
@@ -68,6 +68,8 @@ class Picker {
 
   offsetYOfEnd = 0;
 
+  curValue: string | null = '';
+
   onChange: (index: number) => void;
 
   constructor(options: PickerOptions) {
@@ -105,7 +107,7 @@ class Picker {
     this.elementItems = [...this.holder.querySelectorAll('li')];
     this.itemHeight = this.holder.querySelector('li')?.offsetHeight || DEFAULT_ITEM_HEIGHT;
     this.height = this.holder.offsetHeight || DEFAULT_HOLDER_HEIGHT;
-    this.curIndex = this.options.defaultIndex || 0;
+    let curIndex = this.options.defaultIndex || 0;
     this.itemClassName = `${prefix}-picker-item__item`;
     this.itemSelectedClassName = `${prefix}-picker-item__item--selected`;
     this.itemHeight = DEFAULT_ITEM_HEIGHT;
@@ -114,6 +116,16 @@ class Picker {
     this.lastMoveTime = 0;
     this.lastMoveStart = 0;
     this.stopInertiaMove = false;
+    this.curValue = this.elementItems[curIndex]?.textContent;
+    Object.defineProperty(this, 'curIndex', {
+      set: (value: number) => {
+        curIndex = value;
+        this.curValue = this.elementItems[value]?.textContent;
+      },
+      get() {
+        return curIndex;
+      },
+    });
     const startOffsetY = (-this.curIndex + 2) * this.itemHeight;
     const itemLen = this.elementItems.length;
     this.setOffsetY(startOffsetY);
@@ -230,10 +242,11 @@ class Picker {
   /**
    * @description 更新picker，一般当数据变化需要ui更新的时候调用
    */
-  update(): void {
+  update(options?: any): void {
     this.updateItems();
-    const updateIndex = this.curIndex > this.elementItems.length - 1 ? 0 : this.curIndex;
-    this.updateIndex(updateIndex);
+    const targetIndex = this.elementItems.findIndex((el: HTMLLIElement) => el.textContent === this.curValue);
+    const updateIndex = targetIndex === -1 ? 0 : targetIndex;
+    this.updateIndex(updateIndex, options);
   }
 
   /**
diff --git a/src/picker/picker.vue b/src/picker/picker.vue
index af06c23e5..37ff2b9f5 100644
--- a/src/picker/picker.vue
+++ b/src/picker/picker.vue
@@ -10,7 +10,7 @@
       <div v-for="(item, index) in realColumns" :key="index" :class="`${name}-item__group`">
         <picker-item
           :options="item"
-          :default-value="pickerValue[index]"
+          :value="pickerValue[index]"
           :render-label="renderLabel"
           @pick="handlePick($event, index)"
         />
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { computed, nextTick, defineComponent, toRefs, onMounted, ref, getCurrentInstance } from 'vue';
+import { computed, nextTick, defineComponent, toRefs, onMounted, ref, getCurrentInstance, watch } from 'vue';
 import isString from 'lodash/isString';
 import isBoolean from 'lodash/isBoolean';
 
@@ -49,7 +49,7 @@ export default defineComponent({
     const internalInstance = getCurrentInstance();
     const emitEvent = useEmitEvent(props, context.emit);
     const { value, modelValue } = toRefs(props);
-    const [pickerValue, setPickerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [pickerValue = ref([]), setPickerValue] = useVModel(value, modelValue, [], props.onChange);
     const getDefaultText = (prop: string | boolean, defaultText: string): string => {
       if (isString(prop)) return prop;
       if (isBoolean(prop) && prop) return defaultText;
@@ -61,82 +61,59 @@ export default defineComponent({
     const curValueArray = ref(pickerValue.value.map((item: PickerValue) => item));
     const realColumns = computed(() => {
       if (typeof props.columns === 'function') {
-        const data = props.columns(curValueArray.value);
-        return data;
+        return props.columns(curValueArray.value);
       }
       return props.columns;
     });
-    let lastTimeValueArray = [...curValueArray.value];
-    let curIndexArray = realColumns.value.map((item: PickerColumn, index: number) => {
+    const curIndexArray = realColumns.value.map((item: PickerColumn, index: number) => {
       return getIndexFromColumns(item, pickerValue?.value[index]);
     });
-    let lastTimeIndexArray = [...curIndexArray];
     const pickerItemInstanceArray = ref([]) as any;
+
     onMounted(() => {
       // 获取pickerItem实例，用于更新每个item的value和index
       pickerItemInstanceArray.value = useChildSlots('t-picker-item').map((item) => item.component);
     });
+
     const handleConfirm = (e: MouseEvent) => {
-      // 点击确认后，更新最近一次的picker状态
-      lastTimeValueArray = [...curValueArray.value];
-      lastTimeIndexArray = [...curIndexArray];
-      setPickerValue(curValueArray.value);
-      const label = realColumns.value.map((item: PickerColumnItem, index: number) => item[curIndexArray[index]].label);
-      emitEvent('confirm', curValueArray.value, { index: curIndexArray, label, e });
+      const target = realColumns.value.map((item: PickerColumnItem, index: number) => item[curIndexArray[index]]);
+      const label = target.map((item: PickerColumnItem) => item.label);
+      const value = target.map((item: PickerColumnItem) => item.value);
+      setPickerValue(value);
+      emitEvent('confirm', value, { index: curIndexArray, label, e });
     };
     const handleCancel = (e: MouseEvent) => {
-      // 点击取消后，重置最近一次的picker状态
-      curValueArray.value = [...lastTimeValueArray];
-      curIndexArray = [...lastTimeIndexArray];
       pickerItemInstanceArray.value.forEach((item: any, index: number) => {
         item.exposed?.setIndex(curIndexArray[index]);
       });
       emitEvent('cancel', { e });
     };
     const handlePick = (context: any, column: number) => {
-      if (curValueArray.value[column] !== context.value) {
-        // curValueArray.value[column] = context.value;
-        curIndexArray[column] = context.index;
-        // 当使用cascade或者dateTimePicker时，需要更新子节点的value和index
-        // if (typeof props.columns === 'function') {
-        //   const result = props.columns(curValueArray.value);
-        //   result.forEach((item: PickerColumnItem[], index: number) => {
-        //     if (!item.find((ele: PickerColumnItem) => ele.value === curValueArray.value[index])) {
-        //       curValueArray.value[index] = item[0]?.value;
-        //       curIndexArray[index] = 0;
-        //       nextTick(() => {
-        //         pickerItemInstanceArray.value[index]?.exposed?.setIndex(0);
-        //       });
-        //     } else {
-        //       nextTick(() => {
-        //         pickerItemInstanceArray.value[index]?.exposed?.setUpdateItems();
-        //       });
-        //     }
-        //   });
-        // }
-        emitEvent('pick', curValueArray.value, { index: context.index, column });
-      }
-    };
+      const { index } = context;
 
-    const setValues = (values: string[]) => {
-      curValueArray.value = values;
-      setPickerValue(values);
-      // 等columns更新完后，再更新value
-      nextTick(() => {
-        pickerItemInstanceArray.value.forEach((item: any, index: number) => {
-          item.exposed?.setValue(values[index]);
-        });
-      });
+      curIndexArray[column] = index;
+      curValueArray.value[column] = realColumns.value[column][index]?.value;
+
+      emitEvent('pick', curValueArray.value, { index, column });
     };
 
-    useExpose({
-      setValues,
+    watch(pickerValue, () => {
+      curValueArray.value = pickerValue.value.map((item: PickerValue) => item);
+    });
+
+    watch([realColumns, curValueArray], () => {
+      realColumns.value.forEach((col: PickerColumn, idx: number) => {
+        const index = col.findIndex((item: PickerColumnItem) => item.value === curValueArray.value[idx]);
+        curIndexArray[idx] = index > -1 ? index : 0;
+        pickerItemInstanceArray.value[idx].exposed?.setIndex(curIndexArray[idx]);
+      });
     });
 
     return {
       name,
       header,
       pickerValue,
+      curIndexArray,
       confirmButtonText,
       cancelButtonText,
       handleConfirm,

From dfc33c74ef577f3c49081d49bb2b8454a2d1218f Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 3 Apr 2023 17:51:02 +0800
Subject: [PATCH 3/6] fix(date-time-picker): resolve time mode

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 2945 ++++-------------
 .../__snapshots__/index.test.jsx.snap         |  400 ---
 src/date-time-picker/date-time-picker.vue     |    5 +-
 src/date-time-picker/demos/time.vue           |    2 +-
 4 files changed, 648 insertions(+), 2704 deletions(-)
 delete mode 100644 src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap

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 e1f1fd664..365bf0b9d 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -99,113 +99,103 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
               >
                 <ul
                   class="t-picker-item"
-                  style="transform: translate3d(0, -240px, 0);"
+                  style="transform: translate3d(0, -160px, 0);"
                 >
                   
                   <li
                     class="t-picker-item__item"
                   >
-                    2013
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    2014
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    2015
+                    2015 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2016
+                    2016 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2017
+                    2017 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2018
+                    2018 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2019
+                    2019 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2020
+                    2020 年
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    2021
+                    2021 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2022
+                    2022 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2023
+                    2023 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2024
+                    2024 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2025
+                    2025 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2026
+                    2026 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2027
+                    2027 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2028
+                    2028 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2029
+                    2029 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2030
+                    2030 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2031
+                    2031 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2032
+                    2032 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2033
+                    2033 年
                   </li>
                   
                 </ul>
@@ -221,62 +211,62 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    1
+                    1 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2
+                    2 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    3
+                    3 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    4
+                    4 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    5
+                    5 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    6
+                    6 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    7
+                    7 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    8
+                    8 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    9
+                    9 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    10
+                    10 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    11
+                    11 月
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    12
+                    12 月
                   </li>
                   
                 </ul>
@@ -292,157 +282,157 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    1
+                    1 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2
+                    2 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    3
+                    3 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    4
+                    4 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    5
+                    5 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    6
+                    6 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    7
+                    7 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    8
+                    8 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    9
+                    9 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    10
+                    10 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    11
+                    11 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    12
+                    12 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    13
+                    13 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    14
+                    14 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    15
+                    15 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    16
+                    16 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    17
+                    17 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    18
+                    18 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    19
+                    19 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    20
+                    20 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    21
+                    21 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    22
+                    22 日
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    23
+                    23 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    24
+                    24 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    25
+                    25 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    26
+                    26 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    27
+                    27 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    28
+                    28 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    29
+                    29 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    30
+                    30 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    31
+                    31 日
                   </li>
                   
                 </ul>
@@ -574,32 +564,32 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    2020
+                    2020 年
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    2021
+                    2021 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2022
+                    2022 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2023
+                    2023 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2024
+                    2024 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2025
+                    2025 年
                   </li>
                   
                 </ul>
@@ -615,62 +605,62 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    1
+                    1 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2
+                    2 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    3
+                    3 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    4
+                    4 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    5
+                    5 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    6
+                    6 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    7
+                    7 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    8
+                    8 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    9
+                    9 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    10
+                    10 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    11
+                    11 月
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    12
+                    12 月
                   </li>
                   
                 </ul>
@@ -686,157 +676,157 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    1
+                    1 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2
+                    2 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    3
+                    3 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    4
+                    4 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    5
+                    5 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    6
+                    6 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    7
+                    7 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    8
+                    8 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    9
+                    9 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    10
+                    10 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    11
+                    11 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    12
+                    12 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    13
+                    13 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    14
+                    14 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    15
+                    15 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    16
+                    16 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    17
+                    17 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    18
+                    18 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    19
+                    19 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    20
+                    20 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    21
+                    21 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    22
+                    22 日
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    23
+                    23 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    24
+                    24 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    25
+                    25 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    26
+                    26 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    27
+                    27 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    28
+                    28 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    29
+                    29 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    30
+                    30 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    31
+                    31 日
                   </li>
                   
                 </ul>
@@ -968,107 +958,107 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    2013
+                    2013 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2014
+                    2014 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2015
+                    2015 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2016
+                    2016 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2017
+                    2017 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2018
+                    2018 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2019
+                    2019 年
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    2020
+                    2020 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2021
+                    2021 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2022
+                    2022 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2023
+                    2023 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2024
+                    2024 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2025
+                    2025 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2026
+                    2026 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2027
+                    2027 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2028
+                    2028 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2029
+                    2029 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2030
+                    2030 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2031
+                    2031 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2032
+                    2032 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2033
+                    2033 年
                   </li>
                   
                 </ul>
@@ -1084,62 +1074,62 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    1
+                    1 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2
+                    2 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    3
+                    3 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    4
+                    4 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    5
+                    5 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    6
+                    6 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    7
+                    7 月
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    8
+                    8 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    9
+                    9 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    10
+                    10 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    11
+                    11 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    12
+                    12 月
                   </li>
                   
                 </ul>
@@ -1155,1059 +1145,306 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    1
+                    1 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2
+                    2 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    3
+                    3 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    4
+                    4 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    5
+                    5 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    6
+                    6 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    7
+                    7 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    8
+                    8 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    9
+                    9 日
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    10
+                    10 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    11
+                    11 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    12
+                    12 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    13
+                    13 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    14
+                    14 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    15
+                    15 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    16
+                    16 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    17
+                    17 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    18
+                    18 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    19
+                    19 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    20
+                    20 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    21
+                    21 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    22
+                    22 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    23
+                    23 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    24
+                    24 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    25
+                    25 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    26
+                    26 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    27
+                    27 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    28
+                    28 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    29
+                    29 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    30
+                    30 日
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    31
+                    31 日
                   </li>
                   
                 </ul>
               </div>
+              
               <div
-                class="t-picker-item__group"
+                class="t-picker__mask t-picker__mask--top"
+              />
+              <div
+                class="t-picker__mask t-picker__mask--bottom"
+              />
+              <div
+                class="t-picker__indicator"
+              />
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </transition-stub>
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
+
+exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    DateTimePicker 时间选择器
+  </h1>
+  <p
+    class="summary"
+  >
+    用于选择一个时间点或者一个时间段
+  </p>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        基本用法
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="t-cell t-cell--middle t-cell--bordered"
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          选择日期(年月日)
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__note"
+        >
+          年 月 日
+        </div>
+        <!--v-if-->
+      </div>
+      <!--teleport start-->
+      <div
+        class="t-popup"
+      >
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade"
+          persisted="false"
+        >
+          <transition-stub
+            appear="false"
+            css="true"
+            name="t-overlay"
+            persisted="true"
+          >
+            <div
+              class="t-overlay"
+              style="z-index: 1000; transition-duration: 300ms; display: none;"
+            >
+              
+              
+            </div>
+          </transition-stub>
+        </transition-stub>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="slide-bottom"
+          persisted="true"
+        >
+          <div
+            class="t-popup--content t-popup--content-bottom"
+            style="display: none;"
+          >
+            
+            <div
+              class="t-date-time-picker"
+            >
+              <div
+                class="t-picker"
               >
-                <ul
-                  class="t-picker-item"
-                  style="transform: translate3d(0, -400px, 0);"
+                <div
+                  class="t-picker__toolbar"
                 >
-                  
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    0
-                  </li>
-                  <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>
-                  <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"
+                  <div
+                    class="t-picker__cancel"
                   >
-                    21
-                  </li>
-                  <li
-                    class="t-picker-item__item"
+                    取消
+                  </div>
+                  <div
+                    class="t-picker__title"
                   >
-                    22
-                  </li>
-                  <li
-                    class="t-picker-item__item"
+                    选择日期
+                  </div>
+                  <div
+                    class="t-picker__confirm"
                   >
-                    23
-                  </li>
-                  
-                </ul>
-              </div>
-              <div
-                class="t-picker-item__group"
-              >
-                <ul
-                  class="t-picker-item"
-                  style="transform: translate3d(0, -1920px, 0);"
-                >
-                  
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    0
-                  </li>
-                  <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"
-                  >
-                    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>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    32
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    33
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    34
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    35
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    36
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    37
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    38
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    39
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    40
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    41
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    42
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    43
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    44
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    45
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    46
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    47
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    48
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    49
-                  </li>
-                  <li
-                    class="t-picker-item__item t-picker-item__item--selected"
-                  >
-                    50
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    51
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    52
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    53
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    54
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    55
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    56
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    57
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    58
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    59
-                  </li>
-                  
-                </ul>
-              </div>
-              <div
-                class="t-picker-item__group"
-              >
-                <ul
-                  class="t-picker-item"
-                  style="transform: translate3d(0, 80px, 0);"
-                >
-                  
-                  <li
-                    class="t-picker-item__item t-picker-item__item--selected"
-                  >
-                    0
-                  </li>
-                  <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"
-                  >
-                    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>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    32
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    33
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    34
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    35
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    36
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    37
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    38
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    39
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    40
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    41
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    42
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    43
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    44
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    45
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    46
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    47
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    48
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    49
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    50
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    51
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    52
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    53
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    54
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    55
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    56
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    57
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    58
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    59
-                  </li>
-                  
-                </ul>
-              </div>
-              
-              <div
-                class="t-picker__mask t-picker__mask--top"
-              />
-              <div
-                class="t-picker__mask t-picker__mask--bottom"
-              />
-              <div
-                class="t-picker__indicator"
-              />
-            </div>
-          </div>
-        </div>
-        
-      </div>
-    </transition-stub>
-  </div>
-  <!--teleport end-->
-  
-</div>
-`;
-
-exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
-<div
-  class="tdesign-mobile-demo"
->
-  <h1
-    class="title"
-  >
-    DateTimePicker 时间选择器
-  </h1>
-  <p
-    class="summary"
-  >
-    用于选择一个时间点或者一个时间段
-  </p>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        01 类型
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        基本用法
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
-      
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          选择日期(年月日)
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          年 月 日
-        </div>
-        <!--v-if-->
-      </div>
-      <!--teleport start-->
-      <div
-        class="t-popup"
-      >
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade"
-          persisted="false"
-        >
-          <transition-stub
-            appear="false"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-        </transition-stub>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="slide-bottom"
-          persisted="true"
-        >
-          <div
-            class="t-popup--content t-popup--content-bottom"
-            style="display: none;"
-          >
-            
-            <div
-              class="t-date-time-picker"
-            >
-              <div
-                class="t-picker"
-              >
-                <div
-                  class="t-picker__toolbar"
-                >
-                  <div
-                    class="t-picker__cancel"
-                  >
-                    取消
-                  </div>
-                  <div
-                    class="t-picker__title"
-                  >
-                    选择日期
-                  </div>
-                  <div
-                    class="t-picker__confirm"
-                  >
-                    确定
-                  </div>
-                </div>
-                <!---->
-                <div
-                  class="t-picker__main"
+                    确定
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="t-picker__main"
                 >
                   
                   <div
@@ -2215,113 +1452,103 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item"
-                      style="transform: translate3d(0, -240px, 0);"
+                      style="transform: translate3d(0, -160px, 0);"
                     >
                       
                       <li
                         class="t-picker-item__item"
                       >
-                        2013
-                      </li>
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        2014
-                      </li>
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        2015
+                        2015 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2016
+                        2016 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2017
+                        2017 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2018
+                        2018 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2019
+                        2019 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2020
+                        2020 年
                       </li>
                       <li
                         class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        2021
+                        2021 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2022
+                        2022 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2023
+                        2023 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2024
+                        2024 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2025
+                        2025 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2026
+                        2026 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2027
+                        2027 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2028
+                        2028 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2029
+                        2029 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2030
+                        2030 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2031
+                        2031 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2032
+                        2032 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2033
+                        2033 年
                       </li>
                       
                     </ul>
@@ -2337,524 +1564,228 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       <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__group"
-                  >
-                    <ul
-                      class="t-picker-item"
-                      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
+                        1 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        13
+                        2 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        14
+                        3 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        15
+                        4 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        16
+                        5 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        17
+                        6 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        18
+                        7 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        19
+                        8 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        20
+                        9 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        21
+                        10 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        22
+                        11 月
                       </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
+                        12 月
                       </li>
                       
-                    </ul>
-                  </div>
-                  
-                  <div
-                    class="t-picker__mask t-picker__mask--top"
-                  />
-                  <div
-                    class="t-picker__mask t-picker__mask--bottom"
-                  />
-                  <div
-                    class="t-picker__indicator"
-                  />
-                </div>
-              </div>
-            </div>
-            
-          </div>
-        </transition-stub>
-      </div>
-      <!--teleport end-->
-      
-      
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          选择日期(年月)
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          年 月
-        </div>
-        <!--v-if-->
-      </div>
-      <!--teleport start-->
-      <div
-        class="t-popup"
-      >
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade"
-          persisted="false"
-        >
-          <transition-stub
-            appear="false"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-        </transition-stub>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="slide-bottom"
-          persisted="true"
-        >
-          <div
-            class="t-popup--content t-popup--content-bottom"
-            style="display: none;"
-          >
-            
-            <div
-              class="t-date-time-picker"
-            >
-              <div
-                class="t-picker"
-              >
-                <div
-                  class="t-picker__toolbar"
-                >
-                  <div
-                    class="t-picker__cancel"
-                  >
-                    取消
-                  </div>
-                  <div
-                    class="t-picker__title"
-                  >
-                    选择日期
-                  </div>
-                  <div
-                    class="t-picker__confirm"
-                  >
-                    确定
-                  </div>
-                </div>
-                <!---->
-                <div
-                  class="t-picker__main"
-                >
-                  
+                    </ul>
+                  </div>
                   <div
                     class="t-picker-item__group"
                   >
                     <ul
                       class="t-picker-item"
-                      style="transform: translate3d(0, -240px, 0);"
+                      style="transform: translate3d(0, -800px, 0);"
                     >
                       
                       <li
                         class="t-picker-item__item"
                       >
-                        2013
+                        1 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2014
+                        2 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2015
+                        3 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2016
+                        4 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2017
+                        5 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2018
+                        6 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2019
+                        7 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2020
-                      </li>
-                      <li
-                        class="t-picker-item__item t-picker-item__item--selected"
-                      >
-                        2021
+                        8 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2022
+                        9 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2023
+                        10 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2024
+                        11 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2025
+                        12 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2026
+                        13 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2027
+                        14 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2028
+                        15 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2029
+                        16 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2030
+                        17 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2031
+                        18 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2032
+                        19 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2033
+                        20 日
                       </li>
-                      
-                    </ul>
-                  </div>
-                  <div
-                    class="t-picker-item__group"
-                  >
-                    <ul
-                      class="t-picker-item"
-                      style="transform: translate3d(0, -240px, 0);"
-                    >
-                      
                       <li
                         class="t-picker-item__item"
                       >
-                        1
+                        21 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2
+                        22 日
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        3
+                        23 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        4
+                        24 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        5
+                        25 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        6
+                        26 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        7
+                        27 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        8
-                      </li>
-                      <li
-                        class="t-picker-item__item t-picker-item__item--selected"
-                      >
-                        9
+                        28 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        10
+                        29 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        11
+                        30 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        12
+                        31 日
                       </li>
                       
                     </ul>
@@ -2891,14 +1822,14 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         <div
           class="t-cell__title"
         >
-          选择日期(时分)
+          选择日期(年月)
           <!--v-if-->
           <!--v-if-->
         </div>
         <div
           class="t-cell__note"
         >
-          时 分
+          年 月
         </div>
         <!--v-if-->
       </div>
@@ -2962,450 +1893,195 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     确定
                   </div>
-                </div>
-                <!---->
-                <div
-                  class="t-picker__main"
-                >
-                  
-                  <div
-                    class="t-picker-item__group"
-                  >
-                    <ul
-                      class="t-picker-item"
-                      style="transform: translate3d(0, -320px, 0);"
-                    >
-                      
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        0
-                      </li>
-                      <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>
-                      <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"
-                      >
-                        23
-                      </li>
-                      
-                    </ul>
-                  </div>
-                  <div
-                    class="t-picker-item__group"
-                  >
-                    <ul
-                      class="t-picker-item"
-                      style="transform: translate3d(0, -320px, 0);"
-                    >
-                      
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        0
-                      </li>
-                      <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>
-                      <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"
-                      >
-                        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>
+                </div>
+                <!---->
+                <div
+                  class="t-picker__main"
+                >
+                  
+                  <div
+                    class="t-picker-item__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      style="transform: translate3d(0, -240px, 0);"
+                    >
+                      
                       <li
                         class="t-picker-item__item"
                       >
-                        27
+                        2013 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        28
+                        2014 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        29
+                        2015 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        30
+                        2016 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        31
+                        2017 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        32
+                        2018 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        33
+                        2019 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        34
+                        2020 年
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        35
+                        2021 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        36
+                        2022 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        37
+                        2023 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        38
+                        2024 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        39
+                        2025 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        40
+                        2026 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        41
+                        2027 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        42
+                        2028 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        43
+                        2029 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        44
+                        2030 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        45
+                        2031 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        46
+                        2032 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        47
+                        2033 年
                       </li>
+                      
+                    </ul>
+                  </div>
+                  <div
+                    class="t-picker-item__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      style="transform: translate3d(0, -240px, 0);"
+                    >
+                      
                       <li
                         class="t-picker-item__item"
                       >
-                        48
+                        1 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        49
+                        2 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        50
+                        3 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        51
+                        4 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        52
+                        5 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        53
+                        6 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        54
+                        7 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        55
+                        8 月
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        56
+                        9 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        57
+                        10 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        58
+                        11 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        59
+                        12 月
                       </li>
                       
                     </ul>
@@ -3430,6 +2106,115 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
       <!--teleport end-->
       
       
+      <div
+        class="t-cell t-cell--middle t-cell--bordered"
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          选择日期(时分)
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__note"
+        >
+          时 分
+        </div>
+        <!--v-if-->
+      </div>
+      <!--teleport start-->
+      <div
+        class="t-popup"
+      >
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade"
+          persisted="false"
+        >
+          <transition-stub
+            appear="false"
+            css="true"
+            name="t-overlay"
+            persisted="true"
+          >
+            <div
+              class="t-overlay"
+              style="z-index: 1000; transition-duration: 300ms; display: none;"
+            >
+              
+              
+            </div>
+          </transition-stub>
+        </transition-stub>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="slide-bottom"
+          persisted="true"
+        >
+          <div
+            class="t-popup--content t-popup--content-bottom"
+            style="display: none;"
+          >
+            
+            <div
+              class="t-date-time-picker"
+            >
+              <div
+                class="t-picker"
+              >
+                <div
+                  class="t-picker__toolbar"
+                >
+                  <div
+                    class="t-picker__cancel"
+                  >
+                    取消
+                  </div>
+                  <div
+                    class="t-picker__title"
+                  >
+                    选择日期
+                  </div>
+                  <div
+                    class="t-picker__confirm"
+                  >
+                    确定
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="t-picker__main"
+                >
+                  
+                  
+                  <div
+                    class="t-picker__mask t-picker__mask--top"
+                  />
+                  <div
+                    class="t-picker__mask t-picker__mask--bottom"
+                  />
+                  <div
+                    class="t-picker__indicator"
+                  />
+                </div>
+              </div>
+            </div>
+            
+          </div>
+        </transition-stub>
+      </div>
+      <!--teleport end-->
+      
+      
     </div>
   </div>
   <div
@@ -3554,32 +2339,32 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       <li
                         class="t-picker-item__item"
                       >
-                        2020
+                        2020 年
                       </li>
                       <li
                         class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        2021
+                        2021 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2022
+                        2022 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2023
+                        2023 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2024
+                        2024 年
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2025
+                        2025 年
                       </li>
                       
                     </ul>
@@ -3595,62 +2380,62 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       <li
                         class="t-picker-item__item"
                       >
-                        1
+                        1 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2
+                        2 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        3
+                        3 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        4
+                        4 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        5
+                        5 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        6
+                        6 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        7
+                        7 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        8
+                        8 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        9
+                        9 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        10
+                        10 月
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        11
+                        11 月
                       </li>
                       <li
                         class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        12
+                        12 月
                       </li>
                       
                     </ul>
@@ -3666,157 +2451,157 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       <li
                         class="t-picker-item__item"
                       >
-                        1
+                        1 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2
+                        2 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        3
+                        3 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        4
+                        4 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        5
+                        5 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        6
+                        6 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        7
+                        7 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        8
+                        8 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        9
+                        9 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        10
+                        10 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        11
+                        11 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        12
+                        12 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        13
+                        13 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        14
+                        14 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        15
+                        15 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        16
+                        16 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        17
+                        17 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        18
+                        18 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        19
+                        19 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        20
+                        20 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        21
+                        21 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        22
+                        22 日
                       </li>
                       <li
                         class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        23
+                        23 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        24
+                        24 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        25
+                        25 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        26
+                        26 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        27
+                        27 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        28
+                        28 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        29
+                        29 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        30
+                        30 日
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        31
+                        31 日
                       </li>
                       
                     </ul>
@@ -3927,461 +2712,19 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
               <div
                 class="t-picker__title"
               >
-                选择日期
-              </div>
-              <div
-                class="t-picker__confirm"
-              >
-                确定
-              </div>
-            </div>
-            <!---->
-            <div
-              class="t-picker__main"
-            >
-              
-              <div
-                class="t-picker-item__group"
-              >
-                <ul
-                  class="t-picker-item"
-                  style="transform: translate3d(0, -320px, 0);"
-                >
-                  
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    0
-                  </li>
-                  <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>
-                  <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"
-                  >
-                    23
-                  </li>
-                  
-                </ul>
+                选择日期
               </div>
               <div
-                class="t-picker-item__group"
+                class="t-picker__confirm"
               >
-                <ul
-                  class="t-picker-item"
-                  style="transform: translate3d(0, -320px, 0);"
-                >
-                  
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    0
-                  </li>
-                  <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>
-                  <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"
-                  >
-                    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>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    32
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    33
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    34
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    35
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    36
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    37
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    38
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    39
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    40
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    41
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    42
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    43
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    44
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    45
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    46
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    47
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    48
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    49
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    50
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    51
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    52
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    53
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    54
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    55
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    56
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    57
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    58
-                  </li>
-                  <li
-                    class="t-picker-item__item"
-                  >
-                    59
-                  </li>
-                  
-                </ul>
+                确定
               </div>
+            </div>
+            <!---->
+            <div
+              class="t-picker__main"
+            >
+              
               
               <div
                 class="t-picker__mask t-picker__mask--top"
@@ -4509,107 +2852,107 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    2013
+                    2013 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2014
+                    2014 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2015
+                    2015 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2016
+                    2016 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2017
+                    2017 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2018
+                    2018 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2019
+                    2019 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2020
+                    2020 年
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    2021
+                    2021 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2022
+                    2022 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2023
+                    2023 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2024
+                    2024 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2025
+                    2025 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2026
+                    2026 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2027
+                    2027 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2028
+                    2028 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2029
+                    2029 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2030
+                    2030 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2031
+                    2031 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2032
+                    2032 年
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2033
+                    2033 年
                   </li>
                   
                 </ul>
@@ -4625,62 +2968,62 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
                   <li
                     class="t-picker-item__item"
                   >
-                    1
+                    1 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    2
+                    2 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    3
+                    3 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    4
+                    4 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    5
+                    5 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    6
+                    6 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    7
+                    7 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    8
+                    8 月
                   </li>
                   <li
                     class="t-picker-item__item t-picker-item__item--selected"
                   >
-                    9
+                    9 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    10
+                    10 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    11
+                    11 月
                   </li>
                   <li
                     class="t-picker-item__item"
                   >
-                    12
+                    12 月
                   </li>
                   
                 </ul>
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index a90000468..000000000
--- a/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,400 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`DateTimePicker > props > : onPick 1`] = `
-<div
-  class="t-date-time-picker"
->
-  <div
-    class="t-picker"
-  >
-    <div
-      class="t-picker__toolbar"
-    >
-      <div
-        class="t-picker__cancel"
-      >
-        取消
-      </div>
-      <div
-        class="t-picker__title"
-      >
-        选择时间
-      </div>
-      <div
-        class="t-picker__confirm"
-      >
-        确定
-      </div>
-    </div>
-    <!---->
-    <div
-      class="t-picker__main"
-    >
-      
-      <div
-        class="t-picker-item__group"
-      >
-        <ul
-          class="t-picker-item"
-          style="transform: translate3d(0, -400px, 0); transition: 150ms ease-out;"
-        >
-          
-          <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"
-          >
-            2024
-          </li>
-          <li
-            class="t-picker-item__item t-picker-item__item--selected"
-          >
-            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>
-          <li
-            class="t-picker-item__item"
-          >
-            2033
-          </li>
-          
-        </ul>
-      </div>
-      <div
-        class="t-picker-item__group"
-      >
-        <ul
-          class="t-picker-item"
-          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__group"
-      >
-        <ul
-          class="t-picker-item"
-          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
-        class="t-picker__mask t-picker__mask--top"
-      />
-      <div
-        class="t-picker__mask t-picker__mask--bottom"
-      />
-      <div
-        class="t-picker__indicator"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index cd1c0b6b6..218300a7c 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -19,7 +19,6 @@ 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 isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
 import isArray from 'lodash/isArray';
 
@@ -83,10 +82,12 @@ export default defineComponent({
         return false;
       }
 
+      const arrayIndex = ['year', 'month', 'date'].includes(type) ? 0 : 1;
+
       if (type in precisionRankRecord) {
         return (
           (isString(props.mode) && precisionRankRecord[props.mode] >= precisionRankRecord[type]) ||
-          (isObject(props.mode) && precisionRankRecord[props.mode[0]] >= precisionRankRecord[type])
+          (isArray(props.mode) && precisionRankRecord[props.mode[arrayIndex]] >= precisionRankRecord[type])
         );
       }
 
diff --git a/src/date-time-picker/demos/time.vue b/src/date-time-picker/demos/time.vue
index a6e4709a0..6e29b614d 100644
--- a/src/date-time-picker/demos/time.vue
+++ b/src/date-time-picker/demos/time.vue
@@ -2,7 +2,7 @@
   <t-cell title="选择日期(时分)" :note="pickerValue || '时 分'" @click="visible = true" />
   <t-popup v-model="visible" placement="bottom">
     <t-date-time-picker
-      default-value="2022-10-10 10:10"
+      default-value="10:10"
       :mode="[null, 'minute']"
       title="选择日期"
       format="HH:mm"

From 8f70e2607f267d3d4136214d5e47f671feb403ca Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 3 Apr 2023 18:03:53 +0800
Subject: [PATCH 4/6] fix(date-time-picker): resolve time mode

---
 src/date-time-picker/date-time-picker.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index 218300a7c..a9fbdca41 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -141,6 +141,7 @@ export default defineComponent({
       const isInMaxHour = isInMaxDay && curHour === maxHour;
       const isInMinMinute = isInMinHour && curMinute === minMinute;
       const isInMaxMinute = isInMaxHour && curMinute === maxMinute;
+      const isTimeMode = isArray(props.mode) && props.mode[0] == null;
 
       const typeUnit = {
         year: '年',
@@ -180,20 +181,20 @@ export default defineComponent({
       }
 
       if (isPrecision('hour')) {
-        const lower = isInMinDay ? minHour : 0;
-        const upper = isInMaxDay ? maxHour : 23;
+        const lower = isInMinDay && !isTimeMode ? minHour : 0;
+        const upper = isInMaxDay && !isTimeMode ? maxHour : 23;
         generateColumn(lower, upper, 'hour');
       }
 
       if (isPrecision('minute')) {
-        const lower = isInMinHour ? minMinute : 0;
-        const upper = isInMaxHour ? maxMinute : 59;
+        const lower = isInMinHour && !isTimeMode ? minMinute : 0;
+        const upper = isInMaxHour && !isTimeMode ? maxMinute : 59;
         generateColumn(lower, upper, 'minute');
       }
 
       if (isPrecision('second')) {
-        const lower = isInMinMinute ? minSecond : 0;
-        const upper = isInMaxMinute ? maxSecond : 59;
+        const lower = isInMinMinute && !isTimeMode ? minSecond : 0;
+        const upper = isInMaxMinute && !isTimeMode ? maxSecond : 59;
         generateColumn(lower, upper, 'second');
       }
       return ret;

From c30d9320869e09c7986587588f990633c017973c Mon Sep 17 00:00:00 2001
From: Peter Qiu <273743552@qq.com>
Date: Mon, 3 Apr 2023 23:08:41 +0800
Subject: [PATCH 5/6] fix(date-time-picker): resolve time mode

---
 .../__snapshots__/index.test.jsx.snap         | 400 ++++++++++++++++++
 src/date-time-picker/__test__/index.test.jsx  |   4 +-
 src/date-time-picker/date-time-picker.vue     |  22 +-
 src/picker/picker.vue                         |   2 +-
 4 files changed, 415 insertions(+), 13 deletions(-)
 create mode 100644 src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap

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 000000000..bc21bcc52
--- /dev/null
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,400 @@
+// Vitest Snapshot v1
+
+exports[`DateTimePicker > props > : onPick 1`] = `
+<div
+  class="t-date-time-picker"
+>
+  <div
+    class="t-picker"
+  >
+    <div
+      class="t-picker__toolbar"
+    >
+      <div
+        class="t-picker__cancel"
+      >
+        取消
+      </div>
+      <div
+        class="t-picker__title"
+      >
+        选择时间
+      </div>
+      <div
+        class="t-picker__confirm"
+      >
+        确定
+      </div>
+    </div>
+    <!---->
+    <div
+      class="t-picker__main"
+    >
+      
+      <div
+        class="t-picker-item__group"
+      >
+        <ul
+          class="t-picker-item"
+          style="transform: translate3d(0, -400px, 0); transition: 150ms ease-out;"
+        >
+          
+          <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"
+          >
+            2024 年
+          </li>
+          <li
+            class="t-picker-item__item t-picker-item__item--selected"
+          >
+            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>
+          <li
+            class="t-picker-item__item"
+          >
+            2033 年
+          </li>
+          
+        </ul>
+      </div>
+      <div
+        class="t-picker-item__group"
+      >
+        <ul
+          class="t-picker-item"
+          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__group"
+      >
+        <ul
+          class="t-picker-item"
+          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
+        class="t-picker__mask t-picker__mask--top"
+      />
+      <div
+        class="t-picker__mask t-picker__mask--bottom"
+      />
+      <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
index b4e419e34..9f8a461c6 100644
--- a/src/date-time-picker/__test__/index.test.jsx
+++ b/src/date-time-picker/__test__/index.test.jsx
@@ -211,7 +211,7 @@ describe('DateTimePicker', () => {
       const $confirmButton = wrapper.find(`.${prefix}-picker__confirm`);
       await $confirmButton.trigger('click');
       expect(onConfirm).toBeCalledTimes(1);
-      expect(onChange).toBeCalledTimes(0); // value 不变，不触发 change
+      expect(onChange).toBeCalledTimes(1);
       expect(onPick).toBeCalledTimes(0);
       const el = wrapper.findAll(`.${prefix}-picker-item`);
       const touchItemIndex = 0;
@@ -221,7 +221,7 @@ describe('DateTimePicker', () => {
       expect(onPick).toBeCalledTimes(1);
       await $confirmButton.trigger('click');
       expect(onConfirm).toBeCalledTimes(2);
-      expect(onChange).toBeCalledTimes(1);
+      expect(onChange).toBeCalledTimes(2);
       expect(initValue.value).toEqual(`${ret[touchItemIndex][10 + touchIndex].value}-${addZero(M)}-${addZero(D)}`);
     });
   });
diff --git a/src/date-time-picker/date-time-picker.vue b/src/date-time-picker/date-time-picker.vue
index a9fbdca41..d0861a2a1 100644
--- a/src/date-time-picker/date-time-picker.vue
+++ b/src/date-time-picker/date-time-picker.vue
@@ -75,6 +75,9 @@ export default defineComponent({
     });
 
     const meaningColumn = computed(() => getMeaningColumn(props.mode));
+    const isTimeMode = computed(
+      () => ['hour', 'minute', 'second'].includes(props.mode) || (isArray(props.mode) && props.mode[0] == null),
+    );
 
     // 根据mode，判断是否需要渲染'year','month','date','hour','minute','second'对应的列
     const isPrecision = (type: string) => {
@@ -107,8 +110,7 @@ export default defineComponent({
 
     const curDate = ref(
       (() => {
-        const timeMode = ['hour', 'minute', 'second'];
-        if (timeMode.includes(props.mode) || (isArray(props.mode) && props.mode?.[0] == null)) {
+        if (isTimeMode.value) {
           return dayjs(`1900-1-1 ${innerValue.value}`);
         }
         return dayjs(innerValue.value);
@@ -116,6 +118,7 @@ export default defineComponent({
     );
 
     const rationalize = (val: Dayjs) => {
+      if (isTimeMode.value) return val;
       if (val.isBefore(start.value)) return start.value;
       if (val.isAfter(end.value)) return end.value;
       return val;
@@ -141,7 +144,6 @@ export default defineComponent({
       const isInMaxHour = isInMaxDay && curHour === maxHour;
       const isInMinMinute = isInMinHour && curMinute === minMinute;
       const isInMaxMinute = isInMaxHour && curMinute === maxMinute;
-      const isTimeMode = isArray(props.mode) && props.mode[0] == null;
 
       const typeUnit = {
         year: '年',
@@ -181,20 +183,20 @@ export default defineComponent({
       }
 
       if (isPrecision('hour')) {
-        const lower = isInMinDay && !isTimeMode ? minHour : 0;
-        const upper = isInMaxDay && !isTimeMode ? maxHour : 23;
+        const lower = isInMinDay && !isTimeMode.value ? minHour : 0;
+        const upper = isInMaxDay && !isTimeMode.value ? maxHour : 23;
         generateColumn(lower, upper, 'hour');
       }
 
       if (isPrecision('minute')) {
-        const lower = isInMinHour && !isTimeMode ? minMinute : 0;
-        const upper = isInMaxHour && !isTimeMode ? maxMinute : 59;
+        const lower = isInMinHour && !isTimeMode.value ? minMinute : 0;
+        const upper = isInMaxHour && !isTimeMode.value ? maxMinute : 59;
         generateColumn(lower, upper, 'minute');
       }
 
       if (isPrecision('second')) {
-        const lower = isInMinMinute && !isTimeMode ? minSecond : 0;
-        const upper = isInMaxMinute && !isTimeMode ? maxSecond : 59;
+        const lower = isInMinMinute && !isTimeMode.value ? minSecond : 0;
+        const upper = isInMaxMinute && !isTimeMode.value ? maxSecond : 59;
         generateColumn(lower, upper, 'second');
       }
       return ret;
@@ -218,7 +220,7 @@ export default defineComponent({
       const val = curDate.value.set(type as UnitType, parseInt(columns.value[column][index]?.value, 10));
 
       curDate.value = rationalize(val);
-      emitEvent('pick', val.format(props.format));
+      emitEvent('pick', curDate.value.format(props.format));
     };
 
     return {
diff --git a/src/picker/picker.vue b/src/picker/picker.vue
index 37ff2b9f5..8ec256e7c 100644
--- a/src/picker/picker.vue
+++ b/src/picker/picker.vue
@@ -49,7 +49,7 @@ export default defineComponent({
     const internalInstance = getCurrentInstance();
     const emitEvent = useEmitEvent(props, context.emit);
     const { value, modelValue } = toRefs(props);
-    const [pickerValue = ref([]), setPickerValue] = useVModel(value, modelValue, [], props.onChange);
+    const [pickerValue = ref([]), setPickerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
     const getDefaultText = (prop: string | boolean, defaultText: string): string => {
       if (isString(prop)) return prop;
       if (isBoolean(prop) && prop) return defaultText;

From 6b52a1af01f418b5b256fc0a86cf35931e2503ee Mon Sep 17 00:00:00 2001
From: Peter Qiu <273743552@qq.com>
Date: Mon, 3 Apr 2023 23:24:56 +0800
Subject: [PATCH 6/6] test(date-time-picker): update snapshot

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 2689 +++++++++++++----
 1 file changed, 2163 insertions(+), 526 deletions(-)

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 365bf0b9d..3a884633b 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -1300,164 +1300,1379 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
                   
                 </ul>
               </div>
-              
-              <div
-                class="t-picker__mask t-picker__mask--top"
-              />
-              <div
-                class="t-picker__mask t-picker__mask--bottom"
-              />
-              <div
-                class="t-picker__indicator"
-              />
-            </div>
-          </div>
-        </div>
-        
-      </div>
-    </transition-stub>
-  </div>
-  <!--teleport end-->
-  
-</div>
-`;
-
-exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
-<div
-  class="tdesign-mobile-demo"
->
-  <h1
-    class="title"
-  >
-    DateTimePicker 时间选择器
-  </h1>
-  <p
-    class="summary"
-  >
-    用于选择一个时间点或者一个时间段
-  </p>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        01 类型
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        基本用法
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
-      
-      
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          选择日期(年月日)
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          年 月 日
-        </div>
-        <!--v-if-->
-      </div>
-      <!--teleport start-->
-      <div
-        class="t-popup"
-      >
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade"
-          persisted="false"
-        >
-          <transition-stub
-            appear="false"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-        </transition-stub>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="slide-bottom"
-          persisted="true"
-        >
-          <div
-            class="t-popup--content t-popup--content-bottom"
-            style="display: none;"
-          >
-            
-            <div
-              class="t-date-time-picker"
-            >
               <div
-                class="t-picker"
+                class="t-picker-item__group"
               >
-                <div
-                  class="t-picker__toolbar"
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, -400px, 0);"
                 >
-                  <div
-                    class="t-picker__cancel"
+                  
+                  <li
+                    class="t-picker-item__item"
                   >
-                    取消
-                  </div>
-                  <div
-                    class="t-picker__title"
+                    0 时
+                  </li>
+                  <li
+                    class="t-picker-item__item"
                   >
-                    选择日期
-                  </div>
-                  <div
-                    class="t-picker__confirm"
+                    1 时
+                  </li>
+                  <li
+                    class="t-picker-item__item"
                   >
-                    确定
-                  </div>
-                </div>
-                <!---->
-                <div
-                  class="t-picker__main"
+                    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>
+                  <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"
+                  >
+                    23 时
+                  </li>
+                  
+                </ul>
+              </div>
+              <div
+                class="t-picker-item__group"
+              >
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, -1920px, 0);"
                 >
                   
-                  <div
-                    class="t-picker-item__group"
+                  <li
+                    class="t-picker-item__item"
                   >
-                    <ul
-                      class="t-picker-item"
-                      style="transform: translate3d(0, -160px, 0);"
-                    >
-                      
-                      <li
-                        class="t-picker-item__item"
-                      >
+                    0 分
+                  </li>
+                  <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"
+                  >
+                    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>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    32 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    33 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    34 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    35 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    36 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    37 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    38 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    39 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    40 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    41 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    42 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    43 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    44 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    45 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    46 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    47 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    48 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    49 分
+                  </li>
+                  <li
+                    class="t-picker-item__item t-picker-item__item--selected"
+                  >
+                    50 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    51 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    52 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    53 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    54 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    55 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    56 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    57 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    58 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    59 分
+                  </li>
+                  
+                </ul>
+              </div>
+              <div
+                class="t-picker-item__group"
+              >
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, 80px, 0);"
+                >
+                  
+                  <li
+                    class="t-picker-item__item t-picker-item__item--selected"
+                  >
+                    0 秒
+                  </li>
+                  <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"
+                  >
+                    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>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    32 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    33 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    34 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    35 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    36 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    37 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    38 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    39 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    40 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    41 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    42 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    43 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    44 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    45 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    46 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    47 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    48 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    49 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    50 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    51 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    52 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    53 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    54 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    55 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    56 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    57 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    58 秒
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    59 秒
+                  </li>
+                  
+                </ul>
+              </div>
+              
+              <div
+                class="t-picker__mask t-picker__mask--top"
+              />
+              <div
+                class="t-picker__mask t-picker__mask--bottom"
+              />
+              <div
+                class="t-picker__indicator"
+              />
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </transition-stub>
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
+
+exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    DateTimePicker 时间选择器
+  </h1>
+  <p
+    class="summary"
+  >
+    用于选择一个时间点或者一个时间段
+  </p>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        基本用法
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="t-cell t-cell--middle t-cell--bordered"
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          选择日期(年月日)
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__note"
+        >
+          年 月 日
+        </div>
+        <!--v-if-->
+      </div>
+      <!--teleport start-->
+      <div
+        class="t-popup"
+      >
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade"
+          persisted="false"
+        >
+          <transition-stub
+            appear="false"
+            css="true"
+            name="t-overlay"
+            persisted="true"
+          >
+            <div
+              class="t-overlay"
+              style="z-index: 1000; transition-duration: 300ms; display: none;"
+            >
+              
+              
+            </div>
+          </transition-stub>
+        </transition-stub>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="slide-bottom"
+          persisted="true"
+        >
+          <div
+            class="t-popup--content t-popup--content-bottom"
+            style="display: none;"
+          >
+            
+            <div
+              class="t-date-time-picker"
+            >
+              <div
+                class="t-picker"
+              >
+                <div
+                  class="t-picker__toolbar"
+                >
+                  <div
+                    class="t-picker__cancel"
+                  >
+                    取消
+                  </div>
+                  <div
+                    class="t-picker__title"
+                  >
+                    选择日期
+                  </div>
+                  <div
+                    class="t-picker__confirm"
+                  >
+                    确定
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="t-picker__main"
+                >
+                  
+                  <div
+                    class="t-picker-item__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      style="transform: translate3d(0, -160px, 0);"
+                    >
+                      
+                      <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 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>
+                      <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>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2033 年
+                      </li>
+                      
+                    </ul>
+                  </div>
+                  <div
+                    class="t-picker-item__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      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__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      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>
+                  
+                  <div
+                    class="t-picker__mask t-picker__mask--top"
+                  />
+                  <div
+                    class="t-picker__mask t-picker__mask--bottom"
+                  />
+                  <div
+                    class="t-picker__indicator"
+                  />
+                </div>
+              </div>
+            </div>
+            
+          </div>
+        </transition-stub>
+      </div>
+      <!--teleport end-->
+      
+      
+      <div
+        class="t-cell t-cell--middle t-cell--bordered"
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          选择日期(年月)
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__note"
+        >
+          年 月
+        </div>
+        <!--v-if-->
+      </div>
+      <!--teleport start-->
+      <div
+        class="t-popup"
+      >
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade"
+          persisted="false"
+        >
+          <transition-stub
+            appear="false"
+            css="true"
+            name="t-overlay"
+            persisted="true"
+          >
+            <div
+              class="t-overlay"
+              style="z-index: 1000; transition-duration: 300ms; display: none;"
+            >
+              
+              
+            </div>
+          </transition-stub>
+        </transition-stub>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="slide-bottom"
+          persisted="true"
+        >
+          <div
+            class="t-popup--content t-popup--content-bottom"
+            style="display: none;"
+          >
+            
+            <div
+              class="t-date-time-picker"
+            >
+              <div
+                class="t-picker"
+              >
+                <div
+                  class="t-picker__toolbar"
+                >
+                  <div
+                    class="t-picker__cancel"
+                  >
+                    取消
+                  </div>
+                  <div
+                    class="t-picker__title"
+                  >
+                    选择日期
+                  </div>
+                  <div
+                    class="t-picker__confirm"
+                  >
+                    确定
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="t-picker__main"
+                >
+                  
+                  <div
+                    class="t-picker-item__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      style="transform: translate3d(0, -240px, 0);"
+                    >
+                      
+                      <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
@@ -1483,143 +2698,383 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                       <li
                         class="t-picker-item__item"
                       >
-                        2020 年
-                      </li>
-                      <li
-                        class="t-picker-item__item t-picker-item__item--selected"
-                      >
-                        2021 年
+                        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>
+                      <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>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        2033 年
+                      </li>
+                      
+                    </ul>
+                  </div>
+                  <div
+                    class="t-picker-item__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      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>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        11 月
+                      </li>
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        12 月
+                      </li>
+                      
+                    </ul>
+                  </div>
+                  
+                  <div
+                    class="t-picker__mask t-picker__mask--top"
+                  />
+                  <div
+                    class="t-picker__mask t-picker__mask--bottom"
+                  />
+                  <div
+                    class="t-picker__indicator"
+                  />
+                </div>
+              </div>
+            </div>
+            
+          </div>
+        </transition-stub>
+      </div>
+      <!--teleport end-->
+      
+      
+      <div
+        class="t-cell t-cell--middle t-cell--bordered"
+      >
+        <div
+          class="t-cell__left"
+        >
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__title"
+        >
+          选择日期(时分)
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <div
+          class="t-cell__note"
+        >
+          时 分
+        </div>
+        <!--v-if-->
+      </div>
+      <!--teleport start-->
+      <div
+        class="t-popup"
+      >
+        <transition-stub
+          appear="false"
+          css="true"
+          name="fade"
+          persisted="false"
+        >
+          <transition-stub
+            appear="false"
+            css="true"
+            name="t-overlay"
+            persisted="true"
+          >
+            <div
+              class="t-overlay"
+              style="z-index: 1000; transition-duration: 300ms; display: none;"
+            >
+              
+              
+            </div>
+          </transition-stub>
+        </transition-stub>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="slide-bottom"
+          persisted="true"
+        >
+          <div
+            class="t-popup--content t-popup--content-bottom"
+            style="display: none;"
+          >
+            
+            <div
+              class="t-date-time-picker"
+            >
+              <div
+                class="t-picker"
+              >
+                <div
+                  class="t-picker__toolbar"
+                >
+                  <div
+                    class="t-picker__cancel"
+                  >
+                    取消
+                  </div>
+                  <div
+                    class="t-picker__title"
+                  >
+                    选择日期
+                  </div>
+                  <div
+                    class="t-picker__confirm"
+                  >
+                    确定
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="t-picker__main"
+                >
+                  
+                  <div
+                    class="t-picker-item__group"
+                  >
+                    <ul
+                      class="t-picker-item"
+                      style="transform: translate3d(0, -320px, 0);"
+                    >
+                      
+                      <li
+                        class="t-picker-item__item"
+                      >
+                        0 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2022 年
+                        1 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2023 年
+                        2 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2024 年
+                        3 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2025 年
+                        4 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2026 年
+                        5 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2027 年
+                        6 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2028 年
+                        7 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2029 年
+                        8 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2030 年
+                        9 时
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        2031 年
+                        10 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2032 年
+                        11 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2033 年
+                        12 时
                       </li>
-                      
-                    </ul>
-                  </div>
-                  <div
-                    class="t-picker-item__group"
-                  >
-                    <ul
-                      class="t-picker-item"
-                      style="transform: translate3d(0, -360px, 0);"
-                    >
-                      
                       <li
                         class="t-picker-item__item"
                       >
-                        1 月
+                        13 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2 月
+                        14 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        3 月
+                        15 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        4 月
+                        16 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        5 月
+                        17 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        6 月
+                        18 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        7 月
+                        19 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        8 月
+                        20 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        9 月
+                        21 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        10 月
+                        22 时
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        11 月
-                      </li>
-                      <li
-                        class="t-picker-item__item t-picker-item__item--selected"
-                      >
-                        12 月
+                        23 时
                       </li>
                       
                     </ul>
@@ -1629,459 +3084,308 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
                   >
                     <ul
                       class="t-picker-item"
-                      style="transform: translate3d(0, -800px, 0);"
+                      style="transform: translate3d(0, -320px, 0);"
                     >
                       
                       <li
                         class="t-picker-item__item"
                       >
-                        1 日
-                      </li>
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        2 日
-                      </li>
-                      <li
-                        class="t-picker-item__item"
-                      >
-                        3 日
+                        0 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        4 日
+                        1 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        5 日
+                        2 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        6 日
+                        3 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        7 日
+                        4 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        8 日
+                        5 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        9 日
+                        6 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        10 日
+                        7 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        11 日
+                        8 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        12 日
+                        9 分
                       </li>
                       <li
-                        class="t-picker-item__item"
+                        class="t-picker-item__item t-picker-item__item--selected"
                       >
-                        13 日
+                        10 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        14 日
+                        11 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        15 日
+                        12 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        16 日
+                        13 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        17 日
+                        14 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        18 日
+                        15 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        19 日
+                        16 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        20 日
+                        17 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        21 日
+                        18 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        22 日
-                      </li>
-                      <li
-                        class="t-picker-item__item t-picker-item__item--selected"
-                      >
-                        23 日
+                        19 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        24 日
+                        20 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        25 日
+                        21 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        26 日
+                        22 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        27 日
+                        23 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        28 日
+                        24 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        29 日
+                        25 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        30 日
+                        26 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        31 日
+                        27 分
                       </li>
-                      
-                    </ul>
-                  </div>
-                  
-                  <div
-                    class="t-picker__mask t-picker__mask--top"
-                  />
-                  <div
-                    class="t-picker__mask t-picker__mask--bottom"
-                  />
-                  <div
-                    class="t-picker__indicator"
-                  />
-                </div>
-              </div>
-            </div>
-            
-          </div>
-        </transition-stub>
-      </div>
-      <!--teleport end-->
-      
-      
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          选择日期(年月)
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          年 月
-        </div>
-        <!--v-if-->
-      </div>
-      <!--teleport start-->
-      <div
-        class="t-popup"
-      >
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade"
-          persisted="false"
-        >
-          <transition-stub
-            appear="false"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-        </transition-stub>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="slide-bottom"
-          persisted="true"
-        >
-          <div
-            class="t-popup--content t-popup--content-bottom"
-            style="display: none;"
-          >
-            
-            <div
-              class="t-date-time-picker"
-            >
-              <div
-                class="t-picker"
-              >
-                <div
-                  class="t-picker__toolbar"
-                >
-                  <div
-                    class="t-picker__cancel"
-                  >
-                    取消
-                  </div>
-                  <div
-                    class="t-picker__title"
-                  >
-                    选择日期
-                  </div>
-                  <div
-                    class="t-picker__confirm"
-                  >
-                    确定
-                  </div>
-                </div>
-                <!---->
-                <div
-                  class="t-picker__main"
-                >
-                  
-                  <div
-                    class="t-picker-item__group"
-                  >
-                    <ul
-                      class="t-picker-item"
-                      style="transform: translate3d(0, -240px, 0);"
-                    >
-                      
                       <li
                         class="t-picker-item__item"
                       >
-                        2013 年
+                        28 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2014 年
+                        29 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2015 年
+                        30 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2016 年
+                        31 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2017 年
+                        32 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2018 年
+                        33 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2019 年
+                        34 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2020 年
-                      </li>
-                      <li
-                        class="t-picker-item__item t-picker-item__item--selected"
-                      >
-                        2021 年
+                        35 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2022 年
+                        36 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2023 年
+                        37 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2024 年
+                        38 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2025 年
+                        39 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2026 年
+                        40 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2027 年
+                        41 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2028 年
+                        42 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2029 年
+                        43 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2030 年
+                        44 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2031 年
+                        45 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2032 年
+                        46 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2033 年
+                        47 分
                       </li>
-                      
-                    </ul>
-                  </div>
-                  <div
-                    class="t-picker-item__group"
-                  >
-                    <ul
-                      class="t-picker-item"
-                      style="transform: translate3d(0, -240px, 0);"
-                    >
-                      
                       <li
                         class="t-picker-item__item"
                       >
-                        1 月
+                        48 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        2 月
+                        49 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        3 月
+                        50 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        4 月
+                        51 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        5 月
+                        52 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        6 月
+                        53 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        7 月
+                        54 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        8 月
+                        55 分
                       </li>
                       <li
-                        class="t-picker-item__item t-picker-item__item--selected"
+                        class="t-picker-item__item"
                       >
-                        9 月
+                        56 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        10 月
+                        57 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        11 月
+                        58 分
                       </li>
                       <li
                         class="t-picker-item__item"
                       >
-                        12 月
+                        59 分
                       </li>
                       
                     </ul>
@@ -2106,115 +3410,6 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
       <!--teleport end-->
       
       
-      <div
-        class="t-cell t-cell--middle t-cell--bordered"
-      >
-        <div
-          class="t-cell__left"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__title"
-        >
-          选择日期(时分)
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <div
-          class="t-cell__note"
-        >
-          时 分
-        </div>
-        <!--v-if-->
-      </div>
-      <!--teleport start-->
-      <div
-        class="t-popup"
-      >
-        <transition-stub
-          appear="false"
-          css="true"
-          name="fade"
-          persisted="false"
-        >
-          <transition-stub
-            appear="false"
-            css="true"
-            name="t-overlay"
-            persisted="true"
-          >
-            <div
-              class="t-overlay"
-              style="z-index: 1000; transition-duration: 300ms; display: none;"
-            >
-              
-              
-            </div>
-          </transition-stub>
-        </transition-stub>
-        <transition-stub
-          appear="false"
-          css="true"
-          name="slide-bottom"
-          persisted="true"
-        >
-          <div
-            class="t-popup--content t-popup--content-bottom"
-            style="display: none;"
-          >
-            
-            <div
-              class="t-date-time-picker"
-            >
-              <div
-                class="t-picker"
-              >
-                <div
-                  class="t-picker__toolbar"
-                >
-                  <div
-                    class="t-picker__cancel"
-                  >
-                    取消
-                  </div>
-                  <div
-                    class="t-picker__title"
-                  >
-                    选择日期
-                  </div>
-                  <div
-                    class="t-picker__confirm"
-                  >
-                    确定
-                  </div>
-                </div>
-                <!---->
-                <div
-                  class="t-picker__main"
-                >
-                  
-                  
-                  <div
-                    class="t-picker__mask t-picker__mask--top"
-                  />
-                  <div
-                    class="t-picker__mask t-picker__mask--bottom"
-                  />
-                  <div
-                    class="t-picker__indicator"
-                  />
-                </div>
-              </div>
-            </div>
-            
-          </div>
-        </transition-stub>
-      </div>
-      <!--teleport end-->
-      
-      
     </div>
   </div>
   <div
@@ -2715,16 +3910,458 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
                 选择日期
               </div>
               <div
-                class="t-picker__confirm"
+                class="t-picker__confirm"
+              >
+                确定
+              </div>
+            </div>
+            <!---->
+            <div
+              class="t-picker__main"
+            >
+              
+              <div
+                class="t-picker-item__group"
+              >
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, -320px, 0);"
+                >
+                  
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    0 时
+                  </li>
+                  <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>
+                  <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"
+                  >
+                    23 时
+                  </li>
+                  
+                </ul>
+              </div>
+              <div
+                class="t-picker-item__group"
               >
-                确定
+                <ul
+                  class="t-picker-item"
+                  style="transform: translate3d(0, -320px, 0);"
+                >
+                  
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    0 分
+                  </li>
+                  <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>
+                  <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"
+                  >
+                    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>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    32 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    33 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    34 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    35 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    36 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    37 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    38 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    39 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    40 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    41 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    42 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    43 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    44 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    45 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    46 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    47 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    48 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    49 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    50 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    51 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    52 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    53 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    54 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    55 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    56 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    57 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    58 分
+                  </li>
+                  <li
+                    class="t-picker-item__item"
+                  >
+                    59 分
+                  </li>
+                  
+                </ul>
               </div>
-            </div>
-            <!---->
-            <div
-              class="t-picker__main"
-            >
-              
               
               <div
                 class="t-picker__mask t-picker__mask--top"