Calendar: delete 'values' option and use 'value' for all selection mo…

…des (#25520)

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,33 +267,39 @@ 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);
                 event.target = cellElement;
             }
             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();

packages/devextreme/js/ui/calendar/ui.calendar.multiple.selection.strategy.js

@@ -8,43 +8,43 @@ 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,
         };
     }
 
     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 }) {

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

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)) || [];
 

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

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]);
 

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