[Doc] DatetimePicker: improve documentation (#747)

docs/demos/views/datetime-picker.vue

@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <demo-block :title="$t('title1')">
       <van-datetime-picker
         v-model="currentDate1"
         type="datetime"
@@ -15,8 +15,6 @@
       <van-datetime-picker
         v-model="currentDate2"
         type="date"
-        :min-hour="minHour"
-        :max-hour="maxHour"
         :min-date="minDate"
       />
     </demo-block>
@@ -24,8 +22,15 @@
     <demo-block :title="$t('title3')">
       <van-datetime-picker
         v-model="currentDate3"
+        type="year-month"
+        :min-date="minDate"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title4')">
+      <van-datetime-picker
+        v-model="currentDate4"
         type="time"
-        :visibleItemCount="3"
         :min-hour="minHour"
         :max-hour="maxHour"
         :min-date="minDate"
@@ -38,12 +43,16 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '选择日期',
-      title3: '选择时间'
+      title1: '选择完整时间',
+      title2: '选择日期（年月日）',
+      title3: '选择日期（年月）',
+      title4: '选择时间'
     },
     'en-US': {
-      title2: 'Date Picker',
-      title3: 'Time Picker'
+      title1: 'Choose DateTime',
+      title2: 'Choose Date',
+      title3: 'Choose Year-Month',
+      title4: 'Choose Time'
     }
   },
 
@@ -55,7 +64,8 @@ export default {
       maxDate: new Date(2019, 10, 1),
       currentDate1: new Date(2018, 0, 1),
       currentDate2: null,
-      currentDate3: '12:00'
+      currentDate3: new Date(2018, 0, 1),
+      currentDate4: '12:00'
     };
   }
 };

docs/markdown/en-US/datetime-picker.md

@@ -9,7 +9,7 @@ Vue.use(DatetimePicker);
 
 ### Usage
 
-#### Basic Usage
+#### Choose DateTime
 
 ```html
 <van-datetime-picker
@@ -30,29 +30,57 @@ export default {
       maxHour: 20,
       minDate: new Date(),
       maxDate: new Date(2019, 10, 1),
-      currentDate: new Date(2018, 0, 1)
+      currentDate: new Date()
     };
   }
 };
 ```
 
-#### Date Picker
+#### Choose Date
 
 ```html
 <van-datetime-picker
   v-model="currentDate"
   type="date"
-  :min-hour="minHour"
-  :max-hour="maxHour"
   :min-date="minDate"
 />
 ```
 
-#### Time Picker
+```js
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+```
+
+#### Choose Year-Month
 
 ```html
 <van-datetime-picker
-  v-model="currentDate3"
+  v-model="currentDate"
+  type="year-month"
+  :min-date="minDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+```
+
+#### Choose Time
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
   type="time"
   :min-hour="minHour"
   :max-hour="maxHour"
@@ -60,11 +88,21 @@ export default {
 />
 ```
 
+```js
+export default {
+  data() {
+    return {
+      currentDate: '12:00'
+    };
+  }
+}
+```
+
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| type | Picker type | `String` | 'datetime' |  'date', 'time' |
+| type | Picker type | `String` | `datetime` |  `date` `time` `year-month` |
 | min-date | Min date | `Date` | Ten years ago on January 1 | - |
 | max-date | Max date | `Date` | Ten years later on December 31 | - |
 | min-hour | Min hour | `Number` | `0` | - |

docs/markdown/zh-CN/datetime-picker.md

@@ -9,7 +9,7 @@ Vue.use(DatetimePicker);
 
 ### 代码演示
 
-#### 基础用法
+#### 选择完整时间
 
 ```html
 <van-datetime-picker
@@ -30,24 +30,52 @@ export default {
       maxHour: 20,
       minDate: new Date(),
       maxDate: new Date(2019, 10, 1),
-      currentDate: new Date(2018, 0, 1)
+      currentDate: new Date()
     };
   }
 };
 ```
 
-#### 选择日期
+#### 选择日期（年月日）
 
 ```html
 <van-datetime-picker
   v-model="currentDate"
   type="date"
-  :min-hour="minHour"
-  :max-hour="maxHour"
   :min-date="minDate"
 />
 ```
 
+```js
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+```
+
+#### 选择日期（年月）
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="year-month"
+  :min-date="minDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+```
+
 #### 选择时间
 
 ```html
@@ -60,11 +88,21 @@ export default {
 />
 ```
 
+```js
+export default {
+  data() {
+    return {
+      currentDate: '12:00'
+    };
+  }
+}
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 组件类型 | `String` | 'datetime' |  'date', 'time' |
+| type | 组件类型 | `String` | `datetime` |  `date` `time` `year-month` |
 | min-date | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 | - |
 | max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
 | min-hour | 可选的最小小时 | `Number` | `0` | - |