docs(DatetimePicker): update demo (#6215)

* docs(DatetimePicker): update demo

* chore: revert

* test: update snapshot

src/area/README.md

@@ -20,7 +20,7 @@ Vue.use(Area);
 To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
 
 ```html
-<van-area :area-list="areaList" />
+<van-area title="Title" :area-list="areaList" />
 ```
 
 ### Initial Value
@@ -28,7 +28,7 @@ To initailize `Area` component, `area-list` property is required. Data structure
 To have a selected value，simply pass the `code` of target area to `value` property.
 
 ```html
-<van-area :area-list="areaList" value="110101" />
+<van-area title="Title" :area-list="areaList" value="110101" />
 ```
 
 ### Columns Number
@@ -36,7 +36,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 `columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set `columns-num` with 2, you'll have a 2 level picker.
 
 ```html
-<van-area :area-list="areaList" :columns-num="2" title="Title" />
+<van-area title="Title" :area-list="areaList" :columns-num="2" />
 ```
 
 ### Columns Placeholder
@@ -45,9 +45,9 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 
 ```html
 <van-area
+  title="Title"
   :area-list="areaList"
   :columns-placeholder="['Choose', 'Choose', 'Choose']"
-  title="Title"
 />
 ```
 

src/area/README.zh-CN.md

@@ -20,7 +20,7 @@ Vue.use(Area);
 要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
 
 ```html
-<van-area :area-list="areaList" />
+<van-area title="标题" :area-list="areaList" />
 ```
 
 ### 选中省市区
@@ -28,7 +28,7 @@ Vue.use(Area);
 如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
 
 ```html
-<van-area :area-list="areaList" value="110101" />
+<van-area title="标题" :area-list="areaList" value="110101" />
 ```
 
 ### 配置显示列
@@ -36,7 +36,7 @@ Vue.use(Area);
 可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择
 
 ```html
-<van-area :area-list="areaList" :columns-num="2" title="标题" />
+<van-area title="标题" :area-list="areaList" :columns-num="2" />
 ```
 
 ### 配置列占位提示文字
@@ -45,9 +45,9 @@ Vue.use(Area);
 
 ```html
 <van-area
+  title="标题"
   :area-list="areaList"
   :columns-placeholder="['请选择', '请选择', '请选择']"
-  title="标题"
 />
 ```
 

src/area/demo/index.vue

@@ -1,26 +1,26 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-area :area-list="t('areaList')" />
+      <van-area :title="t('title')" :area-list="t('areaList')" />
     </demo-block>
 
     <demo-block :title="t('title2')">
-      <van-area :area-list="t('areaList')" :value="value" />
+      <van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
     </demo-block>
 
     <demo-block :title="t('title3')">
       <van-area
+        :title="t('title')"
         :area-list="t('areaList')"
         :columns-num="2"
-        :title="t('title')"
       />
     </demo-block>
 
     <demo-block :title="t('title4')">
       <van-area
+        :title="t('title')"
         :area-list="t('areaList')"
         :columns-placeholder="t('columnsPlaceholder')"
-        :title="t('title')"
       />
     </demo-block>
   </demo-section>

src/area/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,9 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -183,7 +185,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">

src/area/test/__snapshots__/index.spec.js.snap

@@ -286,13 +286,34 @@ exports[`watch areaList & code 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">北京市</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+          <div class="van-ellipsis">天津市</div>
+        </li>
+      </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">北京市</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+          <div class="van-ellipsis">县</div>
+        </li>
+      </ul>
     </div>
     <div class="van-picker-column">
-      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">东城区</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+          <div class="van-ellipsis">西城区</div>
+        </li>
+      </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
     <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>

src/datetime-picker/README.md

@@ -15,35 +15,13 @@ Vue.use(DatetimePicker);
 
 ## Usage
 
-### Choose DateTime
-
-```html
-<van-datetime-picker
-  v-model="currentDate"
-  type="datetime"
-  :min-date="minDate"
-  :max-date="maxDate"
-/>
-```
-
-```js
-export default {
-  data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
-    };
-  },
-};
-```
-
 ### Choose Date
 
 ```html
 <van-datetime-picker
   v-model="currentDate"
   type="date"
+  title="Choose Date"
   :min-date="minDate"
   :max-date="maxDate"
 />
@@ -67,6 +45,7 @@ export default {
 <van-datetime-picker
   v-model="currentDate"
   type="year-month"
+  title="Choose Year-Month"
   :min-date="minDate"
   :max-date="maxDate"
   :formatter="formatter"
@@ -101,6 +80,7 @@ export default {
 <van-datetime-picker
   v-model="currentTime"
   type="time"
+  title="Choose Time"
   :min-hour="10"
   :max-hour="20"
 />
@@ -116,10 +96,39 @@ export default {
 };
 ```
 
+### Choose DateTime
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="datetime"
+  title="Choose DateTime"
+  :min-date="minDate"
+  :max-date="maxDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(),
+    };
+  },
+};
+```
+
 ### Option Filter
 
 ```html
-<van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
+<van-datetime-picker
+  v-model="currentTime"
+  type="time"
+  title="Option Filter"
+  :filter="filter"
+/>
 ```
 
 ```js

src/datetime-picker/README.zh-CN.md

@@ -15,35 +15,13 @@ Vue.use(DatetimePicker);
 
 ## 代码演示
 
