@@ -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() {
- this.leftDate = prevMonth(this.leftDate);
- this.rightDate = nextMonth(this.leftDate);
- },
-
- nextMonth() {
- 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);
- },
-
- prevYear() {
+ leftPrevYear() {
this.leftDate = modifyDate(this.leftDate, this.leftYear - 1, this.leftMonth, this.leftMonthDate);
- this.rightDate = nextMonth(this.leftDate);
+ 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);
+ if (!this.unlinkPanels) {
+ this.rightDate = nextMonth(this.leftDate);
+ }
+ },
+
+ leftNextMonth() {
+ this.leftDate = nextMonth(this.leftDate);
+ },
+
+ rightPrevYear() {
+ this.rightDate = modifyDate(this.rightDate, this.rightYear - 1, this.rightMonth, this.rightMonthDate);
+ },
+
+ 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) {
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index 60623af0b..dfcd52b2a 100644
--- a/packages/date-picker/src/picker.vue
+++ b/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;
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index 25c69fbed..48c6d83cc 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/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);
}
}
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 5bfbdc145..4f87fe02e 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/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;
diff --git a/packages/theme-chalk/src/date-picker/date-range-picker.scss b/packages/theme-chalk/src/date-picker/date-range-picker.scss
index 6dc282faf..dabfc6c7d 100644
--- a/packages/theme-chalk/src/date-picker/date-range-picker.scss
+++ b/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;
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 741a3fdcf..6bd2b6c25 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/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) {
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index 3a056c423..a747a718a 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/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;
}
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 2f4edca3e..3e2086fa1 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/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 => {