DatePicker: add unlink-panels (#7537)

examples/docs/en-US/date-picker.md

@@ -389,6 +389,7 @@ This feature is at alpha stage. Feedback welcome.
 | default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
 | value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
 | name | same as `name` in native input | string | — | — |
+| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

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

@@ -255,6 +255,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 | default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
 | value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
 | name | same as `name` in native input | string | — | — |
+| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/zh-CN/date-picker.md

@@ -399,6 +399,7 @@
 | default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
 | value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | — |
 | name | 原生属性 | string | — | — |
+| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

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

@@ -254,6 +254,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 | default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
 | value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | — |
 | name | 原生属性 | string | — | — |
+| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/date-picker/src/panel/date-range.vue

@@ -82,12 +82,26 @@
             <div class="el-date-range-picker__header">
               <button
                 type="button"
-                @click="prevYear"
+                @click="leftPrevYear"
                 class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
               <button
                 type="button"
-                @click="prevMonth"
+                @click="leftPrevMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+              <button
+                  type="button"
+                  @click="leftNextYear"
+                  v-if="unlinkPanels"
+                  :disabled="!enableYearArrow"
+                  :class="{ 'is-disabled': !enableYearArrow }"
+                  class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <button
+                  type="button"
+                  @click="leftNextMonth"
+                  v-if="unlinkPanels"
+                  :disabled="!enableMonthArrow"
+                  :class="{ 'is-disabled': !enableMonthArrow }"
+                  class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ leftLabel }}</div>
             </div>
             <date-table
@@ -105,13 +119,27 @@
           </div>
           <div class="el-picker-panel__content el-date-range-picker__content is-right">
             <div class="el-date-range-picker__header">
+              <button
+                  type="button"
+                  @click="rightPrevYear"
+                  v-if="unlinkPanels"
+                  :disabled="!enableYearArrow"
+                  :class="{ 'is-disabled': !enableYearArrow }"
+                  class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                  type="button"
+                  @click="rightPrevMonth"
+                  v-if="unlinkPanels"
+                  :disabled="!enableMonthArrow"
+                  :class="{ 'is-disabled': !enableMonthArrow }"
+                  class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
               <button
                 type="button"
-                @click="nextYear"
+                @click="rightNextYear"
                 class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
               <button
                 type="button"
-                @click="nextMonth"
+                @click="rightNextMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ rightLabel }}</div>
             </div>
@@ -250,6 +278,16 @@
         } else {
           return 'HH:mm:ss';
         }
+      },
+
+      enableMonthArrow() {
+        const nextMonth = (this.leftMonth + 1) % 12;
+        const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0;
+        return this.unlinkPanels && new Date(`${this.leftYear + yearOffset}-${nextMonth + 1}`) < new Date(`${this.rightYear}-${this.rightMonth + 1}`);
+      },
+
+      enableYearArrow() {
+        return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12;
       }
     },
 
@@ -276,7 +314,8 @@
         minTimePickerVisible: false,
         maxTimePickerVisible: false,
         format: '',
-        arrowControl: false
+        arrowControl: false,
+        unlinkPanels: false
       };
     },
 
@@ -478,24 +517,52 @@
         }
       },
 
