Commit 8c4cc3837989178af8bef549b65888b701ab2e44

Authored by Aresn
Committed by GitHub
2 parents 96a6522e 9ffdd6da

Merge pull request #1858 from SergioCrisostomo/fix-1851

Propagate type changes to panel
src/components/date-picker/picker/date-picker.js
@@ -23,6 +23,17 @@ export default { @@ -23,6 +23,17 @@ export default {
23 }, 23 },
24 value: {} 24 value: {}
25 }, 25 },
  26 + watch: {
  27 + type(value){
  28 + const typeMap = {
  29 + year: 'year',
  30 + month: 'month',
  31 + date: 'day'
  32 + };
  33 + const validType = oneOf(value, Object.keys(typeMap));
  34 + if (validType) this.Panel.selectionMode = typeMap[value];
  35 + }
  36 + },
26 created () { 37 created () {
27 if (!this.currentValue) { 38 if (!this.currentValue) {
28 if (this.type === 'daterange' || this.type === 'datetimerange') { 39 if (this.type === 'daterange' || this.type === 'datetimerange') {
test/unit/specs/date-picker.spec.js
1 -import { createVue, destroyVM, stringToDate } from '../util'; 1 +import { createVue, destroyVM, stringToDate, promissedTick } from '../util';
2 2
3 describe('DatePicker.vue', () => { 3 describe('DatePicker.vue', () => {
4 let vm; 4 let vm;
@@ -76,6 +76,49 @@ describe('DatePicker.vue', () => { @@ -76,6 +76,49 @@ describe('DatePicker.vue', () => {
76 }); 76 });
77 }); 77 });
78 78
  79 + it('should change type progamatically', done => {
  80 + vm = createVue({
  81 + template: '<Date-picker :type="dateType"></Date-picker>',
  82 + data() {
  83 + return {
  84 + dateType: 'month'
  85 + };
  86 + }
  87 + });
  88 +
  89 + const picker = vm.$children[0];
  90 + picker.handleIconClick();
  91 + vm.$nextTick(() => {
  92 + const panel = vm.$el.querySelector('.ivu-picker-panel-content');
  93 + const dayPanel = panel.querySelector('[class="ivu-date-picker-cells"]');
  94 + const monthPanel = panel.querySelector('.ivu-date-picker-cells-month');
  95 + const yearPanel = panel.querySelector('.ivu-date-picker-cells-year');
  96 +
  97 + expect(dayPanel.style.display).to.equal('none');
  98 + expect(monthPanel.style.display).to.equal('');
  99 + expect(yearPanel.style.display).to.equal('none');
  100 +
  101 + expect(picker.type).to.equal('month');
  102 + expect(picker.selectionMode).to.equal('month');
  103 +
  104 + vm.dateType = 'year';
  105 + promissedTick(picker)
  106 + .then(() => {
  107 + expect(picker.type).to.equal('year');
  108 + expect(picker.selectionMode).to.equal('year');
  109 +
  110 + vm.dateType = 'date';
  111 + return promissedTick(picker);
  112 + })
  113 + .then(() => {
  114 + expect(picker.type).to.equal('date');
  115 + expect(picker.selectionMode).to.equal('day');
  116 +
  117 + done();
  118 + });
  119 + });
  120 + });
  121 +
79 it('should have same behavior after a reset as before the reset', done => { 122 it('should have same behavior after a reset as before the reset', done => {
80 vm = createVue(` 123 vm = createVue(`
81 <Date-picker type="datetimerange"></Date-picker> 124 <Date-picker type="datetimerange"></Date-picker>