Skip to content

E
Element
Commit 1f4adb7c authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

DatePicker: support multiple dates selection (#10650) 

* DatePicker: add multiselect feature

* DatePicker: add multiselect feature

* DatePicker: add multiselect feature

* DatePicker: add multiselect feature

* DatePicker: add multiselect feature

* Datepicker: fix can't clear bug

*  Datepicker: add unit test

* Datepicker: add unit test

* Datepicker: add unit test

* Datepicker: add unit test

* Datepicker: add unit test

* Datepicker: add unit test

* DatePicker: support multiple dates selection

* reflect review comments
parent f2988cd1
Show whitespace changes
Inline Side-by-side
Showing with 340 additions and 97 deletions
.gitignore
View file @ 1f4adb7c
...@@ -6,6 +6,7 @@ npm-debug.log.* ...@@ -6,6 +6,7 @@ npm-debug.log.*
lerna-debug.log.* lerna-debug.log.*
lib lib
.idea .idea
.vscode
examples/element-ui examples/element-ui
examples/pages/en-US examples/pages/en-US
examples/pages/zh-CN examples/pages/zh-CN
......
examples/docs/en-US/date-picker.md
View file @ 1f4adb7c
...@@ -66,7 +66,8 @@ ...@@ -66,7 +66,8 @@
value10: '', value10: '',
value11: '', value11: '',
value12: '', value12: '',
value13: [] value13: [],
value14: []
}; };
} }
}; };
...@@ -88,6 +89,20 @@ ...@@ -88,6 +89,20 @@
} }
} }
.demo-date-picker .container {
flex: 1;
border-right: solid 1px #EFF2F6;
.block {
border-right: none;
&:last-child {
border-top: solid 1px #EFF2F6;
}
}
&:last-child {
border-right: none;
}
}
.demo-date-picker .demonstration { .demo-date-picker .demonstration {
display: block; display: block;
color: #8492a6; color: #8492a6;
...@@ -163,17 +178,17 @@ Basic date picker measured by 'day'. ...@@ -163,17 +178,17 @@ Basic date picker measured by 'day'.
}; };
</script> </script>
``` ```
::: :::
### Other measurements ### Other measurements
You can choose week, month or year by extending the standard date picker component. You can choose week, month, year or multiple dates by extending the standard date picker component.
:::demo :::demo
```html ```html
<div class="block"> <div class="container">
<div class="block">
<span class="demonstration">Week</span> <span class="demonstration">Week</span>
<el-date-picker <el-date-picker
v-model="value3" v-model="value3"
...@@ -181,22 +196,33 @@ You can choose week, month or year by extending the standard date picker compone ...@@ -181,22 +196,33 @@ You can choose week, month or year by extending the standard date picker compone
format="Week WW" format="Week WW"
placeholder="Pick a week"> placeholder="Pick a week">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
<span class="demonstration">Month</span> <span class="demonstration">Month</span>
<el-date-picker <el-date-picker
v-model="value4" v-model="value4"
type="month" type="month"
placeholder="Pick a month"> placeholder="Pick a month">
</el-date-picker> </el-date-picker>
</div>
</div> </div>
<div class="block"> <div class="container">
<div class="block">
<span class="demonstration">Year</span> <span class="demonstration">Year</span>
<el-date-picker <el-date-picker
v-model="value5" v-model="value5"
type="year" type="year"
placeholder="Pick a year"> placeholder="Pick a year">
</el-date-picker> </el-date-picker>
</div>
<div class="block">
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value14"
placeholder="Pick one or more dates">
</el-date-picker>
</div>
</div> </div>
<script> <script>
...@@ -205,7 +231,8 @@ You can choose week, month or year by extending the standard date picker compone ...@@ -205,7 +231,8 @@ You can choose week, month or year by extending the standard date picker compone
return { return {
value3: '', value3: '',
value4: '', value4: '',
value5: '' value5: '',
value14: []
}; };
} }
}; };
...@@ -455,7 +482,7 @@ When picking a date range, you can assign the time part for start date and end d ...@@ -455,7 +482,7 @@ When picking a date range, you can assign the time part for start date and end d
| placeholder | placeholder in non-range mode | string | — | — | | placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — | | start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — | | end-placeholder | placeholder for the end date in range mode | string | — | — |
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date | | type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange | date |
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd | | format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |
| align | alignment | left/center/right | left | | align | alignment | left/center/right | left |
| popper-class | custom class name for DatePicker's dropdown | string | — | — | | popper-class | custom class name for DatePicker's dropdown | string | — | — |
......
examples/docs/es/date-picker.md
View file @ 1f4adb7c
...@@ -66,7 +66,8 @@ ...@@ -66,7 +66,8 @@
value10: '', value10: '',
value11: '', value11: '',
value12: '', value12: '',
value13: [] value13: [],
value14: []
}; };
} }
}; };
...@@ -88,6 +89,20 @@ ...@@ -88,6 +89,20 @@
} }
} }
.demo-date-picker .container {
flex: 1;
border-right: solid 1px #EFF2F6;
.block {
border-right: none;
&:last-child {
border-top: solid 1px #EFF2F6;
}
}
&:last-child {
border-right: none;
}
}
.demo-date-picker .demonstration { .demo-date-picker .demonstration {
display: block; display: block;
color: #8492a6; color: #8492a6;
...@@ -169,12 +184,13 @@ Date Picker básico por "día". ...@@ -169,12 +184,13 @@ Date Picker básico por "día".
### Otras mediciones ### Otras mediciones
Puede seleccionar la semana, el mes o el año extendiendo el componente date picker estándar. You can choose week, month, year or multiple dates by extending the standard date picker component.
:::demo :::demo
```html ```html
<div class="block"> <div class="container">
<div class="block">
<span class="demonstration">Week</span> <span class="demonstration">Week</span>
<el-date-picker <el-date-picker
v-model="value3" v-model="value3"
...@@ -182,22 +198,33 @@ Puede seleccionar la semana, el mes o el año extendiendo el componente date pic ...@@ -182,22 +198,33 @@ Puede seleccionar la semana, el mes o el año extendiendo el componente date pic
format="Week WW" format="Week WW"
placeholder="Pick a week"> placeholder="Pick a week">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
<span class="demonstration">Month</span> <span class="demonstration">Month</span>
<el-date-picker <el-date-picker
v-model="value4" v-model="value4"
type="month" type="month"
placeholder="Pick a month"> placeholder="Pick a month">
</el-date-picker> </el-date-picker>
</div>
</div> </div>
<div class="block"> <div class="container">
<div class="block">
<span class="demonstration">Year</span> <span class="demonstration">Year</span>
<el-date-picker <el-date-picker
v-model="value5" v-model="value5"
type="year" type="year"
placeholder="Pick a year"> placeholder="Pick a year">
</el-date-picker> </el-date-picker>
</div>
<div class="block">
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value14"
placeholder="Pick one or more dates">
</el-date-picker>
</div>
</div> </div>
<script> <script>
...@@ -206,7 +233,8 @@ Puede seleccionar la semana, el mes o el año extendiendo el componente date pic ...@@ -206,7 +233,8 @@ Puede seleccionar la semana, el mes o el año extendiendo el componente date pic
return { return {
value3: '', value3: '',
value4: '', value4: '',
value5: '' value5: '',
value14: []
}; };
} }
}; };
...@@ -457,7 +485,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in ...@@ -457,7 +485,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
| placeholder | placeholder cuando el modo NO es rango | string | — | — | | placeholder | placeholder cuando el modo NO es rango | string | — | — |
| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — | | start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — |
| end-placeholder | placeholder para la fecha final en modo rango | string | — | — | | end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
| type | tipo de picker | string | year/month/date/datetime/ week/datetimerange/daterange | date | | type | tipo de picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange | date |
| format | formato en que se muestra el valor en el input | string | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd | | format | formato en que se muestra el valor en el input | string | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd |
| align | alineación | left/center/right | left | | | align | alineación | left/center/right | left | |
| popper-class | nombre de clase personalizada para el dropdown de DatePicker | string | — | — | | popper-class | nombre de clase personalizada para el dropdown de DatePicker | string | — | — |
......
examples/docs/zh-CN/date-picker.md
View file @ 1f4adb7c
...@@ -66,7 +66,8 @@ ...@@ -66,7 +66,8 @@
value10: '', value10: '',
value11: '', value11: '',
value12: '', value12: '',
value13: [] value13: [],
value14: []
}; };
} }
}; };
...@@ -76,6 +77,7 @@ ...@@ -76,6 +77,7 @@
.demo-block.demo-date-picker .source { .demo-block.demo-date-picker .source {
padding: 0; padding: 0;
display: flex; display: flex;
flex-wrap: wrap;
} }
.demo-date-picker .block { .demo-date-picker .block {
...@@ -88,6 +90,20 @@ ...@@ -88,6 +90,20 @@
} }
} }
.demo-date-picker .container {
flex: 1;
border-right: solid 1px #EFF2F6;
.block {
border-right: none;
&:last-child {
border-top: solid 1px #EFF2F6;
}
}
&:last-child {
border-right: none;
}
}
.demo-date-picker .demonstration { .demo-date-picker .demonstration {
display: block; display: block;
color: #8492a6; color: #8492a6;
...@@ -167,11 +183,12 @@ ...@@ -167,11 +183,12 @@
### 其他日期单位 ### 其他日期单位
通过扩展基础的日期选择，可以选择周、月、年 通过扩展基础的日期选择，可以选择周、月、年或多个日期
:::demo :::demo
```html ```html
<div class="block"> <div class="container">
<div class="block">
<span class="demonstration">周</span> <span class="demonstration">周</span>
<el-date-picker <el-date-picker
v-model="value3" v-model="value3"
...@@ -179,23 +196,33 @@ ...@@ -179,23 +196,33 @@
format="yyyy 第 WW 周" format="yyyy 第 WW 周"
placeholder="选择周"> placeholder="选择周">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
<span class="demonstration">月</span> <span class="demonstration">月</span>
<el-date-picker <el-date-picker
v-model="value4" v-model="value4"
type="month" type="month"
placeholder="选择月"> placeholder="选择月">
</el-date-picker> </el-date-picker>
</div>
</div> </div>
<div class="block"> <div class="container">
<div class="block">
<span class="demonstration">年</span> <span class="demonstration">年</span>
<el-date-picker <el-date-picker
v-model="value5" v-model="value5"
align="right"
type="year" type="year"
placeholder="选择年"> placeholder="选择年">
</el-date-picker> </el-date-picker>
</div>
<div class="block">
<span class="demonstration">多个日期</span>
<el-date-picker
type="dates"
v-model="value14"
placeholder="选择一个或多个日期">
</el-date-picker>
</div>
</div> </div>
<script> <script>
...@@ -204,7 +231,8 @@ ...@@ -204,7 +231,8 @@
return { return {
value3: '', value3: '',
value4: '', value4: '',
value5: '' value5: '',
value14: []
}; };
} }
}; };
...@@ -221,6 +249,7 @@ ...@@ -221,6 +249,7 @@
<template> <template>
<div class="block"> <div class="block">
<span class="demonstration">默认</span> <span class="demonstration">默认</span>
{{value6}}
<el-date-picker <el-date-picker
v-model="value6" v-model="value6"
type="daterange" type="daterange"
...@@ -408,7 +437,7 @@ ...@@ -408,7 +437,7 @@
| placeholder | 非范围选择时的占位内容 | string | — | — | | placeholder | 非范围选择时的占位内容 | string | — | — |
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — | | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date | | type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date |
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd | | format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
| align | 对齐方式 | string | left, center, right | left | | align | 对齐方式 | string | left, center, right | left |
| popper-class | DatePicker 下拉框的类名 | string | — | — | | popper-class | DatePicker 下拉框的类名 | string | — | — |
......
packages/date-picker/src/basic/date-table.vue
View file @ 1f4adb7c
...@@ -73,6 +73,10 @@ ...@@ -73,6 +73,10 @@
disabledDate: {}, disabledDate: {},
selectedDate: {
type: Array
},
minDate: {}, minDate: {},
maxDate: {}, maxDate: {},
...@@ -129,6 +133,7 @@ ...@@ -129,6 +133,7 @@
const startDate = this.startDate; const startDate = this.startDate;
const disabledDate = this.disabledDate; const disabledDate = this.disabledDate;
const selectedDate = this.selectedDate || this.value;
const now = clearHours(new Date()); const now = clearHours(new Date());
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
...@@ -181,7 +186,10 @@ ...@@ -181,7 +186,10 @@
} }
} }
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time)); let newDate = new Date(time);
cell.disabled = typeof disabledDate === 'function' && disabledDate(newDate);
cell.selected = Array.isArray(selectedDate) &&
selectedDate.filter(date => date.toString() === newDate.toString())[0];
this.$set(row, this.showWeekNumber ? j + 1 : j, cell); this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
} }
...@@ -285,6 +293,10 @@ ...@@ -285,6 +293,10 @@
classes.push('disabled'); classes.push('disabled');
} }
if (cell.selected) {
classes.push('selected');
}
return classes.join(' '); return classes.join(' ');
}, },
...@@ -472,6 +484,20 @@ ...@@ -472,6 +484,20 @@
value: value, value: value,
date: newDate date: newDate
}); });
} else if (selectionMode === 'dates') {
let selectedDate = this.selectedDate;
if (!cell.selected) {
selectedDate.push(newDate);
} else {
selectedDate.forEach((date, index) => {
if (date.toString() === newDate.toString()) {
selectedDate.splice(index, 1);
}
});
}
this.$emit('select', selectedDate);
} }
} }
} }
......
packages/date-picker/src/panel/date.vue
View file @ 1f4adb7c
...@@ -90,12 +90,14 @@ ...@@ -90,12 +90,14 @@
<date-table <date-table
v-show="currentView === 'date'" v-show="currentView === 'date'"
@pick="handleDatePick" @pick="handleDatePick"
@select="handleDateSelect"
:selection-mode="selectionMode" :selection-mode="selectionMode"
:first-day-of-week="firstDayOfWeek" :first-day-of-week="firstDayOfWeek"
:value="new Date(value)" :value="new Date(value)"
:default-value="defaultValue ? new Date(defaultValue) : null" :default-value="defaultValue ? new Date(defaultValue) : null"
:date="date" :date="date"
:disabled-date="disabledDate"> :disabled-date="disabledDate"
:selected-date="selectedDate">
</date-table> </date-table>
<year-table <year-table
v-show="currentView === 'year'" v-show="currentView === 'year'"
...@@ -124,7 +126,8 @@ ...@@ -124,7 +126,8 @@
size="mini" size="mini"
type="text" type="text"
class="el-picker-panel__link-btn" class="el-picker-panel__link-btn"
@click="changeToNow"> @click="changeToNow"
v-show="selectionMode !== 'dates'">
{{ t('el.datepicker.now') }} {{ t('el.datepicker.now') }}
</el-button> </el-button>
<el-button <el-button
...@@ -208,6 +211,8 @@ ...@@ -208,6 +211,8 @@
if (this.currentView !== 'year' || this.currentView !== 'month') { if (this.currentView !== 'year' || this.currentView !== 'month') {
this.currentView = 'month'; this.currentView = 'month';
} }
} else if (newVal === 'dates') {
this.currentView = 'date';
} }
} }
}, },
...@@ -234,6 +239,9 @@ ...@@ -234,6 +239,9 @@
emit(value, ...args) { emit(value, ...args) {
if (!value) { if (!value) {
this.$emit('pick', value, ...args); this.$emit('pick', value, ...args);
} else if (Array.isArray(value)) {
const dates = value.map(date => this.showTime ? clearMilliseconds(date) : clearTime(date));
this.$emit('pick', dates, ...args);
} else { } else {
this.$emit('pick', this.showTime ? clearMilliseconds(value) : clearTime(value), ...args); this.$emit('pick', this.showTime ? clearMilliseconds(value) : clearTime(value), ...args);
} }
...@@ -317,6 +325,12 @@ ...@@ -317,6 +325,12 @@
} }
}, },
handleDateSelect(value) {
if (this.selectionMode === 'dates') {
this.selectedDate = value;
}
},
handleDatePick(value) { handleDatePick(value) {
if (this.selectionMode === 'day') { if (this.selectionMode === 'day') {
this.date = this.value ? modifyDate(this.date, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithDefaultTime(value, this.defaultTime); this.date = this.value ? modifyDate(this.date, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithDefaultTime(value, this.defaultTime);
...@@ -348,8 +362,12 @@ ...@@ -348,8 +362,12 @@
}, },
confirm() { confirm() {
if (this.selectionMode === 'dates') {
this.emit(this.selectedDate);
} else {
const date = this.value ? this.date : modifyWithDefaultTime(this.date, this.defaultTime); const date = this.value ? this.date : modifyWithDefaultTime(this.date, this.defaultTime);
this.emit(date); this.emit(date);
}
}, },
resetView() { resetView() {
...@@ -467,6 +485,7 @@ ...@@ -467,6 +485,7 @@
visible: false, visible: false,
currentView: 'date', currentView: 'date',
disabledDate: '', disabledDate: '',
selectedDate: [],
firstDayOfWeek: 7, firstDayOfWeek: 7,
showWeekNumber: false, showWeekNumber: false,
timePickerVisible: false, timePickerVisible: false,
...@@ -495,7 +514,7 @@ ...@@ -495,7 +514,7 @@
}, },
footerVisible() { footerVisible() {
return this.showTime; return this.showTime || this.selectionMode === 'dates';
}, },
visibleTime() { visibleTime() {
......
packages/date-picker/src/picker.vue
View file @ 1f4adb7c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<el-input <el-input
class="el-date-editor" class="el-date-editor"
:class="'el-date-editor--' + type" :class="'el-date-editor--' + type"
:readonly="!editable || readonly" :readonly="!editable || readonly || type === 'dates'"
:disabled="pickerDisabled" :disabled="pickerDisabled"
:size="pickerSize" :size="pickerSize"
:name="name" :name="name"
...@@ -123,7 +123,8 @@ const HAVE_TRIGGER_TYPES = [ ...@@ -123,7 +123,8 @@ const HAVE_TRIGGER_TYPES = [
'year', 'year',
'daterange', 'daterange',
'timerange', 'timerange',
'datetimerange' 'datetimerange',
'dates'
]; ];
const DATE_FORMATTER = function(value, format) { const DATE_FORMATTER = function(value, format) {
if (format === 'timestamp') return value.getTime(); if (format === 'timestamp') return value.getTime();
...@@ -242,6 +243,15 @@ const TYPE_VALUE_RESOLVER_MAP = { ...@@ -242,6 +243,15 @@ const TYPE_VALUE_RESOLVER_MAP = {
return null; return null;
} }
} }
},
dates: {
formatter(value, format) {
return value.map(date => DATE_FORMATTER(date, format));
},
parser(value, format) {
return (typeof value === 'string' ? value.split(', ') : value)
.map(date => date instanceof Date ? date : DATE_PARSER(date, format));
}
} }
}; };
const PLACEMENT_MAP = { const PLACEMENT_MAP = {
...@@ -275,8 +285,10 @@ const valueEquals = function(a, b) { ...@@ -275,8 +285,10 @@ const valueEquals = function(a, b) {
const aIsArray = a instanceof Array; const aIsArray = a instanceof Array;
const bIsArray = b instanceof Array; const bIsArray = b instanceof Array;
if (aIsArray && bIsArray) { if (aIsArray && bIsArray) {
return new Date(a[0]).getTime() === new Date(b[0]).getTime() && if (a.length !== b.length) {
new Date(a[1]).getTime() === new Date(b[1]).getTime(); return false;
}
return a.every((item, index) => new Date(item).getTime() === new Date(b[index]).getTime());
} }
if (!aIsArray && !bIsArray) { if (!aIsArray && !bIsArray) {
return new Date(a).getTime() === new Date(b).getTime(); return new Date(a).getTime() === new Date(b).getTime();
...@@ -374,7 +386,7 @@ export default { ...@@ -374,7 +386,7 @@ export default {
if (this.readonly || this.pickerDisabled) return; if (this.readonly || this.pickerDisabled) return;
if (val) { if (val) {
this.showPicker(); this.showPicker();
this.valueOnOpen = this.value; this.valueOnOpen = Array.isArray(this.value) ? [...this.value] : this.value;
} else { } else {
this.hidePicker(); this.hidePicker();
this.emitChange(this.value); this.emitChange(this.value);
...@@ -394,6 +406,7 @@ export default { ...@@ -394,6 +406,7 @@ export default {
handler(val) { handler(val) {
if (this.picker) { if (this.picker) {
this.picker.value = val; this.picker.value = val;
this.picker.selectedDate = Array.isArray(val) ? val : [];
} }
} }
}, },
...@@ -449,6 +462,8 @@ export default { ...@@ -449,6 +462,8 @@ export default {
return 'month'; return 'month';
} else if (this.type === 'year') { } else if (this.type === 'year') {
return 'year'; return 'year';
} else if (this.type === 'dates') {
return 'dates';
} }
return 'day'; return 'day';
...@@ -468,8 +483,14 @@ export default { ...@@ -468,8 +483,14 @@ export default {
this.userInput[0] || (formattedValue && formattedValue[0]) || '', this.userInput[0] || (formattedValue && formattedValue[0]) || '',
this.userInput[1] || (formattedValue && formattedValue[1]) || '' this.userInput[1] || (formattedValue && formattedValue[1]) || ''
]; ];
} else if (this.userInput !== null) {
return this.userInput;
} else if (formattedValue) {
return this.type === 'dates'
? formattedValue.join(', ')
: formattedValue;
} else { } else {
return this.userInput !== null ? this.userInput : formattedValue || ''; return '';
} }
}, },
...@@ -655,7 +676,18 @@ export default { ...@@ -655,7 +676,18 @@ export default {
}, },
handleClose() { handleClose() {
if (!this.pickerVisible) return;
this.pickerVisible = false; this.pickerVisible = false;
const {
type,
valueOnOpen,
valueFormat,
rangeSeparator
} = this;
if (type === 'dates' && this.picker) {
this.picker.selectedDate = parseAsFormatAndType(valueOnOpen, valueFormat, type, rangeSeparator) || valueOnOpen;
this.emitInput(this.picker.selectedDate);
}
}, },
handleFieldReset(initialValue) { handleFieldReset(initialValue) {
...@@ -769,6 +801,7 @@ export default { ...@@ -769,6 +801,7 @@ export default {
this.picker.selectionMode = this.selectionMode; this.picker.selectionMode = this.selectionMode;
this.picker.unlinkPanels = this.unlinkPanels; this.picker.unlinkPanels = this.unlinkPanels;
this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false; this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;
this.picker.selectedDate = Array.isArray(this.value) && this.value || [];
this.$watch('format', (format) => { this.$watch('format', (format) => {
this.picker.format = format; this.picker.format = format;
}); });
...@@ -846,7 +879,7 @@ export default { ...@@ -846,7 +879,7 @@ export default {
emitInput(val) { emitInput(val) {
const formatted = this.formatToValue(val); const formatted = this.formatToValue(val);
if (!valueEquals(this.value, formatted)) { if (!valueEquals(this.value, formatted) || this.type === 'dates') {
this.$emit('input', formatted); this.$emit('input', formatted);
} }
}, },
......
packages/theme-chalk/src/date-picker/date-table.scss
View file @ 1f4adb7c
...@@ -120,6 +120,22 @@ ...@@ -120,6 +120,22 @@
color: $--color-text-placeholder; color: $--color-text-placeholder;
} }
&.selected div {
margin-left: 5px;
margin-right: 5px;
background-color: $--datepicker-inrange-color;
border-radius: 15px;
&:hover {
background-color: $--datepicker-inrange-hover-color;
}
}
&.selected span {
background-color: $--datepicker-active-color;
color: $--color-white;
border-radius: 15px;
}
&.week { &.week {
font-size: 80%; font-size: 80%;
color: $--datepicker-header-color; color: $--datepicker-header-color;
......
packages/theme-chalk/src/date-picker/picker.scss
View file @ 1f4adb7c
...@@ -26,6 +26,13 @@ ...@@ -26,6 +26,13 @@
} }
} }
@include m(dates) {
.el-input__inner {
text-overflow: ellipsis;
white-space: nowrap;
}
}
.el-icon-circle-close { .el-icon-circle-close {
cursor: pointer; cursor: pointer;
} }
......
test/unit/specs/date-picker.spec.js
View file @ 1f4adb7c
...@@ -1400,6 +1400,63 @@ describe('DatePicker', () => { ...@@ -1400,6 +1400,63 @@ describe('DatePicker', () => {
}); });
}); });
describe('type:dates', () => {
let vm;
beforeEach(done => {
vm = createVue({
template: '<el-date-picker type="dates" value-format="timestamp" v-model="value" ref="compo" />',
data() {
return {
value: []
};
}
}, true);
const input = vm.$el.querySelector('input');
input.blur();
input.focus();
setTimeout(done, DELAY);
});
afterEach(() => destroyVM(vm));
it('click cell', done => {
const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');
td.click();
setTimeout(_ => {
expect(vm.$refs.compo.picker.selectedDate).to.exist;
expect(vm.value.length).to.equal(1);
done();
}, DELAY);
});
it('value format', done => {
const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');
td.click();
setTimeout(_ => {
vm.$refs.compo.picker.$el.querySelector('.el-button--default').click();
setTimeout(() => {
expect(vm.$refs.compo.picker.selectedDate).to.exist;
expect(vm.value.length).to.equal(1);
done();
}, DELAY);
}, DELAY);
});
it('restore value when cancel', done => {
const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');
td.click();
setTimeout(_ => {
vm.$refs.compo.handleClose();
setTimeout(() => {
expect(vm.value.length).to.equal(0);
done();
}, DELAY);
}, DELAY);
});
});
describe('type:daterange', () => { describe('type:daterange', () => {
it('works', done => { it('works', done => {
vm = createVue({ vm = createVue({
......
types/date-picker.d.ts
View file @ 1f4adb7c
import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component' import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
export type DatePickerType = 'year' | 'month' | 'date' | 'datetime' | 'week' | 'datetimerange' | 'daterange' export type DatePickerType = 'year' | 'month' | 'date' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'dates'
export type FirstDayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7 export type FirstDayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7
export interface DisabledDateChecker { export interface DisabledDateChecker {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment