diff --git a/src/components/date-picker/picker/date-picker.js b/src/components/date-picker/picker/date-picker.js
index 3cd6b91f..d759035a 100644
--- a/src/components/date-picker/picker/date-picker.js
+++ b/src/components/date-picker/picker/date-picker.js
@@ -23,6 +23,17 @@ export default {
         },
         value: {}
     },
+    watch: {
+        type(value){
+            const typeMap = {
+                year: 'year',
+                month: 'month',
+                date: 'day'
+            };
+            const validType = oneOf(value, Object.keys(typeMap));
+            if (validType) this.Panel.selectionMode = typeMap[value];
+        }
+    },
     created () {
         if (!this.currentValue) {
             if (this.type === 'daterange' || this.type === 'datetimerange') {
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 3e066da5..49e6ae45 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM, stringToDate } from '../util';
+import { createVue, destroyVM, stringToDate, promissedTick } from '../util';
 
 describe('DatePicker.vue', () => {
   let vm;
@@ -76,6 +76,49 @@ describe('DatePicker.vue', () => {
     });
   });
 
+  it('should change type progamatically', done => {
+    vm = createVue({
+      template: '<Date-picker :type="dateType"></Date-picker>',
+      data() {
+        return {
+          dateType: 'month'
+        };
+      }
+    });
+
+    const picker = vm.$children[0];
+    picker.handleIconClick();
+    vm.$nextTick(() => {
+      const panel = vm.$el.querySelector('.ivu-picker-panel-content');
+      const dayPanel = panel.querySelector('[class="ivu-date-picker-cells"]');
+      const monthPanel = panel.querySelector('.ivu-date-picker-cells-month');
+      const yearPanel = panel.querySelector('.ivu-date-picker-cells-year');
+
+      expect(dayPanel.style.display).to.equal('none');
+      expect(monthPanel.style.display).to.equal('');
+      expect(yearPanel.style.display).to.equal('none');
+
+      expect(picker.type).to.equal('month');
+      expect(picker.selectionMode).to.equal('month');
+
+      vm.dateType = 'year';
+      promissedTick(picker)
+		.then(() => {
+          expect(picker.type).to.equal('year');
+          expect(picker.selectionMode).to.equal('year');
+
+          vm.dateType = 'date';
+          return promissedTick(picker);
+        })
+		.then(() => {
+          expect(picker.type).to.equal('date');
+          expect(picker.selectionMode).to.equal('day');
+
+          done();
+        });
+    });
+  });
+
   it('should have same behavior after a reset as before the reset', done => {
     vm = createVue(`
       <Date-picker type="datetimerange"></Date-picker>