diff --git a/examples/routers/date.vue b/examples/routers/date.vue
index e9576ffe..8eeac53c 100644
--- a/examples/routers/date.vue
+++ b/examples/routers/date.vue
@@ -249,14 +249,17 @@
 
 <template>
     <div style="width: 500px;margin: 100px;">
-        <Row>
-            <Col span="12">
-            <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
-            </Col>
-            <Col span="12">
-            <DatePicker type="daterange" show-week-numbers placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-            </Col>
-        </Row>
+        <p><input type="text"></p>
+
+        <DatePicker type="month" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
+        <DatePicker type="year" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
+
+        <DatePicker type="date" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
+        <DatePicker type="datetime" show-week-numbers confirm placeholder="Select date" style="width: 400px"></DatePicker>
+
+        <DatePicker type="daterange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
+        <DatePicker type="datetimerange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
+        <Time-Picker :steps="[1, 1, 15]" :value="new Date()"></Time-Picker>
     </div>
 </template>
 <script>