-      prevMonth() {
+      leftPrevYear() {
+        this.leftDate = modifyDate(this.leftDate, this.leftYear - 1, this.leftMonth, this.leftMonthDate);
+        if (!this.unlinkPanels) {
+          this.rightDate = nextMonth(this.leftDate);
+        }
+      },
+
+      leftNextYear() {
+        this.leftDate = modifyDate(this.leftDate, this.leftYear + 1, this.leftMonth, this.leftMonthDate);
+      },
+
+      leftPrevMonth() {
         this.leftDate = prevMonth(this.leftDate);
-        this.rightDate = nextMonth(this.leftDate);
+        if (!this.unlinkPanels) {
+          this.rightDate = nextMonth(this.leftDate);
+        }
       },
 
-      nextMonth() {
+      leftNextMonth() {
         this.leftDate = nextMonth(this.leftDate);
-        this.rightDate = nextMonth(this.leftDate);
       },
 
-      nextYear() {
-        this.leftDate = modifyDate(this.leftDate, this.leftYear + 1, this.leftMonth, this.leftMonthDate);
-        this.rightDate = nextMonth(this.leftDate);
+      rightPrevYear() {
+        this.rightDate = modifyDate(this.rightDate, this.rightYear - 1, this.rightMonth, this.rightMonthDate);
       },
 
-      prevYear() {
-        this.leftDate = modifyDate(this.leftDate, this.leftYear - 1, this.leftMonth, this.leftMonthDate);
-        this.rightDate = nextMonth(this.leftDate);
+      rightNextYear() {
+        if (!this.unlinkPanels) {
+          this.leftDate = modifyDate(this.leftDate, this.leftYear + 1, this.leftMonth, this.leftMonthDate);
+          this.rightDate = nextMonth(this.leftDate);
+        } else {
+          this.rightDate = modifyDate(this.rightDate, this.rightYear + 1, this.rightMonth, this.rightMonthDate);
+        }
+      },
+
+      rightPrevMonth() {
+        this.rightDate = prevMonth(this.rightDate);
+      },
+
+      rightNextMonth() {
+        if (!this.unlinkPanels) {
+          this.leftDate = nextMonth(this.leftDate);
+          this.rightDate = nextMonth(this.leftDate);
+        } else {
+          this.rightDate = nextMonth(this.rightDate);
+        }
       },
 
       handleConfirm(visible = false) {

packages/date-picker/src/picker.vue

@@ -303,7 +303,8 @@ export default {
     rangeSeparator: {
       default: '-'
     },
-    pickerOptions: {}
+    pickerOptions: {},
+    unlinkPanels: Boolean
   },
 
   components: { ElInput },
@@ -678,6 +679,7 @@ export default {
       this.picker.width = this.reference.getBoundingClientRect().width;
       this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
       this.picker.selectionMode = this.selectionMode;
+      this.picker.unlinkPanels = this.unlinkPanels;
       this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;
       if (this.format) {
         this.picker.format = this.format;

packages/theme-chalk/src/checkbox.scss

@@ -10,7 +10,7 @@
   cursor: pointer;
   display: inline-block;
   white-space: nowrap;
-  @include utils-user-select(none);
+  user-select: none;
 
   @include when(bordered) {
     padding: $--checkbox-bordered-padding;
@@ -33,35 +33,47 @@
     &.el-checkbox--medium {
       padding: $--checkbox-bordered-medium-padding;
       border-radius: $--button-medium-border-radius;
+
       .el-checkbox__label {
+        line-height: 17px;
         font-size: $--button-medium-font-size;
       }
+
       .el-checkbox__inner {
         height: $--checkbox-bordered-medium-input-height;
         width: $--checkbox-bordered-medium-input-width;
       }
     }
+
     &.el-checkbox--small {
       padding: $--checkbox-bordered-small-padding;
       border-radius: $--button-small-border-radius;
+
       .el-checkbox__label {
+        line-height: 15px;
         font-size: $--button-small-font-size;
       }
+
       .el-checkbox__inner {
         height: $--checkbox-bordered-small-input-height;
         width: $--checkbox-bordered-small-input-width;
+
         &::after {
           height: 6px;
           width: 2px;
         }
       }
     }
+
     &.el-checkbox--mini {
       padding: $--checkbox-bordered-mini-padding;
       border-radius: $--button-mini-border-radius;
+
       .el-checkbox__label {
+        line-height: 12px;
         font-size: $--button-mini-font-size;
       }
+
       .el-checkbox__inner {
         height: $--checkbox-bordered-mini-input-height;
         width: $--checkbox-bordered-mini-input-width;
@@ -97,6 +109,7 @@
           cursor: not-allowed;
         }
       }
+
       &.is-checked {
         .el-checkbox__inner {
           background-color: $--checkbox-disabled-checked-input-fill;
@@ -107,6 +120,7 @@
           }
         }
       }
+
       &.is-indeterminate {
         .el-checkbox__inner {
           background-color: $--checkbox-disabled-checked-input-fill;
@@ -118,11 +132,13 @@
           }
         }
       }
+
       & + span.el-checkbox__label {
         color: $--disabled-color-base;
         cursor: not-allowed;
       }
     }
+
     @include when(checked) {
       .el-checkbox__inner {
         background-color: $--checkbox-checked-input-fill;
@@ -210,8 +226,10 @@
   }
 
   @include e(label) {
-    font-size: $--checkbox-font-size;
+    display: inline-block;
     padding-left: 10px;
+    line-height: 19px;
+    font-size: $--checkbox-font-size;
   }
 
   & + .el-checkbox {
@@ -306,17 +324,17 @@
     }
   }
   @include m(medium) {
-    & .el-checkbox-button__inner {
+    .el-checkbox-button__inner {
       @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
     }
   }
   @include m(small) {
-    & .el-checkbox-button__inner {
+    .el-checkbox-button__inner {
       @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
     }
   }
   @include m(mini) {
-    & .el-checkbox-button__inner {
+    .el-checkbox-button__inner {
       @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
     }
   }

packages/theme-chalk/src/common/var.scss

@@ -136,10 +136,10 @@ $--checkbox-checked-icon-color: $--fill-base;
 
 $--checkbox-input-border-color-hover: $--color-primary;
 
-$--checkbox-bordered-padding: 10px 20px 10px 10px;
-$--checkbox-bordered-medium-padding: 8px 20px 8px 10px;
-$--checkbox-bordered-small-padding: 6px 20px 6px 10px;
-$--checkbox-bordered-mini-padding: 4px 20px 4px 10px;
+$--checkbox-bordered-padding: 9px 20px 9px 10px;
+$--checkbox-bordered-medium-padding: 7px 20px 7px 10px;
+$--checkbox-bordered-small-padding: 4px 20px 6px 10px;
+$--checkbox-bordered-mini-padding: 2px 20px 4px 10px;
 $--checkbox-bordered-medium-input-height: 14px;
 $--checkbox-bordered-medium-input-width: 14px;
 $--checkbox-bordered-small-input-height: 12px;

packages/theme-chalk/src/date-picker/date-range-picker.scss

@@ -25,10 +25,14 @@
     text-align: center;
     height: 28px;
 
-    button {
+    [class*=arrow-left] {
       float: left;
     }
 
+    [class*=arrow-right] {
+      float: right;
+    }
+
     div {
       font-size: 14px;
       margin-right: 50px;
@@ -48,9 +52,6 @@
 
     @include when(right) {
       .el-date-range-picker__header {
-        button {
-          float: right;
-        }
 
         div {
           margin-left: 50px;

packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -83,6 +83,14 @@
     &:hover {
       color: $--datepicker-text-hover-color;
     }
+
+    @include when(disabled) {
+      color: $--font-color-disabled-base;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
   }
 
   @include e(link-btn) {

packages/theme-chalk/src/date-picker/picker.scss

@@ -54,13 +54,13 @@
 
   .el-range-separator {
     display: inline-block;
-    width: 5%;
     height: 100%;
     padding: 0 5px;
     margin: 0;
     text-align: center;
     line-height: 32px;
     font-size: 14px;
+    width: 5%;
     color: $--color-text-primary;
   }
 

test/unit/specs/date-picker.spec.js

@@ -1105,6 +1105,37 @@ describe('DatePicker', () => {
     }, DELAY);
   });
 
+  it('type:daterange with unlink-panels', done => {
+    vm = createTest(DatePicker, {
+      type: 'daterange',
+      unlinkPanels: true
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.click();
+
+    setTimeout(_ => {
+      const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
+
+      expect(Array.prototype.slice.call(panels)).to.length(2);
+
+      panels[1].querySelector('.el-icon-d-arrow-right').click();
+      panels[1].querySelector('.el-icon-arrow-right').click();
+
+      setTimeout(_ => {
+        const left = panels[0].querySelector('.el-date-range-picker__header');
+        const right = panels[1].querySelector('.is-right .el-date-range-picker__header');
+        const leftText = left.textContent.match(/\d+/g);
+        const rightText = right.textContent.match(/\d+/g);
+
+        expect(rightText[0] - leftText[0]).to.equal(1);
+        expect((rightText[1] <= 2 ? rightText[1] + 12 : rightText[1]) - leftText[1]).to.equal(2);
+
+        done();
+      }, DELAY);
+    }, DELAY);
+  });
+
   describe('type:datetimerange', () => {
     let vm;
     beforeEach(done => {