github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

DatePicker: add unlink-panels (#7537)

pull/7585/head
Black Wayne 2017-10-19 14:09:05 +08:00 committed by 杨奕
parent 6521828f27
commit 457f9f97ed
12 changed files with 168 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/docs/en-US/date-picker.md
View File

@ -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 |

1
examples/docs/en-US/datetime-picker.md
View File

@ -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 |

1
examples/docs/zh-CN/date-picker.md
View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

1
examples/docs/zh-CN/datetime-picker.md
View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

89
packages/date-picker/src/panel/date-range.vue
View File

@ -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
@ -107,11 +121,25 @@
<div class="el-date-range-picker__header">
<button
type="button"
@click="nextYear"
@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="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);
if (!this.unlinkPanels) {
this.rightDate = nextMonth(this.leftDate);
}
},
nextMonth() {
leftNextMonth() {
this.leftDate = nextMonth(this.leftDate);
this.rightDate = nextMonth(this.leftDate);
},
nextYear() {
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);
}
},
prevYear() {
this.leftDate = modifyDate(this.leftDate, this.leftYear - 1, this.leftMonth, this.leftMonthDate);
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) {

4
packages/date-picker/src/picker.vue
View File

@ -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;

28
packages/theme-chalk/src/checkbox.scss
View File

@ -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);
}
}

8
packages/theme-chalk/src/common/var.scss
View File

@ -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;

9
packages/theme-chalk/src/date-picker/date-range-picker.scss
View File

@ -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;

8
packages/theme-chalk/src/date-picker/picker-panel.scss
View File

@ -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) {

2
packages/theme-chalk/src/date-picker/picker.scss
View File

@ -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;
}

31
test/unit/specs/date-picker.spec.js
View File

@ -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 => {