diff --git a/packages/devextreme/js/ui/calendar/ui.calendar.js b/packages/devextreme/js/ui/calendar/ui.calendar.js index 918ebb0284f4..600144136100 100644 --- a/packages/devextreme/js/ui/calendar/ui.calendar.js +++ b/packages/devextreme/js/ui/calendar/ui.calendar.js @@ -90,8 +90,6 @@ const Calendar = Editor.inherit({ value: null, - values: [], - dateSerializationFormat: undefined, min: new Date(1000, 0), @@ -269,7 +267,6 @@ const Calendar = Editor.inherit({ }, _dateValue: function(value, event) { - const optionName = Array.isArray(value) ? 'values' : 'value'; if(event) { if(event.type === 'keydown') { const cellElement = this._view._getContouredCell().get(0); @@ -277,25 +274,32 @@ const Calendar = Editor.inherit({ } this._saveValueChangeEvent(event); } - this._dateOption(optionName, value); + this._dateOption('value', value); }, _dateOption: function(optionName, optionValue) { + const isArray = optionName === 'value' && !this._isSingleMode(); + const value = this.option('value'); + if(arguments.length === 1) { - const values = this.option('values') ?? []; - return optionName === 'values' - ? values.map((value) => this._convertToDate(value)) + + return isArray + ? (value ?? []).map((value) => this._convertToDate(value)) : this._convertToDate(this.option(optionName)); } const serializationFormat = this._getSerializationFormat(optionName); - const serializedValue = optionName === 'values' + const serializedValue = isArray ? optionValue?.map((value) => dateSerialization.serializeDate(value, serializationFormat)) || [] : dateSerialization.serializeDate(optionValue, serializationFormat); this.option(optionName, serializedValue); }, + _isSingleMode: function() { + return this.option('selectionMode') === 'single'; + }, + _shiftDate: function(zoomLevel, date, offset, reverse) { switch(zoomLevel) { case ZOOM_LEVEL.MONTH: @@ -442,6 +446,7 @@ const Calendar = Editor.inherit({ _refreshSelectionStrategy: function() { this._initSelectionStrategy(); + this._selectionStrategy.restoreValue(); this._refresh(); }, @@ -852,7 +857,7 @@ const Calendar = Editor.inherit({ const result = new Date(date); const currentValue = this._dateOption('value'); - if(currentValue) { + if(currentValue && this._isSingleMode()) { result.setHours(currentValue.getHours()); result.setMinutes(currentValue.getMinutes()); result.setSeconds(currentValue.getSeconds()); @@ -1448,7 +1453,6 @@ const Calendar = Editor.inherit({ break; case 'selectionMode': this._refreshSelectionStrategy(); - this._selectionStrategy.restoreValue(); this._initCurrentDate(); break; case 'selectWeekOnClick': @@ -1479,19 +1483,10 @@ const Calendar = Editor.inherit({ this._updateButtonsVisibility(); break; case 'value': - if(this.option('selectionMode') === 'single') { - this._selectionStrategy.processValueChanged([value], [previousValue]); - } + this._selectionStrategy.processValueChanged(value, previousValue); this._setSubmitValue(value); this.callBase(args); break; - case 'values': - if(this.option('selectionMode') !== 'single') { - this._selectionStrategy.processValueChanged(value, previousValue); - } - this._raiseValueChangeAction(value, previousValue); - this._saveValueChangeEvent(undefined); - break; case 'viewsCount': this._refreshViews(); this._renderNavigator(); diff --git a/packages/devextreme/js/ui/calendar/ui.calendar.multiple.selection.strategy.js b/packages/devextreme/js/ui/calendar/ui.calendar.multiple.selection.strategy.js index 79bd773bb414..722bd55185dd 100644 --- a/packages/devextreme/js/ui/calendar/ui.calendar.multiple.selection.strategy.js +++ b/packages/devextreme/js/ui/calendar/ui.calendar.multiple.selection.strategy.js @@ -8,7 +8,7 @@ class CalendarMultiSelectionStrategy extends CalendarSelectionStrategy { getViewOptions() { return { - value: this.dateOption('values'), + value: this.dateOption('value'), range: [], selectionMode: 'multi', onWeekNumberClick: this._shouldHandleWeekNumberClick() ? this._weekNumberClickHandler.bind(this) : null, @@ -16,35 +16,35 @@ class CalendarMultiSelectionStrategy extends CalendarSelectionStrategy { } selectValue(selectedValue, e) { - const values = [...this.dateOption('values')]; - const alreadySelectedIndex = values.findIndex(date => date?.toDateString() === selectedValue.toDateString()); + const value = [...this.dateOption('value')]; + const alreadySelectedIndex = value.findIndex(date => date?.toDateString() === selectedValue.toDateString()); if(alreadySelectedIndex > -1) { - values.splice(alreadySelectedIndex, 1); + value.splice(alreadySelectedIndex, 1); } else { - values.push(selectedValue); + value.push(selectedValue); } this.skipNavigate(); this._updateCurrentDate(selectedValue); this._currentDateChanged = true; - this.dateValue(values, e); + this.dateValue(value, e); } updateAriaSelected(value, previousValue) { - value ??= this.dateOption('values'); + value ??= this.dateOption('value'); previousValue ??= []; super.updateAriaSelected(value, previousValue); } getDefaultCurrentDate() { - const dates = this.dateOption('values').filter(value => value); + const dates = this.dateOption('value').filter(value => value); return this._getLowestDateInArray(dates); } restoreValue() { - this.calendar.option('values', []); + this.calendar.option('value', []); } _weekNumberClickHandler({ rowDates, event }) { diff --git a/packages/devextreme/js/ui/calendar/ui.calendar.range.selection.strategy.js b/packages/devextreme/js/ui/calendar/ui.calendar.range.selection.strategy.js index 148114d284cb..a3f59a548c7d 100644 --- a/packages/devextreme/js/ui/calendar/ui.calendar.range.selection.strategy.js +++ b/packages/devextreme/js/ui/calendar/ui.calendar.range.selection.strategy.js @@ -10,7 +10,7 @@ class CalendarRangeSelectionStrategy extends CalendarSelectionStrategy { } getViewOptions() { - const value = this._getValues(); + const value = this._getValue(); const range = this._getDaysInRange(value[0], value[1]); return { @@ -23,7 +23,7 @@ class CalendarRangeSelectionStrategy extends CalendarSelectionStrategy { } selectValue(selectedValue, e) { - const [startDate, endDate] = this._getValues(); + const [startDate, endDate] = this._getValue(); this.skipNavigate(); this._updateCurrentDate(selectedValue); @@ -56,7 +56,7 @@ class CalendarRangeSelectionStrategy extends CalendarSelectionStrategy { } updateAriaSelected(value, previousValue) { - value ??= this._getValues(); + value ??= this._getValue(); previousValue ??= []; super.updateAriaSelected(value, previousValue); @@ -71,35 +71,35 @@ class CalendarRangeSelectionStrategy extends CalendarSelectionStrategy { getDefaultCurrentDate() { const { _allowChangeSelectionOrder, _currentSelection } = this.calendar.option(); - const values = this.dateOption('values'); + const value = this.dateOption('value'); if(_allowChangeSelectionOrder) { - if(_currentSelection === 'startDate' && values[0]) { - return values[0]; + if(_currentSelection === 'startDate' && value[0]) { + return value[0]; } - if(_currentSelection === 'endDate' && values[1]) { - return values[1]; + if(_currentSelection === 'endDate' && value[1]) { + return value[1]; } } - const dates = values.filter(value => value); + const dates = value.filter(value => value); return this._getLowestDateInArray(dates); } restoreValue() { - this.calendar.option('values', [null, null]); + this.calendar.option('value', [null, null]); } - _getValues() { - const values = this.dateOption('values'); + _getValue() { + const value = this.dateOption('value'); - if(!values.length) { - return values; + if(!value.length) { + return value; } - let [startDate, endDate] = values; + let [startDate, endDate] = value; if(startDate && endDate && startDate > endDate) { [startDate, endDate] = [endDate, startDate]; @@ -109,7 +109,7 @@ class CalendarRangeSelectionStrategy extends CalendarSelectionStrategy { } _getRange() { - const [startDate, endDate] = this._getValues(); + const [startDate, endDate] = this._getValue(); return this._getDaysInRange(startDate, endDate); } @@ -131,7 +131,7 @@ class CalendarRangeSelectionStrategy extends CalendarSelectionStrategy { _cellHoverHandler(e) { const isMaxZoomLevel = this._isMaxZoomLevel(); - const [startDate, endDate] = this._getValues(); + const [startDate, endDate] = this._getValue(); const { _allowChangeSelectionOrder, _currentSelection } = this.calendar.option(); if(isMaxZoomLevel) { @@ -163,9 +163,9 @@ class CalendarRangeSelectionStrategy extends CalendarSelectionStrategy { _weekNumberClickHandler({ rowDates, event }) { const selectedDates = rowDates.filter((date) => !this._isDateDisabled(date)); - const values = selectedDates.length ? [selectedDates[0], selectedDates[selectedDates.length - 1]] : [null, null]; + const value = selectedDates.length ? [selectedDates[0], selectedDates[selectedDates.length - 1]] : [null, null]; - this.dateValue(values, event); + this.dateValue(value, event); } } diff --git a/packages/devextreme/js/ui/calendar/ui.calendar.selection.strategy.js b/packages/devextreme/js/ui/calendar/ui.calendar.selection.strategy.js index 2830a14ec064..6fdfffc7cdea 100644 --- a/packages/devextreme/js/ui/calendar/ui.calendar.selection.strategy.js +++ b/packages/devextreme/js/ui/calendar/ui.calendar.selection.strategy.js @@ -1,3 +1,5 @@ +import { isDefined } from '../../core/utils/type'; + class CalendarSelectionStrategy { constructor(component) { this.calendar = component; @@ -24,6 +26,12 @@ class CalendarSelectionStrategy { } processValueChanged(value, previousValue) { + if(isDefined(value) && !Array.isArray(value)) { + value = [value]; + } + if(isDefined(previousValue) && !Array.isArray(previousValue)) { + previousValue = [previousValue]; + } value = value?.map((item) => this._convertToDate(item)) || []; previousValue = previousValue?.map((item) => this._convertToDate(item)) || []; diff --git a/packages/devextreme/js/ui/date_range_box/strategy/rangeCalendar.js b/packages/devextreme/js/ui/date_range_box/strategy/rangeCalendar.js index fb371da8ab9c..b4e0baacaacc 100644 --- a/packages/devextreme/js/ui/date_range_box/strategy/rangeCalendar.js +++ b/packages/devextreme/js/ui/date_range_box/strategy/rangeCalendar.js @@ -57,7 +57,7 @@ class RangeCalendarStrategy extends CalendarStrategy { const dateBoxValueChanged = !isSameDates(dateBoxValue, newDateBoxValue); if(dateBoxValueChanged) { - this.dateRangeBox.getStartDateBox()._strategy._widget.option('values', this.dateRangeBox.option('value')); + this.dateRangeBox.getStartDateBox()._strategy._widget.option('value', this.dateRangeBox.option('value')); } else { this.dateRangeBox.getStartDateBox()._strategy._widget._enterKeyHandler(e); } @@ -117,7 +117,7 @@ class RangeCalendarStrategy extends CalendarStrategy { return extend(super._getWidgetOptions(), { disabledDates, - values: value, + value, selectionMode: 'range', viewsCount: multiView ? 2 : 1, _allowChangeSelectionOrder: true, @@ -140,7 +140,7 @@ class RangeCalendarStrategy extends CalendarStrategy { } getValue() { - return this._widget.option('values'); + return this._widget.option('value'); } _updateValue() { @@ -151,7 +151,7 @@ class RangeCalendarStrategy extends CalendarStrategy { } this._shouldPreventFocusChange = true; - this._widget.option('values', value); + this._widget.option('value', value); } _isInstantlyMode() { diff --git a/packages/devextreme/js/ui/date_range_box/ui.multiselect_date_box.js b/packages/devextreme/js/ui/date_range_box/ui.multiselect_date_box.js index 5e201e8418b5..44103f10e8c3 100644 --- a/packages/devextreme/js/ui/date_range_box/ui.multiselect_date_box.js +++ b/packages/devextreme/js/ui/date_range_box/ui.multiselect_date_box.js @@ -124,7 +124,7 @@ class MultiselectDateBox extends DateBox { } const calendar = this._strategy.dateRangeBox.getStartDateBox()._strategy._widget; - const value = calendar.option('values'); + const value = calendar.option('value'); const startDate = getDeserializedDate(value[0]); const endDate = getDeserializedDate(value[1]); diff --git a/packages/devextreme/testing/testcafe/tests/editors/calendar/common.ts b/packages/devextreme/testing/testcafe/tests/editors/calendar/common.ts index 8c444efca1e2..3ec08a4432ce 100644 --- a/packages/devextreme/testing/testcafe/tests/editors/calendar/common.ts +++ b/packages/devextreme/testing/testcafe/tests/editors/calendar/common.ts @@ -154,7 +154,7 @@ test('Calendar with showWeekNumbers rendered correct with cellTemplate', async ( .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); }).before(async () => createWidget('dxCalendar', { - values: [new Date(2023, 0, 5), new Date(2023, 0, 17), new Date(2023, 1, 2)], + value: [new Date(2023, 0, 5), new Date(2023, 0, 17), new Date(2023, 1, 2)], selectionMode, })); @@ -172,7 +172,7 @@ test('Calendar with showWeekNumbers rendered correct with cellTemplate', async ( .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); }).before(async () => createWidget('dxCalendar', { - values: [new Date(2023, 0, 5), new Date(2023, 0, 17), new Date(2023, 1, 2)], + value: [new Date(2023, 0, 5), new Date(2023, 0, 17), new Date(2023, 1, 2)], selectionMode, showWeekNumbers: true, firstDayOfWeek: 1, @@ -192,7 +192,7 @@ test('Calendar with multiview rendered correct', async (t) => { .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); }).before(async () => createWidget('dxCalendar', { - values: [new Date(2023, 0, 5), new Date(2023, 1, 14)], + value: [new Date(2023, 0, 5), new Date(2023, 1, 14)], selectionMode: 'range', viewsCount: 2, })); diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/behavior.ts b/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/behavior.ts index 49b7f4d4238a..abaaac2bafc4 100644 --- a/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/behavior.ts +++ b/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/behavior.ts @@ -669,7 +669,7 @@ test('Value in calendar should be updated by click on clear button if popup is o .click(dateRangeBox.clearButton) .expect(dateRangeBox.option('value')) .eql([null, null]) - .expect(dateRangeBox.getCalendar().option('values')) + .expect(dateRangeBox.getCalendar().option('value')) .eql([null, null]) .expect(ClientFunction(() => (window as any).onValueChangedCounter)()) .eql(1); @@ -709,7 +709,7 @@ test('Value in calendar should be updated after change start date value by keybo await t .expect(dateRangeBox.option('value')) .eql([new Date(2021, 9, 17), new Date(2021, 9, 24)]) - .expect(dateRangeBox.getCalendar().option('values')) + .expect(dateRangeBox.getCalendar().option('value')) .eql([new Date(2021, 9, 17), new Date(2021, 9, 24)]) .expect(ClientFunction(() => (window as any).onValueChangedCounter)()) .eql(0); @@ -722,7 +722,7 @@ test('Value in calendar should be updated after change start date value by keybo .eql(true) .expect(dateRangeBox.option('value')) .eql([new Date(2020, 9, 17), new Date(2021, 9, 24)]) - .expect(dateRangeBox.getCalendar().option('values')) + .expect(dateRangeBox.getCalendar().option('value')) .eql([new Date(2020, 9, 17), new Date(2021, 9, 24)]) .expect(ClientFunction(() => (window as any).onValueChangedCounter)()) .eql(1); @@ -763,7 +763,7 @@ test('Value in calendar should be updated after change start date value by keybo await t .expect(dateRangeBox.option('value')) .eql([new Date(2021, 9, 17), new Date(2021, 9, 24)]) - .expect(dateRangeBox.getCalendar().option('values')) + .expect(dateRangeBox.getCalendar().option('value')) .eql([new Date(2021, 9, 17), new Date(2021, 9, 24)]) .expect(ClientFunction(() => (window as any).onValueChangedCounter)()) .eql(0); @@ -776,7 +776,7 @@ test('Value in calendar should be updated after change start date value by keybo .eql(true) .expect(dateRangeBox.option('value')) .eql([new Date(2019, 9, 17), new Date(2021, 9, 24)]) - .expect(dateRangeBox.getCalendar().option('values')) + .expect(dateRangeBox.getCalendar().option('value')) .eql([new Date(2019, 9, 17), new Date(2021, 9, 24)]) .expect(ClientFunction(() => (window as any).onValueChangedCounter)()) .eql(1); @@ -790,7 +790,7 @@ test('Value in calendar should be updated after change start date value by keybo .eql(true) .expect(dateRangeBox.option('value')) .eql([new Date(2019, 9, 17), new Date(2023, 9, 24)]) - .expect(dateRangeBox.getCalendar().option('values')) + .expect(dateRangeBox.getCalendar().option('value')) .eql([new Date(2019, 9, 17), new Date(2023, 9, 24)]) .expect(ClientFunction(() => (window as any).onValueChangedCounter)()) .eql(2); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/calendar.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/calendar.tests.js index 64418bcfa14d..3767a4940921 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/calendar.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/calendar.tests.js @@ -1410,35 +1410,35 @@ QUnit.module('Calendar footer', { }); ['multiple', 'range'].forEach((selectionMode) => { - QUnit.test(`today button click adds today date to values when selectionMode is ${selectionMode}`, function(assert) { + QUnit.test(`today button click adds today date to value when selectionMode is ${selectionMode}`, function(assert) { this.reinit({ selectionMode, - values: [new Date('2022/02/22')], + value: [new Date('2022/02/22')], showTodayButton: true }); - assert.strictEqual(this.calendar.option('values').length, 1); + assert.strictEqual(this.calendar.option('value').length, 1); const $todayButton = this.$element.find(toSelector(CALENDAR_TODAY_BUTTON_CLASS)); $todayButton.trigger('dxclick'); - assert.strictEqual(this.calendar.option('values').length, 2); + assert.strictEqual(this.calendar.option('value').length, 2); }); }); QUnit.test('today button click should deselect date if it is already selected and selectionMode is multiple', function(assert) { this.reinit({ selectionMode: 'multiple', - values: [new Date()], + value: [new Date()], showTodayButton: true }); - assert.strictEqual(this.calendar.option('values').length, 1); + assert.strictEqual(this.calendar.option('value').length, 1); const $todayButton = this.$element.find(toSelector(CALENDAR_TODAY_BUTTON_CLASS)); $todayButton.trigger('dxclick'); - assert.strictEqual(this.calendar.option('values').length, 0); + assert.strictEqual(this.calendar.option('value').length, 0); }); QUnit.test('today view are current after today button click', function(assert) { @@ -1988,8 +1988,7 @@ QUnit.module('Options', { QUnit.module('SelectionMode', { beforeEach: function() { this.options = { - values: [new Date('01/15/2023'), new Date('02/01/2023'), new Date('02/05/2023')], - value: new Date('01/07/2023'), + value: [new Date('01/15/2023'), new Date('02/01/2023'), new Date('02/05/2023')], }; } }, () => { @@ -2006,22 +2005,22 @@ QUnit.module('Options', { [ { - values: [new Date('01/05/2023'), new Date('02/01/2023')], + value: [new Date('01/05/2023'), new Date('02/01/2023')], type: 'dates' }, { - values: ['01/05/2023', '02/01/2023'], + value: ['01/05/2023', '02/01/2023'], type: 'strings' }, { - values: [1672916400000, 1675249200000], + value: [1672916400000, 1675249200000], type: 'numbers' } - ].forEach(({ values, type }) => { - QUnit.test(`Two dates are selected when selectionMode = ${selectionMode} and values are defined as ${type}`, function(assert) { + ].forEach(({ value, type }) => { + QUnit.test(`Two dates are selected when selectionMode = ${selectionMode} and value are defined as ${type}`, function(assert) { this.reinit({ selectionMode, - values + value }); const $cells = $(getCurrentViewInstance(this.calendar).$element().find(toSelector(CALENDAR_SELECTED_DATE_CLASS))); @@ -2031,22 +2030,22 @@ QUnit.module('Options', { }); QUnit.module('CurrentDate', {}, () => { - QUnit.test(`Should be equal to the lowest defined date in values on init (selectionMode=${selectionMode}`, function(assert) { + QUnit.test(`Should be equal to the lowest defined date in value on init (selectionMode=${selectionMode}`, function(assert) { this.reinit({ - values: [null, new Date('01/15/2023'), new Date('02/01/2023')], + value: [null, new Date('01/15/2023'), new Date('02/01/2023')], selectionMode }); - const { currentDate, values } = this.calendar.option(); + const { currentDate, value } = this.calendar.option(); - assert.deepEqual(currentDate, new Date(Math.min(...values.filter(value => value)))); + assert.deepEqual(currentDate, new Date(Math.min(...value.filter(value => value)))); }); - QUnit.test(`Should be equal to the lowest date in values on runtime values change (selectionMode=${selectionMode}`, function(assert) { + QUnit.test(`Should be equal to the lowest date in value on runtime value change (selectionMode=${selectionMode}`, function(assert) { this.reinit({ selectionMode }); - this.calendar.option('values', [new Date(), new Date('2020/02/02')]); - const { currentDate, values } = this.calendar.option(); + this.calendar.option('value', [new Date(), new Date('2020/02/02')]); + const { currentDate, value } = this.calendar.option(); - assert.deepEqual(currentDate, values[1]); + assert.deepEqual(currentDate, value[1]); }); QUnit.test(`Should be equal to new selected cell date when selectionMode = ${selectionMode}`, function(assert) { @@ -2092,7 +2091,7 @@ QUnit.module('Options', { $cell.trigger('dxclick'); - assert.strictEqual(this.calendar.option('values').length, 4); + assert.strictEqual(this.calendar.option('value').length, 4); assert.ok($cell.hasClass(CALENDAR_SELECTED_DATE_CLASS)); }); @@ -2101,7 +2100,7 @@ QUnit.module('Options', { $cell.trigger('dxclick'); - assert.strictEqual(this.calendar.option('values').length, 2); + assert.strictEqual(this.calendar.option('value').length, 2); assert.notOk($cell.hasClass(CALENDAR_SELECTED_DATE_CLASS)); }); }); @@ -2109,12 +2108,12 @@ QUnit.module('Options', { QUnit.module('Range', { beforeEach: function() { this.reinit({ - values: ['2023/01/13', '2023/01/17', '2023/01/20'], + value: ['2023/01/13', '2023/01/17', '2023/01/20'], selectionMode: 'range' }); } }, () => { - QUnit.test('Only first two dates from values option should be selected', function(assert) { + QUnit.test('Only first two dates from value option should be selected', function(assert) { const $cell1 = this.$element.find('*[data-value="2023/01/13"]'); const $cell2 = this.$element.find('*[data-value="2023/01/17"]'); const $cell3 = this.$element.find('*[data-value="2023/01/20"]'); @@ -2142,51 +2141,51 @@ QUnit.module('Options', { assert.ok($cell.hasClass(CALENDAR_CELL_IN_RANGE_CLASS)); }); - QUnit.test('Should reselect startDate and clear endDate on click when both values are defined', function(assert) { - const expectedValues = [new Date('2023/01/11'), null]; + QUnit.test('Should reselect startDate and clear endDate on click when both value are defined', function(assert) { + const expectedValue = [new Date('2023/01/11'), null]; const $cell = $(getCurrentViewInstance(this.calendar).$element().find('*[data-value="2023/01/11"]')); $cell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), expectedValues); + assert.deepEqual(this.calendar.option('value'), expectedValue); }); QUnit.test('Should select endDate on cell click when startDate is alredy defined and endDate not', function(assert) { this.reinit({ - values: ['2023/01/13', null], + value: ['2023/01/13', null], selectionMode: 'range' }); - const expectedValues = [new Date('2023/01/13'), new Date('2023/01/15')]; + const expectedValue = [new Date('2023/01/13'), new Date('2023/01/15')]; const $cell = $(getCurrentViewInstance(this.calendar).$element().find('*[data-value="2023/01/15"]')); $cell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), expectedValues); + assert.deepEqual(this.calendar.option('value'), expectedValue); }); QUnit.test('Should swap startDate and endDate on cell when clicked endDate is less then startDate', function(assert) { this.reinit({ - values: ['2023/01/13', null], + value: ['2023/01/13', null], selectionMode: 'range' }); - const expectedValues = [new Date('2023/01/07'), new Date('2023/01/13')]; + const expectedValue = [new Date('2023/01/07'), new Date('2023/01/13')]; const $cell = $(getCurrentViewInstance(this.calendar).$element().find('*[data-value="2023/01/07"]')); $cell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), expectedValues); + assert.deepEqual(this.calendar.option('value'), expectedValue); }); [ { - values: [null, null], + value: [null, null], scenario: 'when both values are not defined' }, { - values: ['2023/01/13', '2023/01/17'], + value: ['2023/01/13', '2023/01/17'], scenario: 'when both values are defined' } - ].forEach(({ values, scenario }) => { + ].forEach(({ value, scenario }) => { QUnit.test(`Cells should not have ${CALENDAR_CELL_IN_RANGE_CLASS} class on hover ${scenario}`, function(assert) { if(devices.real().deviceType !== 'desktop') { assert.ok(true, 'test does not actual for mobile devices'); @@ -2194,7 +2193,7 @@ QUnit.module('Options', { } this.reinit({ - values, + value, selectionMode: 'range' }); const $cell = $(getCurrentViewInstance(this.calendar).$element().find('*[data-value="2023/01/25"]')); @@ -2212,7 +2211,7 @@ QUnit.module('Options', { } this.reinit({ - values: ['2023/01/13', null], + value: ['2023/01/13', null], selectionMode: 'range' }); @@ -2246,7 +2245,7 @@ QUnit.module('Options', { } this.reinit({ - values: ['2023/01/13', null], + value: ['2023/01/13', null], selectionMode: 'range' }); const $cell = $(getCurrentViewInstance(this.calendar).$element().find('*[data-value="2023/01/15"]')); @@ -2264,7 +2263,7 @@ QUnit.module('Options', { QUnit.test('Selected range should be reduced when difference between startDate and endDate is bigger than four mounths', function(assert) { this.reinit({ - values: ['1996/01/05', '2121/03/07'], + value: ['1996/01/05', '2121/03/07'], selectionMode: 'range', }); @@ -2276,7 +2275,7 @@ QUnit.module('Options', { [1, 2].forEach((viewsCount) => { QUnit.test(`Big range should start from first date of before view and end on last date of after view (viewsCount=${viewsCount})`, function(assert) { this.reinit({ - values: ['1996/01/05', '2345/03/07'], + value: ['1996/01/05', '2345/03/07'], selectionMode: 'range', viewsCount, }); @@ -2295,7 +2294,7 @@ QUnit.module('Options', { QUnit.test(`Big range should start from start date if start date is date in before view (viewsCount=${viewsCount})`, function(assert) { this.reinit({ - values: ['1996/01/05', '2345/03/07'], + value: ['1996/01/05', '2345/03/07'], selectionMode: 'range', viewsCount, }); @@ -2315,7 +2314,7 @@ QUnit.module('Options', { QUnit.test(`Big range should end on end date if end date is date from views (viewsCount=${viewsCount})`, function(assert) { this.reinit({ - values: ['1996/01/05', '2345/03/07'], + value: ['1996/01/05', '2345/03/07'], selectionMode: 'range', viewsCount, }); @@ -2338,10 +2337,10 @@ QUnit.module('Options', { [new Date(2021, 9, 17), null], [null, new Date(2021, 10, 25)], [new Date(2021, 9, 10), new Date(2021, 9, 17)] - ].forEach((values) => { - QUnit.test(`Click by cell should change startDate value if _allowChangeSelectionOrder is true and _currentSelection is startDate, initial value: ${JSON.stringify(values)}`, function(assert) { + ].forEach((value) => { + QUnit.test(`Click by cell should change startDate value if _allowChangeSelectionOrder is true and _currentSelection is startDate, initial value: ${JSON.stringify(value)}`, function(assert) { this.reinit({ - values, + value, selectionMode: 'range', _allowChangeSelectionOrder: true, _currentSelection: 'startDate', @@ -2351,18 +2350,18 @@ QUnit.module('Options', { let startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $startDateCell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), [startCellDate, values[1]]); + assert.deepEqual(this.calendar.option('value'), [startCellDate, value[1]]); $startDateCell = $(this.calendar.$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(15); startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $startDateCell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), [startCellDate, values[1]]); + assert.deepEqual(this.calendar.option('value'), [startCellDate, value[1]]); }); - QUnit.test(`Click by cell should change startDate value and reselect endDate if _allowChangeSelectionOrder is true and _currentSelection is startDate, startDate > endDate, initial value: ${JSON.stringify(values)}`, function(assert) { + QUnit.test(`Click by cell should change startDate value and reselect endDate if _allowChangeSelectionOrder is true and _currentSelection is startDate, startDate > endDate, initial value: ${JSON.stringify(value)}`, function(assert) { this.reinit({ - values, + value, selectionMode: 'range', _allowChangeSelectionOrder: true, _currentSelection: 'startDate', @@ -2372,12 +2371,12 @@ QUnit.module('Options', { const startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $startDateCell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), [startCellDate, null]); + assert.deepEqual(this.calendar.option('value'), [startCellDate, null]); }); - QUnit.test(`Click by cell should change endDate value and reselect startDate if _allowChangeSelectionOrder is true and _currentSelection is endDate, endDate < startDate, initial value: ${JSON.stringify(values)}`, function(assert) { + QUnit.test(`Click by cell should change endDate value and reselect startDate if _allowChangeSelectionOrder is true and _currentSelection is endDate, endDate < startDate, initial value: ${JSON.stringify(value)}`, function(assert) { this.reinit({ - values, + value, selectionMode: 'range', _allowChangeSelectionOrder: true, _currentSelection: 'endDate', @@ -2387,12 +2386,12 @@ QUnit.module('Options', { const endCellDate = dataUtils.data($endCellDate.get(0), CALENDAR_DATE_VALUE_KEY); $endCellDate.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), endCellDate < values[0] ? [endCellDate, null] : [null, endCellDate]); + assert.deepEqual(this.calendar.option('value'), endCellDate < value[0] ? [endCellDate, null] : [null, endCellDate]); }); - QUnit.test(`Click by cell should change endDate value if _allowChangeSelectionOrder is true and _currentSelection is endDate, initial value: ${JSON.stringify(values)}`, function(assert) { + QUnit.test(`Click by cell should change endDate value if _allowChangeSelectionOrder is true and _currentSelection is endDate, initial value: ${JSON.stringify(value)}`, function(assert) { this.reinit({ - values, + value, selectionMode: 'range', _allowChangeSelectionOrder: true, _currentSelection: 'endDate', @@ -2402,18 +2401,18 @@ QUnit.module('Options', { let endCellDate = dataUtils.data($endDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $endDateCell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), [values[0], endCellDate]); + assert.deepEqual(this.calendar.option('value'), [value[0], endCellDate]); $endDateCell = $(this.calendar.$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(30); endCellDate = dataUtils.data($endDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $endDateCell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), [values[0], endCellDate]); + assert.deepEqual(this.calendar.option('value'), [value[0], endCellDate]); }); - QUnit.test(`Click by cell should change endDate then startDate value if _allowChangeSelectionOrder is true and _currentSelection is endDate then startDate, initial value: ${JSON.stringify(values)}`, function(assert) { + QUnit.test(`Click by cell should change endDate then startDate value if _allowChangeSelectionOrder is true and _currentSelection is endDate then startDate, initial value: ${JSON.stringify(value)}`, function(assert) { this.reinit({ - values, + value, selectionMode: 'range', _allowChangeSelectionOrder: true, _currentSelection: 'endDate', @@ -2423,7 +2422,7 @@ QUnit.module('Options', { const endCellDate = dataUtils.data($endDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $endDateCell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), [values[0], endCellDate]); + assert.deepEqual(this.calendar.option('value'), [value[0], endCellDate]); this.calendar.option('_currentSelection', 'startDate'); @@ -2431,13 +2430,13 @@ QUnit.module('Options', { const startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $startDateCell.trigger('dxclick'); - assert.deepEqual(this.calendar.option('values'), [startCellDate, endCellDate]); + assert.deepEqual(this.calendar.option('value'), [startCellDate, endCellDate]); }); }); QUnit.test('Range should not be displayed on cell hover if only startDate is defined and _allowChangeSelectionOrder is true and _currentSelection is startDate', function(assert) { this.reinit({ - values: ['2023/04/01', null], + value: ['2023/04/01', null], selectionMode: 'range', _allowChangeSelectionOrder: true, _currentSelection: 'startDate', @@ -2461,19 +2460,20 @@ QUnit.module('Options', { { initialSelectionMode: 'single', newSelectionMode: 'range', - optionName: 'values', + optionName: 'value', expectedValue: [null, null], }, { initialSelectionMode: 'range', newSelectionMode: 'multiple', - optionName: 'values', + optionName: 'value', expectedValue: [], }, ].forEach(({ initialSelectionMode, newSelectionMode, optionName, expectedValue }) => { QUnit.test(`Value should be restored after switching from ${initialSelectionMode} to ${newSelectionMode} selectionMode`, function(assert) { + const value = initialSelectionMode === 'single' ? new Date() : this.options.value; this.reinit({ - ...this.options, + value, selectionMode: initialSelectionMode, }); @@ -2483,8 +2483,9 @@ QUnit.module('Options', { }); QUnit.test(`No cells should be selected after switching from ${initialSelectionMode} to ${newSelectionMode} selectionMode`, function(assert) { + const value = initialSelectionMode === 'single' ? new Date() : this.options.value; this.reinit({ - ...this.options, + value, selectionMode: initialSelectionMode, }); @@ -2505,7 +2506,7 @@ QUnit.module('Options', { ['init', 'runtime'].forEach((scenario) => { QUnit.test(`Click on week number should select week (selectionMode=${selectionMode};selectWeekOnClick=true on ${scenario})`, function(assert) { this.reinit({ - values: this.initialValue, + value: this.initialValue, selectionMode, selectWeekOnClick: scenario === 'init', showWeekNumbers: true, @@ -2522,17 +2523,17 @@ QUnit.module('Options', { $weekNumberCell.trigger('dxclick'); - const values = this.calendar.option('values'); - const expectedValuesLength = selectionMode === 'multiple' ? 7 : 2; + const value = this.calendar.option('value'); + const expectedValueLength = selectionMode === 'multiple' ? 7 : 2; - assert.strictEqual(values.length, expectedValuesLength, `${values.length} days are selected`); - assert.deepEqual(values[0], firstDateInRow, 'fisrt selected date is first date in row'); - assert.deepEqual(values[values.length - 1], lastDateInRow, 'last selected date is last date in row'); + assert.strictEqual(value.length, expectedValueLength, `${value.length} days are selected`); + assert.deepEqual(value[0], firstDateInRow, 'fisrt selected date is first date in row'); + assert.deepEqual(value[value.length - 1], lastDateInRow, 'last selected date is last date in row'); }); QUnit.test(`Click on week number should not select week (selectionMode=${selectionMode};selectWeekOnClick=false on ${scenario})`, function(assert) { this.reinit({ - values: this.initialValue, + value: this.initialValue, selectionMode, selectWeekOnClick: scenario !== 'init', showWeekNumbers: true, @@ -2547,9 +2548,9 @@ QUnit.module('Options', { $weekNumberCell.trigger('dxclick'); - const values = this.calendar.option('values'); + const value = this.calendar.option('value'); - assert.deepEqual(values, this.initialValue, 'values are not changed'); + assert.deepEqual(value, this.initialValue, 'values are not changed'); }); }); @@ -2565,10 +2566,10 @@ QUnit.module('Options', { $weekNumberCell.trigger('dxclick'); - const values = this.calendar.option('values'); - const expectedValues = selectionMode === 'range' ? [null, null] : []; + const value = this.calendar.option('value'); + const expectedValue = selectionMode === 'range' ? [null, null] : []; - assert.deepEqual(values, expectedValues, 'no dates are selected'); + assert.deepEqual(value, expectedValue, 'no dates are selected'); }); }); @@ -2584,9 +2585,9 @@ QUnit.module('Options', { $weekNumberCell.trigger('dxclick'); - const values = this.calendar.option('values'); + const value = this.calendar.option('value'); - assert.strictEqual(values.length, 1, 'only one day is selected'); + assert.strictEqual(value.length, 1, 'only one day is selected'); }); QUnit.test('Click on week number should select range from first available date to last available date', function(assert) { @@ -2609,10 +2610,10 @@ QUnit.module('Options', { $weekNumberCell.trigger('dxclick'); - const values = this.calendar.option('values'); + const value = this.calendar.option('value'); - assert.notDeepEqual(values, [firstDateInRow, lastDateInRow], 'disabled dates are not selected as range start/end'); - assert.deepEqual(values, [firstAvailableDateInRow, lastAvailableDateInRow], 'first/last available dates are range start/end'); + assert.notDeepEqual(value, [firstDateInRow, lastDateInRow], 'disabled dates are not selected as range start/end'); + assert.deepEqual(value, [firstAvailableDateInRow, lastAvailableDateInRow], 'first/last available dates are range start/end'); }); [ @@ -2665,7 +2666,7 @@ QUnit.module('Options', { beforeEach: function() { this.options = { focusStateEnabled: true, - values: [new Date('01/15/2023'), new Date('02/05/2023')], + value: [new Date('01/15/2023'), new Date('02/05/2023')], selectionMode: 'range', viewsCount: 2, }; @@ -4710,7 +4711,7 @@ QUnit.module('Aria accessibility', { ['multiple', 'range'].forEach((selectionMode) => { QUnit.test(`aria-selected on selected date cell, selectionMode=${selectionMode}`, function(assert) { const calendar = this.$element.dxCalendar({ - values: [new Date(2015, 5, 1)], + value: [new Date(2015, 5, 1)], selectionMode, focusStateEnabled: true }).dxCalendar('instance'); @@ -4733,8 +4734,7 @@ QUnit.module('Aria accessibility', { QUnit.test('aria-selected should be added to selected date cell afrer view change, selectionMode=${selectionMode}', function(assert) { const calendar = this.$element.dxCalendar({ selectionMode, - value: new Date(2023, 1, 1), - values: [new Date(2023, 1, 1)], + value: selectionMode === 'single' ? new Date(2023, 1, 1) : [new Date(2023, 1, 1)], focusStateEnabled: true }).dxCalendar('instance'); @@ -5165,7 +5165,7 @@ QUnit.module('dxCalendar number and string value support', { if(selectionMode === 'single') { this.instance.option('value', new Date(1993, 2, 19)); } else { - this.instance.option('values', [new Date(1993, 2, 19), new Date(1993, 2, 22)]); + this.instance.option('value', [new Date(1993, 2, 19), new Date(1993, 2, 22)]); } const callCount = this.valueChangedHandler.callCount; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.strategy.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.strategy.tests.js index 9a3a5def74fb..b0ae176a94e0 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.strategy.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.strategy.tests.js @@ -74,12 +74,12 @@ QUnit.module('Strategy', moduleConfig, () => { }); }); - QUnit.test('Calendar should have "values" option equals to dateRangeBox "value"', function(assert) { + QUnit.test('Calendar should have "value" option equals to dateRangeBox "value"', function(assert) { const startDateBox = getStartDateBoxInstance(this.instance); startDateBox.open(); - assert.deepEqual(startDateBox._strategy.widgetOption('values'), this.instance.option('value')); + assert.deepEqual(startDateBox._strategy.widgetOption('value'), this.instance.option('value')); }); QUnit.module('disableOutOfRangeSelection option', { @@ -355,7 +355,7 @@ QUnit.module('Strategy', moduleConfig, () => { keyboard.caret(100).press('backspace').press('enter'); - assert.deepEqual(new Date(this.getCalendar().option('values')[0]), new Date('2023/05/01'), 'value from start date input aplied'); + assert.deepEqual(new Date(this.getCalendar().option('value')[0]), new Date('2023/05/01'), 'value from start date input aplied'); const $endDateInput = $(this.instance.endDateField()); keyboard = keyboardMock($endDateInput); @@ -364,7 +364,7 @@ QUnit.module('Strategy', moduleConfig, () => { keyboard.caret(100).press('backspace').press('enter'); - assert.deepEqual(new Date(this.getCalendar().option('values')[1]), new Date('2023/05/02'), 'value from end date input aplied'); + assert.deepEqual(new Date(this.getCalendar().option('value')[1]), new Date('2023/05/02'), 'value from end date input aplied'); }); QUnit.test(`Enter key should apply value from calendar when input value was not changed (applyValueMode = ${applyValueMode})`, function(assert) { @@ -382,7 +382,7 @@ QUnit.module('Strategy', moduleConfig, () => { keyboard.caret(100).press('arrowleft').press('enter'); - assert.deepEqual(new Date(this.getCalendar().option('values')[0]), new Date('2023/05/10'), 'value from start date input aplied'); + assert.deepEqual(new Date(this.getCalendar().option('value')[0]), new Date('2023/05/10'), 'value from start date input aplied'); const $endDateInput = $(this.instance.endDateField()); keyboard = keyboardMock($endDateInput); @@ -391,7 +391,7 @@ QUnit.module('Strategy', moduleConfig, () => { keyboard.caret(100).press('arrowright').press('enter'); - assert.deepEqual(new Date(this.getCalendar().option('values')[1]), new Date('2023/05/24'), 'value from end date input aplied'); + assert.deepEqual(new Date(this.getCalendar().option('value')[1]), new Date('2023/05/24'), 'value from end date input aplied'); }); [ @@ -427,7 +427,7 @@ QUnit.module('Strategy', moduleConfig, () => { $firstDate.trigger('dxclick'); assert.strictEqual(this.instance.option('opened'), true, 'Popup is opened'); - assert.deepEqual(this.getCalendar().option('values')[firstSelect === 'startDate' ? 0 : 1], firstCellDate, `${firstSelect} is selected correctly`); + assert.deepEqual(this.getCalendar().option('value')[firstSelect === 'startDate' ? 0 : 1], firstCellDate, `${firstSelect} is selected correctly`); $(this.instance.field()[secondSelect === 'startDate' ? 0 : 1]).focusin(); @@ -436,7 +436,7 @@ QUnit.module('Strategy', moduleConfig, () => { $secondDate.trigger('dxclick'); assert.strictEqual(this.instance.option('opened'), applyValueMode === 'useButtons', `Popup is ${applyValueMode === 'useButtons' ? 'opened' : 'closed'}`); - assert.deepEqual(this.getCalendar().option('values')[secondSelect === 'startDate' ? 0 : 1], secondCellDate, `${secondSelect} is selected correctly`); + assert.deepEqual(this.getCalendar().option('value')[secondSelect === 'startDate' ? 0 : 1], secondCellDate, `${secondSelect} is selected correctly`); }); }); }); @@ -661,7 +661,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, const startDateBox = getStartDateBoxInstance(this.instance); - assert.deepEqual(startDateBox._strategy.widgetOption('values'), [null, null]); + assert.deepEqual(startDateBox._strategy.widgetOption('value'), [null, null]); }); [ @@ -682,7 +682,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), initialValue, 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), initialValue[0], 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), initialValue, 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), initialValue, 'calendar value is correct'); const $startDateCell = $(this.getCalendar().$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(20); const startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); @@ -691,7 +691,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), [startCellDate, initialValue[1]], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), startCellDate, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, initialValue[1]], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, initialValue[1]], 'calendar value is correct'); const $endDateCell = $(this.getCalendar().$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(140); const endCellDate = dataUtils.data($endDateCell.get(0), CALENDAR_DATE_VALUE_KEY); @@ -700,7 +700,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), [startCellDate, endCellDate], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), startCellDate, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), endCellDate, 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, endCellDate], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, endCellDate], 'calendar value is correct'); }); QUnit.test(`onValueChanged should be called once with correct event argument on select start date and end date in calendar, initialValue: ${JSON.stringify(initialValue)}`, function(assert) { @@ -748,7 +748,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), [startCellDate, initialValue[1]], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), startCellDate, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, initialValue[1]], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, initialValue[1]], 'calendar value is correct'); const $endDateCell = $(this.getCalendar().$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(140); const endCellDate = dataUtils.data($endDateCell.get(0), CALENDAR_DATE_VALUE_KEY); @@ -757,7 +757,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), [startCellDate, endCellDate], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), startCellDate, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), endCellDate, 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, endCellDate], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, endCellDate], 'calendar value is correct'); assert.deepEqual(this.instance.option('opened'), false, 'dateRangeBox is closed'); }); @@ -782,7 +782,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), [initialValue[0], endCellDate], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), initialValue[0], 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), endCellDate, 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [initialValue[0], endCellDate], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [initialValue[0], endCellDate], 'calendar value is correct'); assert.deepEqual(this.instance.option('opened'), true, 'dateRangeBox is not closed'); }); @@ -817,7 +817,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), [null, null], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), null, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), null, 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [null, null], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [null, null], 'calendar value is correct'); const $startDateCell = $(this.getCalendar().$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(20); const startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); @@ -830,7 +830,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="instantly"', moduleConfig, assert.deepEqual(this.instance.option('value'), [startCellDate, endCellDate], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), startCellDate, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), endCellDate, 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, endCellDate], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, endCellDate], 'calendar value is correct'); }); }); @@ -1002,7 +1002,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), initialValue, 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), initialValue[0], 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), initialValue, 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), initialValue, 'calendar value is correct'); const $startDateCell = $(this.getCalendar().$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(20); const startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); @@ -1011,7 +1011,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), initialValue, 'dateRangeBox value is not changed'); assert.deepEqual(this.startDateBox.option('value'), initialValue[0], 'startDateBox value is not changed'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is not changed'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, initialValue[1]], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, initialValue[1]], 'calendar value is correct'); const $endDateCell = $(this.getCalendar().$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(140); const endCellDate = dataUtils.data($endDateCell.get(0), CALENDAR_DATE_VALUE_KEY); @@ -1020,7 +1020,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), initialValue, 'dateRangeBox value is not changed'); assert.deepEqual(this.startDateBox.option('value'), initialValue[0], 'startDateBox value is not changed'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is not changed'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, endCellDate], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, endCellDate], 'calendar value is correct'); const $okButton = $(this.instance.getStartDateBox().content()).parent().find(`.${POPUP_DONE_BUTTON}`); $okButton.trigger('dxclick'); @@ -1028,7 +1028,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), [startCellDate, endCellDate], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), startCellDate, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), endCellDate, 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, endCellDate], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, endCellDate], 'calendar value is correct'); }); QUnit.test(`StartDateBox & EndDateBox should not change value after select start date and end date in calendar and click cancel button, initialValue: ${JSON.stringify(initialValue)}`, function(assert) { @@ -1043,7 +1043,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), initialValue, 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), initialValue[0], 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is correct'); - assert.deepEqual(this.getCalendar().option('values'), initialValue, 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), initialValue, 'calendar value is correct'); const $startDateCell = $(this.getCalendar().$element()).find(`.${CALENDAR_CELL_CLASS}`).eq(20); const startCellDate = dataUtils.data($startDateCell.get(0), CALENDAR_DATE_VALUE_KEY); @@ -1053,7 +1053,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig const endCellDate = dataUtils.data($endDateCell.get(0), CALENDAR_DATE_VALUE_KEY); $endDateCell.trigger('dxclick'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, endCellDate], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, endCellDate], 'calendar value is correct'); const $cancelButton = $(this.instance.getStartDateBox().content()).parent().find(`.${POPUP_CANCEL_BUTTON}`); $cancelButton.trigger('dxclick'); @@ -1061,7 +1061,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), initialValue, 'dateRangeBox value is not changed'); assert.deepEqual(this.startDateBox.option('value'), initialValue[0], 'startDateBox value is not changed'); assert.deepEqual(this.endDateBox.option('value'), initialValue[1], 'endDateBox value is not changed'); - assert.deepEqual(this.getCalendar().option('values'), initialValue, 'calendar is not changed'); + assert.deepEqual(this.getCalendar().option('value'), initialValue, 'calendar is not changed'); }); QUnit.test(`onValueChanged should not be called on select start date and end date in calendar, initialValue: ${JSON.stringify(initialValue)}`, function(assert) { @@ -1144,7 +1144,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), [null, null], 'dateRangeBox value is not changed'); assert.deepEqual(this.startDateBox.option('value'), null, 'startDateBox value is not changed'); assert.deepEqual(this.endDateBox.option('value'), null, 'endDateBox value is not changed'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, null], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, null], 'calendar value is correct'); const $okButton = $(this.instance.getStartDateBox().content()).parent().find(`.${POPUP_DONE_BUTTON}`); $okButton.trigger('dxclick'); @@ -1152,7 +1152,7 @@ QUnit.module('RangeCalendar strategy: applyValueMode="useButtons"', moduleConfig assert.deepEqual(this.instance.option('value'), [startCellDate, null], 'dateRangeBox value is correct'); assert.deepEqual(this.startDateBox.option('value'), startCellDate, 'startDateBox value is correct'); assert.deepEqual(this.endDateBox.option('value'), null, 'endDateBox value is not changed'); - assert.deepEqual(this.getCalendar().option('values'), [startCellDate, null], 'calendar value is correct'); + assert.deepEqual(this.getCalendar().option('value'), [startCellDate, null], 'calendar value is correct'); }); ['ok', 'cancel'].forEach((button) => {