diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 707f9971fec..21d0bcf7b5d 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -1,3 +1,4 @@
+
## DatePicker
Use Date Picker for date input.
@@ -202,6 +203,74 @@ Picking a date range is supported.
:::
+### Month Range
+
+Picking a month range is supported.
+
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
+```html
+
+
+ Default
+
+
+
+
+ With quick options
+
+
+
+
+
+
+```
+:::
+
### Default Value
If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
@@ -372,7 +441,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 | — | — |
| start-placeholder | placeholder for the start 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/dates/datetime/ week/datetimerange/daterange | date |
+| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | 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 |
| align | alignment | left/center/right | left |
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md
index 9be02f2a4a6..641ac854ce0 100644
--- a/examples/docs/es/date-picker.md
+++ b/examples/docs/es/date-picker.md
@@ -1,3 +1,4 @@
+
## DatePicker
Utilice Date Picker para introducir la fecha.
@@ -204,6 +205,74 @@ Se soporta la selección de un rango de fechas.
:::
+### Month Range
+
+Picking a month range is supported.
+
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
+```html
+
+
+ Default
+
+
+
+
+ With quick options
+
+
+
+
+
+
+```
+:::
+
### Valor por defecto
Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar `default-value` para fijar otra fecha. Su valor debe ser definido por `new Date()`.
@@ -373,7 +442,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 | — | — |
| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — |
| end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
-| type | tipo de picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange | date |
+| type | tipo de picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | 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 |
| align | alineación | left/center/right | left | |
| popper-class | nombre de clase personalizada para el dropdown de DatePicker | string | — | — |
diff --git a/examples/docs/fr-FR/date-picker.md b/examples/docs/fr-FR/date-picker.md
index 297f95d64a3..864f679199c 100644
--- a/examples/docs/fr-FR/date-picker.md
+++ b/examples/docs/fr-FR/date-picker.md
@@ -1,3 +1,4 @@
+
## DatePicker
Utilisez le DatePicker pour les champs de dates.
@@ -202,6 +203,74 @@ Vous pouvez sélectionner une plage de dates.
:::
+### Month Range
+
+Picking a month range is supported.
+
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
+```html
+
+
+ Default
+
+
+
+
+ With quick options
+
+
+
+
+
+
+```
+:::
+
### Valeur par défaut
Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez `default-value` pour montrer une autre date. Sa valeur doit être parsable par `new Date()`.
@@ -373,7 +442,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
| placeholder | Le placeholder en mode normal. | string | — | — |
| start-placeholder | Le placeholder pour la date de début en mode plage de dates. | string | — | — |
| end-placeholder | Le placeholder pour la date de fin en mode plage de dates. | string | — | — |
-| type | Type du picker. | string | year/month/date/dates/datetime/ week/datetimerange/daterange | date |
+| type | Type du picker. | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
| format | Format d'affichage dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date). | yyyy-MM-dd |
| align | Alignement. | left/center/right | left |
| popper-class | Nom de classe pour le menu déroulant du DatePicker. | string | — | — |
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index 40393d54b23..73d5b5131cd 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -1,3 +1,4 @@
+
## DatePicker 日期选择器
用于选择或输入日期
@@ -198,6 +199,76 @@
```
:::
+
+### 选择月份范围
+
+可在一个选择器中便捷地选择一个月份范围
+
+:::demo 在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用`unlink-panels`属性解除联动。
+```html
+
+
+ 默认
+
+
+
+
+ 带快捷选项
+
+
+
+
+
+
+```
+:::
+
+
### 日期格式
使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。
@@ -323,7 +394,7 @@
| placeholder | 非范围选择时的占位内容 | string | — | — |
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date |
+| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
| align | 对齐方式 | string | left, center, right | left |
| popper-class | DatePicker 下拉框的类名 | string | — | — |
diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
index a343cb4be4b..d539935b30c 100644
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -1,46 +1,11 @@
-
+
-
- |
- {{ t('el.datepicker.months.jan') }}
- |
-
- {{ t('el.datepicker.months.feb') }}
- |
-
- {{ t('el.datepicker.months.mar') }}
- |
-
- {{ t('el.datepicker.months.apr') }}
- |
-
-
- |
- {{ t('el.datepicker.months.may') }}
- |
-
- {{ t('el.datepicker.months.jun') }}
- |
-
- {{ t('el.datepicker.months.jul') }}
- |
-
- {{ t('el.datepicker.months.aug') }}
- |
-
-
- |
- {{ t('el.datepicker.months.sep') }}
- |
-
- {{ t('el.datepicker.months.oct') }}
- |
-
- {{ t('el.datepicker.months.nov') }}
- |
-
- {{ t('el.datepicker.months.dec') }}
+ |
+ |
+
|
@@ -51,7 +16,7 @@
import Locale from 'element-ui/src/mixins/locale';
import { isDate, range, getDayCountOfMonth, nextDate } from '../util';
import { hasClass } from 'element-ui/src/utils/dom';
- import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
+ import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from 'element-ui/src/utils/util';
const datesInMonth = (year, month) => {
const numOfDays = getDayCountOfMonth(year, month);
@@ -59,46 +24,230 @@
return range(numOfDays).map(n => nextDate(firstDay, n));
};
+ const clearDate = (date) => {
+ return new Date(date.getFullYear(), date.getMonth());
+ };
+
+ const getMonthTimestamp = function(time) {
+ if (typeof time === 'number' || typeof time === 'string') {
+ return clearDate(new Date(time)).getTime();
+ } else if (time instanceof Date) {
+ return clearDate(time).getTime();
+ } else {
+ return NaN;
+ }
+ };
export default {
props: {
disabledDate: {},
value: {},
+ selectionMode: {
+ default: 'month'
+ },
+ minDate: {},
+
+ maxDate: {},
defaultValue: {
validator(val) {
// null or valid Date Object
- return val === null || (val instanceof Date && isDate(val));
+ return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
}
},
- date: {}
+ date: {},
+ rangeState: {
+ default() {
+ return {
+ endDate: null,
+ selecting: false
+ };
+ }
+ }
},
+
mixins: [Locale],
+
+ watch: {
+ 'rangeState.endDate'(newVal) {
+ this.markRange(this.minDate, newVal);
+ },
+
+ minDate(newVal, oldVal) {
+ if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+ this.markRange(this.minDate, this.maxDate);
+ }
+ },
+
+ maxDate(newVal, oldVal) {
+ if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+ this.markRange(this.minDate, this.maxDate);
+ }
+ }
+ },
+
+ data() {
+ return {
+ months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
+ tableRows: [ [], [], [] ],
+ lastRow: null,
+ lastColumn: null
+ };
+ },
+
methods: {
- getCellStyle(month) {
+ cellMatchesDate(cell, date) {
+ const value = new Date(date);
+ return this.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth();
+ },
+ getCellStyle(cell) {
const style = {};
const year = this.date.getFullYear();
const today = new Date();
-
+ const month = cell.text;
+ const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
style.disabled = typeof this.disabledDate === 'function'
? datesInMonth(year, month).every(this.disabledDate)
: false;
style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
style.today = today.getFullYear() === year && today.getMonth() === month;
- style.default = this.defaultValue &&
- this.defaultValue.getFullYear() === year &&
- this.defaultValue.getMonth() === month;
+ style.default = defaultValue.some(date => this.cellMatchesDate(cell, date));
+
+ if (cell.inRange) {
+ style['in-range'] = true;
+ if (cell.start) {
+ style['start-date'] = true;
+ }
+
+ if (cell.end) {
+ style['end-date'] = true;
+ }
+ }
return style;
},
+ getMonthOfCell(month) {
+ const year = this.date.getFullYear();
+ return new Date(year, month, 1);
+ },
+ markRange(minDate, maxDate) {
+ minDate = getMonthTimestamp(minDate);
+ maxDate = getMonthTimestamp(maxDate) || minDate;
+ [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];
+ const rows = this.rows;
+ for (let i = 0, k = rows.length; i < k; i++) {
+ const row = rows[i];
+ for (let j = 0, l = row.length; j < l; j++) {
+
+ const cell = row[j];
+ const index = i * 4 + j;
+ const time = new Date(this.date.getFullYear(), index).getTime();
+
+ cell.inRange = minDate && time >= minDate && time <= maxDate;
+ cell.start = minDate && time === minDate;
+ cell.end = maxDate && time === maxDate;
+ }
+ }
+ },
+ handleMouseMove(event) {
+ if (!this.rangeState.selecting) return;
+ let target = event.target;
+ if (target.tagName === 'A') {
+ target = target.parentNode.parentNode;
+ }
+ if (target.tagName === 'DIV') {
+ target = target.parentNode;
+ }
+ if (target.tagName !== 'TD') return;
+
+ const row = target.parentNode.rowIndex;
+ const column = target.cellIndex;
+ // can not select disabled date
+ if (this.rows[row][column].disabled) return;
+
+ // only update rangeState when mouse moves to a new cell
+ // this avoids frequent Date object creation and improves performance
+ if (row !== this.lastRow || column !== this.lastColumn) {
+ this.lastRow = row;
+ this.lastColumn = column;
+ this.$emit('changerange', {
+ minDate: this.minDate,
+ maxDate: this.maxDate,
+ rangeState: {
+ selecting: true,
+ endDate: this.getMonthOfCell(row * 4 + column)
+ }
+ });
+ }
+ },
handleMonthTableClick(event) {
- const target = event.target;
- if (target.tagName !== 'A') return;
- if (hasClass(target.parentNode, 'disabled')) return;
- const column = target.parentNode.cellIndex;
- const row = target.parentNode.parentNode.rowIndex;
+ let target = event.target;
+ if (target.tagName === 'A') {
+ target = target.parentNode.parentNode;
+ }
+ if (target.tagName === 'DIV') {
+ target = target.parentNode;
+ }
+ if (target.tagName !== 'TD') return;
+ if (hasClass(target, 'disabled')) return;
+ const column = target.cellIndex;
+ const row = target.parentNode.rowIndex;
const month = row * 4 + column;
+ const newDate = this.getMonthOfCell(month);
+ if (this.selectionMode === 'range') {
+ if (!this.rangeState.selecting) {
+ this.$emit('pick', {minDate: newDate, maxDate: null});
+ this.rangeState.selecting = true;
+ } else {
+ if (newDate >= this.minDate) {
+ this.$emit('pick', {minDate: this.minDate, maxDate: newDate});
+ } else {
+ this.$emit('pick', {minDate: newDate, maxDate: this.minDate});
+ }
+ this.rangeState.selecting = false;
+ }
+ } else {
+ this.$emit('pick', month);
+ }
+ }
+ },
+
+ computed: {
+ rows() {
+ // TODO: refactory rows / getCellClasses
+ const rows = this.tableRows;
+ const disabledDate = this.disabledDate;
+ const selectedDate = [];
+ const now = getMonthTimestamp(new Date());
+
+ for (let i = 0; i < 3; i++) {
+ const row = rows[i];
+ for (let j = 0; j < 4; j++) {
+ let cell = row[j];
+ if (!cell) {
+ cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
+ }
+
+ cell.type = 'normal';
- this.$emit('pick', month);
+ const index = i * 4 + j;
+ const time = new Date(this.date.getFullYear(), index).getTime();
+ cell.inRange = time >= getMonthTimestamp(this.minDate) && time <= getMonthTimestamp(this.maxDate);
+ cell.start = this.minDate && time === getMonthTimestamp(this.minDate);
+ cell.end = this.maxDate && time === getMonthTimestamp(this.maxDate);
+ const isToday = time === now;
+
+ if (isToday) {
+ cell.type = 'today';
+ }
+ cell.text = index;
+ let cellDate = new Date(time);
+ cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
+ cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
+
+ this.$set(row, j, cell);
+ }
+ }
+ return rows;
}
}
};
diff --git a/packages/date-picker/src/panel/month-range.vue b/packages/date-picker/src/panel/month-range.vue
new file mode 100644
index 00000000000..f6b27c55143
--- /dev/null
+++ b/packages/date-picker/src/panel/month-range.vue
@@ -0,0 +1,289 @@
+
+
+
+
+
+
+
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index 3e74e14399a..7ea12d5fa17 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -114,6 +114,7 @@ const DEFAULT_FORMATS = {
week: 'yyyywWW',
timerange: 'HH:mm:ss',
daterange: 'yyyy-MM-dd',
+ monthrange: 'yyyy-MM',
datetimerange: 'yyyy-MM-dd HH:mm:ss',
year: 'yyyy'
};
@@ -126,6 +127,7 @@ const HAVE_TRIGGER_TYPES = [
'month',
'year',
'daterange',
+ 'monthrange',
'timerange',
'datetimerange',
'dates'
@@ -213,6 +215,10 @@ const TYPE_VALUE_RESOLVER_MAP = {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
+ monthrange: {
+ formatter: RANGE_FORMATTER,
+ parser: RANGE_PARSER
+ },
datetimerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
diff --git a/packages/date-picker/src/picker/date-picker.js b/packages/date-picker/src/picker/date-picker.js
index 63a7df366fc..6efc0edb81e 100644
--- a/packages/date-picker/src/picker/date-picker.js
+++ b/packages/date-picker/src/picker/date-picker.js
@@ -1,10 +1,13 @@
import Picker from '../picker';
import DatePanel from '../panel/date';
import DateRangePanel from '../panel/date-range';
+import MonthRangePanel from '../panel/month-range';
const getPanel = function(type) {
if (type === 'daterange' || type === 'datetimerange') {
return DateRangePanel;
+ } else if (type === 'monthrange') {
+ return MonthRangePanel;
}
return DatePanel;
};
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 374acdea164..cff12a1243d 100644
--- a/packages/theme-chalk/src/date-picker/date-range-picker.scss
+++ b/packages/theme-chalk/src/date-picker/date-range-picker.scss
@@ -50,14 +50,11 @@
@include when(left) {
border-right: 1px solid $--datepicker-inner-border-color;
}
+ .el-date-range-picker__header {
- @include when(right) {
- .el-date-range-picker__header {
-
- div {
- margin-left: 50px;
- margin-right: 50px;
- }
+ div {
+ margin-left: 50px;
+ margin-right: 50px;
}
}
}
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index c2d3a4f9153..ca071d38657 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -7,14 +7,22 @@
td {
text-align: center;
- padding: 20px 3px;
+ padding: 8px 0px;
cursor: pointer;
-
+ & div {
+ height: 48px;
+ padding: 6px 0;
+ box-sizing: border-box;
+ }
&.today {
.cell {
color: $--color-primary;
font-weight: bold;
}
+ &.start-date .cell,
+ &.end-date .cell {
+ color: $--color-white;
+ }
}
&.disabled .cell {
@@ -28,18 +36,45 @@
}
.cell {
- width: 48px;
- height: 32px;
+ width: 60px;
+ height: 36px;
display: block;
- line-height: 32px;
+ line-height: 36px;
color: $--datepicker-color;
margin: 0 auto;
-
+ border-radius: 18px;
&:hover {
color: $--datepicker-text-hover-color;
}
}
+ &.in-range div {
+ background-color: $--datepicker-inrange-color;
+ &:hover {
+ background-color: $--datepicker-inrange-hover-color;
+ }
+ }
+ &.start-date div,
+ &.end-date div {
+ color: $--color-white;
+ }
+
+ &.start-date .cell,
+ &.end-date .cell {
+ color: $--color-white;
+ background-color: $--datepicker-active-color;
+ }
+
+ &.start-date div {
+ border-top-left-radius: 24px;
+ border-bottom-left-radius: 24px;
+ }
+
+ &.end-date div {
+ border-top-right-radius: 24px;
+ border-bottom-right-radius: 24px;
+ }
+
&.current:not(.disabled) .cell {
color: $--datepicker-active-color;
}
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index afb48604532..8110c2af0c7 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -12,6 +12,13 @@
width: 220px;
}
+ @include m((monthrange)) {
+ &.el-input,
+ &.el-input__inner {
+ width: 300px;
+ }
+ }
+
@include m((daterange, timerange)) {
&.el-input,
&.el-input__inner {
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 53ccb998168..ec09b2f871d 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -2231,6 +2231,308 @@ describe('DatePicker', () => {
});
});
+ describe('type:monthrange', () => {
+ it('works', done => {
+ vm = createVue({
+ template: '',
+ data() {
+ return {
+ value: ''
+ };
+ }
+ }, true);
+
+ const rangePicker = vm.$refs.compo;
+ const inputs = rangePicker.$el.querySelectorAll('input');
+ inputs[0].focus();
+
+ setTimeout(_ => {
+ const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+ expect(Array.prototype.slice.call(panels)).to.length(2);
+ panels[0].querySelector('td:not(.disabled)').click();
+ setTimeout(_ => {
+ panels[1].querySelector('td:not(.disabled)').click();
+ setTimeout(_ => {
+ inputs[0].focus();
+ setTimeout(_ => {
+ // correct highlight
+ const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+ const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+ const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');
+ expect(startDate.length).to.equal(1);
+ expect(endDate.length).to.equal(1);
+ expect(inRangeDate.length).to.above(0);
+ // value is array
+ expect(vm.value).to.be.an.instanceof(Array);
+ // input text is something like date string
+ expect(inputs[0].value.length).to.equal(7);
+ expect(inputs[1].value.length).to.equal(7);
+ done();
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ });
+
+ it('works: reverse selection', done => {
+ vm = createVue({
+ template: '',
+ data() {
+ return {
+ value: ''
+ };
+ }
+ }, true);
+
+ const rangePicker = vm.$refs.compo;
+ const inputs = rangePicker.$el.querySelectorAll('input');
+ inputs[0].focus();
+
+ setTimeout(_ => {
+ const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+ expect(Array.prototype.slice.call(panels)).to.length(2);
+ panels[1].querySelector('td:not(.disabled)').click();
+ setTimeout(_ => {
+ panels[0].querySelector('td:not(.disabled)').click();
+ setTimeout(_ => {
+ inputs[0].focus();
+ setTimeout(_ => {
+ // correct highlight
+ const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+ const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+ const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');
+ expect(startDate.length).to.equal(1);
+ expect(endDate.length).to.equal(1);
+ expect(inRangeDate.length).to.above(0);
+ // value is array
+ expect(vm.value).to.be.an.instanceof(Array);
+ // input text is something like date string
+ expect(inputs[0].value.length).to.equal(7);
+ expect(inputs[1].value.length).to.equal(7);
+ // result array is properly ordered
+ expect(vm.value[0].getTime() < vm.value[1].getTime()).to.be.true;
+ done();
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ });
+
+ it('type:monthrange unlink:true', done => {
+ vm = createVue({
+ template: '',
+ data() {
+ return {
+ value: [new Date(2000, 9), new Date(2000, 10)]
+ };
+ }
+ }, true);
+
+ const rangePicker = vm.$refs.compo;
+ const inputs = rangePicker.$el.querySelectorAll('input');
+ setTimeout(_ => {
+ inputs[0].focus();
+ setTimeout(_ => {
+ const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+ 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).map(i => Number(i));
+ const rightText = right.textContent.match(/\d+/g).map(i => Number(i));
+ expect(rightText[0] - leftText[0]).to.equal(1); // one year
+ done();
+ }, DELAY);
+ }, DELAY);
+ });
+
+ it('unlink panels', done => {
+ vm = createTest(DatePicker, {
+ type: 'monthrange',
+ 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();
+
+ 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).map(i => Number(i));
+ const rightText = right.textContent.match(/\d+/g).map(i => Number(i));
+
+ expect(rightText[0] - leftText[0]).to.equal(2);
+
+ done();
+ }, DELAY);
+ }, DELAY);
+ });
+
+ it('daylight saving time highlight', done => {
+ // Run test with environment variable TZ=Australia/Sydney
+ // The following test uses Australian Eastern Daylight Time (AEDT)
+ // AEST -> AEDT shift happened on 2016-10-02 02:00:00
+ vm = createVue({
+ template: '',
+ data() {
+ return {
+ value: [new Date(2016, 6), new Date(2016, 12)]
+ };
+ }
+ }, true);
+
+ const rangePicker = vm.$refs.compo;
+ const inputs = rangePicker.$el.querySelectorAll('input');
+ inputs[0].focus();
+
+ setTimeout(_ => {
+ const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+ const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+ expect(startDate.length).to.equal(1);
+ expect(endDate.length).to.equal(1);
+ done();
+ }, DELAY);
+ });
+
+ it('clear value', done => {
+ vm = createVue({
+ template: '',
+ data() {
+ return {
+ value: [new Date(2000, 9), new Date(2000, 10)]
+ };
+ }
+ }, true);
+
+ vm.$el.querySelector('input').focus();
+
+ setTimeout(_ => {
+ vm.$refs.compo.showClose = true;
+ vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
+ setTimeout(_ => {
+ expect(vm.value).to.equal(null);
+ done();
+ }, DELAY);
+ }, DELAY);
+ });
+
+ it('change event', done => {
+ vm = createVue({
+ template: `
+ `,
+ data() {
+ return {
+ value: ''
+ };
+ }
+ }, true);
+
+ const spy = sinon.spy();
+ vm.$refs.compo.$on('change', spy);
+
+ const input = vm.$el.querySelector('input');
+
+ input.blur();
+ input.focus();
+
+ setTimeout(_ => {
+ const picker = vm.$refs.compo.picker;
+ setTimeout(_ => {
+ picker.$el.querySelector('td:not(.disabled)').click();
+ setTimeout(_ => {
+ picker.$el.querySelector('td:not(.disabled) ~ td:not(.disabled)').click();
+ setTimeout(_ => {
+ expect(spy.calledOnce).to.equal(true);
+ // change event is not emitted if used does not change value
+ // datarange also requires proper array equality check
+ input.blur();
+ input.focus();
+ setTimeout(_ => {
+ const startCell = picker.$el.querySelector('td.start-date');
+ const endCell = picker.$el.querySelector('td.end-date');
+ startCell.click();
+ setTimeout(_ => {
+ endCell.click();
+ setTimeout(_ => {
+ expect(spy.calledOnce).to.equal(true);
+ done();
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ });
+
+ describe('default value', () => {
+ it('single', done => {
+ let defaultValue = '2000-10';
+ let expectValue = [new Date(2000, 9), new Date(2000, 10)];
+
+ vm = createVue({
+ template: '',
+ data() {
+ return {
+ value: '',
+ defaultValue
+ };
+ }
+ }, true);
+
+ vm.$el.querySelector('input').focus();
+ setTimeout(_ => {
+ const $el = vm.$refs.compo.picker.$el;
+ const defaultEls = $el.querySelectorAll('.el-month-table td.default');
+ expect(defaultEls.length).to.equal(1);
+ defaultEls[0].click();
+ setTimeout(_ => {
+ $el.querySelector('.el-month-table td.default + td').click();
+ setTimeout(_ => {
+ expect(vm.value).to.eql(expectValue);
+ done();
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ });
+
+ it('array', done => {
+ let defaultValue = ['2000-01', '2000-03'];
+ let expectValue = [new Date(2000, 0), new Date(2000, 2)];
+
+ vm = createVue({
+ template: '',
+ data() {
+ return {
+ value: '',
+ defaultValue
+ };
+ }
+ }, true);
+
+ vm.$el.querySelector('input').focus();
+ setTimeout(_ => {
+ const defaultEls = vm.$refs.compo.picker.$el.querySelectorAll('.el-month-table td.default');
+ expect(defaultEls.length).to.equal(2);
+ defaultEls[0].click();
+ setTimeout(_ => {
+ defaultEls[1].click();
+ setTimeout(_ => {
+ expect(vm.value).to.eql(expectValue);
+ done();
+ }, DELAY);
+ }, DELAY);
+ }, DELAY);
+ });
+ });
+ });
+
const currentMonth = new Date(new Date().getTime());
currentMonth.setDate(1);
const chineseWeek = ['一', '二', '三', '四', '五', '六', '日'];