[Doc] DatetimePicker: improve documentation (youzan#747)

longzy · Mar 22, 2018 · 70fbdea · 70fbdea
1 parent 4810630
commit 70fbdea
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 38 deletions.
diff --git a/docs/demos/views/datetime-picker.vue b/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,17 +15,22 @@
       <van-datetime-picker
         v-model="currentDate2"
         type="date"
-        :min-hour="minHour"
-        :max-hour="maxHour"
         :min-date="minDate"
       />
     </demo-block>
 
     <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'
     };
   }
 };

diff --git a/docs/markdown/en-US/datetime-picker.md b/docs/markdown/en-US/datetime-picker.md
@@ -9,7 +9,7 @@ Vue.use(DatetimePicker);
 
 ### Usage
 
-#### Basic Usage
+#### Choose DateTime
 
 ```html
 <van-datetime-picker
@@ -30,41 +30,79 @@ 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="currentDate"
+  type="year-month"
+  :min-date="minDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+```
+
+#### Choose Time
 
 ```html
 <van-datetime-picker
-  v-model="currentDate3"
+  v-model="currentDate"
   type="time"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
 />
 ```
 
+```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` | - |

diff --git a/docs/markdown/zh-CN/datetime-picker.md b/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` | - |

diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue
@@ -11,9 +11,10 @@
 </template>
 
 <script>
-import create from '../utils/create';
 import Picker from '../picker';
+import create from '../utils/create';
 
+const currentYear = new Date().getFullYear();
 const isValidDate = date => Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
 
 export default create({
@@ -42,16 +43,12 @@ export default create({
     },
     minDate: {
       type: Date,
-      default() {
-        return new Date(new Date().getFullYear() - 10, 0, 1);
-      },
+      default: () => new Date(currentYear - 10, 0, 1),
       validator: isValidDate
     },
     maxDate: {
       type: Date,
-      default() {
-        return new Date(new Date().getFullYear() + 10, 11, 31);
-      },
+      default: () => new Date(currentYear + 10, 11, 31),
       validator: isValidDate
     },
     minHour: {
@@ -77,6 +74,7 @@ export default create({
       const isEqual = this.type === 'time' ? val === this.innerValue : val.valueOf() === this.innerValue.valueOf();
       if (!isEqual) this.innerValue = val;
     },
+
     innerValue(val) {
       this.updateColumnValue(val);
       this.$emit('input', val);
@@ -104,7 +102,7 @@ export default create({
       ];
 
       if (this.type === 'date') result.splice(3, 2);
-      if (this.type === 'date-year-month') result.splice(2, 3);
+      if (this.type === 'year-month') result.splice(2, 3);
       return result;
     },
     columns() {
@@ -125,7 +123,7 @@ export default create({
   methods: {
     correctValue(value) {
       // validate value
-      const isDateType = this.type.indexOf('date') > -1;
+      const isDateType = this.type !== 'time';
       if (isDateType && !isValidDate(value)) {
         value = this.minDate;
       } else if (!value) {
@@ -241,7 +239,7 @@ export default create({
         const month = this.getTrueValue(values[1]);
         const maxDate = this.getMonthEndDay(year, month);
         let date = this.getTrueValue(values[2]);
-        if (this.type === 'date-year-month') {
+        if (this.type === 'year-month') {
           date = 1;
         }
         date = date > maxDate ? maxDate : date;
@@ -259,6 +257,7 @@ export default create({
     },
 
     updateColumnValue(value) {
+      console.log(value, this.type);
       let values = [];
       if (this.type === 'time') {
         const currentValue = value.split(':');
@@ -278,7 +277,7 @@ export default create({
             `0${value.getMinutes()}`.slice(-2)
           );
         }
-        if (this.type === 'date-year-month') {
+        if (this.type === 'year-month') {
           values = values.slice(0, 2);
         }
       }

diff --git a/test/specs/datetime-picker.spec.js b/test/specs/datetime-picker.spec.js
@@ -35,11 +35,11 @@ describe('DatetimePicker', () => {
     expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
   });
 
-  it('create a date-year-month', () => {
+  it('create a year-month', () => {
     wrapper = mount(DatetimePicker, {
       attachToDocument: true,
       propsData: {
-        type: 'date-year-month',
+        type: 'year-month',
         value: testDate
       }
     });
@@ -104,11 +104,11 @@ describe('DatetimePicker', () => {
     }, 10);
   });
 
-  it('drag date-year-month picker', (done) => {
+  it('drag year-month picker', (done) => {
     wrapper = mount(DatetimePicker, {
       attachToDocument: true,
       propsData: {
-        type: 'date-year-month',
+        type: 'year-month',
         value: testDate,
         minDate,
         maxDate