-### 选择完整时间
+### 选择年月日
-
-```html
-<van-datetime-picker
-  v-model="currentDate"
-  type="datetime"
-  :min-date="minDate"
-  :max-date="maxDate"
-/>
-```
-
-```js
-export default {
-  data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
-    };
-  },
-};
-```
-
-### 选择日期（年月日）
 
 ```html
 <van-datetime-picker
   v-model="currentDate"
   type="date"
+  title="选择年月日"
   :min-date="minDate"
   :max-date="maxDate"
 />
@@ -61,7 +39,7 @@ export default {
 };
 ```
 
-### 选择日期（年月）
+### 选择年月
 
 通过传入`formatter`函数，可以对选项文字进行格式化处理
 
@@ -69,6 +47,7 @@ export default {
 <van-datetime-picker
   v-model="currentDate"
   type="year-month"
+  title="选择年月"
   :min-date="minDate"
   :max-date="maxDate"
   :formatter="formatter"
@@ -103,6 +82,7 @@ export default {
 <van-datetime-picker
   v-model="currentTime"
   type="time"
+  title="选择时间"
   :min-hour="10"
   :max-hour="20"
 />
@@ -118,6 +98,30 @@ export default {
 };
 ```
 
+### 选择完整时间
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="datetime"
+  title="选择完整时间"
+  :min-date="minDate"
+  :max-date="maxDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(),
+    };
+  },
+};
+```
+
 ### 选项过滤器
 
 通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔

src/datetime-picker/demo/index.vue

@@ -1,18 +1,10 @@
 <template>
   <demo-section>
-    <demo-block :title="t('title1')">
-      <van-datetime-picker
-        v-model="currentDate1"
-        type="datetime"
-        :min-date="minDate"
-        :max-date="maxDate"
-      />
-    </demo-block>
-
     <demo-block :title="t('title2')">
       <van-datetime-picker
         v-model="currentDate2"
         type="date"
+        :title="t('title2')"
         :min-date="minDate"
         :max-date="maxDate"
       />
@@ -22,6 +14,7 @@
       <van-datetime-picker
         v-model="currentDate3"
         type="year-month"
+        :title="t('title3')"
         :min-date="minDate"
         :max-date="maxDate"
         :formatter="formatter"
@@ -32,15 +25,27 @@
       <van-datetime-picker
         v-model="currentTime1"
         type="time"
+        :title="t('title4')"
         :min-hour="10"
         :max-hour="20"
       />
     </demo-block>
 
+    <demo-block :title="t('title1')">
+      <van-datetime-picker
+        v-model="currentDate1"
+        type="datetime"
+        :title="t('title1')"
+        :min-date="minDate"
+        :max-date="maxDate"
+      />
+    </demo-block>
+
     <demo-block :title="t('optionFilter')">
       <van-datetime-picker
         v-model="currentTime2"
         type="time"
+        :title="t('optionFilter')"
         :filter="filter"
       />
     </demo-block>
@@ -52,8 +57,8 @@ export default {
   i18n: {
     'zh-CN': {
       title1: '选择完整时间',
-      title2: '选择日期（年月日）',
+      title2: '选择年月日',
-      title3: '选择日期（年月）',
+      title3: '选择年月',
       title4: '选择时间',
       year: '年',
       month: '月',

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -4,437 +4,9 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-      <!---->
+        <div class="van-ellipsis van-picker__title">选择年月日</div><button type="button" class="van-picker__confirm">确认</button>
-      <div class="van-picker__columns" style="height: 220px;">
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">2020</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2021</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2022</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2023</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2024</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">2025</div>
-            </li>
-          </ul>
       </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker-column">
-          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
-              <div class="van-ellipsis">00</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">01</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">02</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">03</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">04</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">05</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">06</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">07</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">08</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">09</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">10</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">11</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">12</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">13</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">14</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">15</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">16</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">17</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">18</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">19</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">20</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">21</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">22</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">23</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">24</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">25</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">26</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">27</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">28</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">29</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">30</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">31</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">32</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">33</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">34</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">35</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">36</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">37</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">38</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">39</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">40</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">41</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">42</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">43</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">44</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">45</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">46</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">47</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">48</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">49</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">50</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">51</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">52</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">53</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">54</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">55</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">56</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">57</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">58</div>
-            </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
-              <div class="van-ellipsis">59</div>
-            </li>
-          </ul>
-        </div>
-        <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div>
-    <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -604,7 +176,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">选择年月</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -677,7 +251,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">选择时间</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -909,7 +485,441 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">选择完整时间</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">2020</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2021</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2022</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2023</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2024</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2025</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">01</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">01</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">13</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">14</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">15</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">16</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">17</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">18</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">19</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">20</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">21</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">22</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">23</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">24</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">25</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">26</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">27</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">28</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">29</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">30</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">31</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">00</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">01</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">13</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">14</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">15</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">16</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">17</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">18</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">19</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">20</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">21</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">22</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">23</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">00</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">01</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">13</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">14</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">15</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">16</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">17</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">18</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">19</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">20</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">21</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">22</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">23</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">24</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">25</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">26</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">27</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">28</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">29</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">30</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">31</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">32</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">33</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">34</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">35</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">36</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">37</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">38</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">39</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">40</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">41</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">42</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">43</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">44</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">45</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">46</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">47</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">48</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">49</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">50</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">51</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">52</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">53</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">54</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">55</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">56</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">57</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">58</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">59</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+      <!---->
+    </div>
+  </div>
+  <div>
+    <div class="van-picker van-datetime-picker">
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">选项过滤器</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">