[Improvement] DatetimePicker: add new type & show-toolbar prop (#736)

packages/datetime-picker/index.vue

@@ -1,7 +1,7 @@
 <template>
   <picker
     ref="picker"
-    show-toolbar
+    :show-toolbar="showToolbar"
     :columns="columns"
     :visible-item-count="visibleItemCount"
     @change="onChange"
@@ -28,6 +28,10 @@ export default create({
       type: String,
       default: 'datetime'
     },
+    showToolbar: {
+      type: Boolean,
+      default: true
+    },
     format: {
       type: String,
       default: 'YYYY.MM.DD HH时 mm分'
@@ -100,6 +104,7 @@ export default create({
       ];
 
       if (this.type === 'date') result.splice(3, 2);
+      if (this.type === 'date-year-month') result.splice(2, 3);
       return result;
     },
     columns() {
@@ -236,6 +241,9 @@ 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') {
+          date = 1;
+        }
         date = date > maxDate ? maxDate : date;
         let hour = 0;
         let minute = 0;
@@ -270,6 +278,9 @@ export default create({
             `0${value.getMinutes()}`.slice(-2)
           );
         }
+        if (this.type === 'date-year-month') {
+          values = values.slice(0, 2);
+        }
       }
 
       this.$nextTick(() => {

test/specs/datetime-picker.spec.js

@@ -35,6 +35,17 @@ describe('DatetimePicker', () => {
     expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
   });
 
+  it('create a date-year-month', () => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'date-year-month',
+        value: testDate
+      }
+    });
+    expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
+  });
+
   it('create a datetime picker', () => {
     wrapper = mount(DatetimePicker, {
       attachToDocument: true,
@@ -93,6 +104,31 @@ describe('DatetimePicker', () => {
     }, 10);
   });
 
+  it('drag date-year-month picker', (done) => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'date-year-month',
+        value: testDate,
+        minDate,
+        maxDate
+      }
+    });
+
+    setTimeout(() => {
+      const [year, month] = wrapper.find('.van-picker-column ul');
+      dragHelper(year, 0, -50);
+      dragHelper(month, 0, -50);
+      setTimeout(() => {
+        const newYear = wrapper.vm.innerValue.getFullYear();
+        const newMonth = wrapper.vm.innerValue.getMonth() + 1;
+        expect(newYear).to.equal(2018);
+        expect(newMonth).to.equal(4);
+        done();
+      }, 10);
+    }, 10);
+  });
+
   it('drag datetime picker', (done) => {
     wrapper = mount(DatetimePicker, {
       attachToDocument: true,