DateBox: fix today button text customization with todayButtonText option (DevExpress#30255)

Author: aleksei-semikozov

packages/devextreme/js/__internal/ui/calendar/m_calendar.ts

@@ -81,6 +81,8 @@ export interface CalendarProperties extends Properties {
   viewsCount: number;
 
   currentDate?: Date;
+
+  todayButtonText?: string;
 }
 
 class Calendar<
@@ -146,6 +148,7 @@ class Calendar<
       selectionMode: 'single',
       selectWeekOnClick: true,
       showTodayButton: false,
+      todayButtonText: messageLocalization.format('dxCalendar-todayButtonText'),
       showWeekNumbers: false,
       weekNumberRule: 'auto',
       cellTemplate: 'cell',
@@ -1197,15 +1200,15 @@ class Calendar<
   }
 
   _renderFooter() {
-    const showTodayButton = this.option('showTodayButton');
+    const { showTodayButton, todayButtonText: text } = this.option();
 
     if (showTodayButton) {
       const $todayButton = this._createComponent(
         $('<div>'),
         Button,
         {
           focusStateEnabled: this.option('focusStateEnabled'),
-          text: messageLocalization.format('dxCalendar-todayButtonText'),
+          text,
           onClick: (args) => {
             this._toTodayView(args);
           },
@@ -1224,7 +1227,7 @@ class Calendar<
 
       this.$element().append(this._$footer);
     }
-    // @ts-expect-error ts-error
+
     this.$element().toggleClass(CALENDAR_HAS_FOOTER_CLASS, showTodayButton);
   }
 
@@ -1633,6 +1636,7 @@ class Calendar<
       case 'dateSerializationFormat':
       case 'cellTemplate':
       case 'showTodayButton':
+      case 'todayButtonText':
         this._invalidate();
         break;
       case 'readOnly':

packages/devextreme/js/__internal/ui/date_box/m_date_box.base.ts

@@ -600,9 +600,8 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
 
   _isValueChanged(newValue): boolean {
     const oldValue = this.dateOption('value');
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+
     const oldTime = oldValue && oldValue.getTime();
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const newTime = newValue && newValue.getTime();
 
     return oldTime !== newTime;
@@ -718,6 +717,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
       case 'interval':
       case 'disabledDates':
       case 'calendarOptions':
+      case 'todayButtonText':
         this._invalidate();
         break;
       case 'displayFormat':
@@ -745,9 +745,6 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
         super._optionChanged.apply(this, arguments);
         this._formatValidationIcon();
         break;
-      case 'todayButtonText':
-        this._setPopupOption('toolbarItems', this._getPopupToolbarItems());
-        break;
       case 'invalidDateMessage':
       case 'dateOutOfRangeMessage':
       case 'adaptivityEnabled':

packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts

@@ -23,7 +23,7 @@ class CalendarStrategy extends DateBoxStrategy {
   getDefaultOptions() {
     return {
       ...super.getDefaultOptions(),
-      todayButtonText: messageLocalization.format('dxCalendar-todayButtonText'),
+      todayButtonText: this.dateBox.option('todayButtonText') ?? messageLocalization.format('dxCalendar-todayButtonText'),
     };
   }
 
@@ -99,19 +99,22 @@ class CalendarStrategy extends DateBoxStrategy {
   }
 
   _getWidgetOptions() {
-    const disabledDates = this.dateBox.option('disabledDates');
+    const {
+      disabledDates, min, max, todayButtonText,
+    } = this.dateBox.option();
 
     return extend(this.dateBox.option('calendarOptions'), {
       value: this.dateBoxValue() || null,
       selectionMode: 'single',
       dateSerializationFormat: null,
-      min: this.dateBox.dateOption('min'),
-      max: this.dateBox.dateOption('max'),
+      min,
+      max,
       onValueChanged: this._valueChangedHandler.bind(this),
       onCellClick: this._cellClickHandler.bind(this),
       disabledDates: isFunction(disabledDates) ? this._injectComponent(disabledDates.bind(this.dateBox)) : disabledDates,
       onContouredChanged: this._refreshActiveDescendant.bind(this),
       skipFocusCheck: true,
+      todayButtonText,
     });
   }
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/calendar.tests.js

@@ -1857,6 +1857,30 @@ QUnit.module('Options', {
         assert.strictEqual($todayButton, undefined, 'todayButton is not rendered after showTodayButton runtime change to false');
     });
 
+    QUnit.test('todayButtonText option initialize', function(assert) {
+        const getTodayButton = () => this.$element.find(toSelector(CALENDAR_TODAY_BUTTON_CLASS)).get(0);
+
+        this.reinit({
+            showTodayButton: true,
+            todayButtonText: 'Custom text',
+        });
+
+        const $todayButton = getTodayButton();
+        assert.strictEqual($($todayButton).text(), 'Custom text', 'todayButton text matches the todayButtonText option');
+    });
+
+    QUnit.test('todayButtonText option', function(assert) {
+        const getTodayButton = () => this.$element.find(toSelector(CALENDAR_TODAY_BUTTON_CLASS)).get(0);
+
+        this.calendar.option({
+            showTodayButton: true,
+            todayButtonText: 'Custom text',
+        });
+
+        const $todayButton = getTodayButton();
+        assert.strictEqual($($todayButton).text(), 'Custom text', 'todayButton text matches the todayButtonText option');
+    });
+
     QUnit.test('onCellClick option runtime change', function(assert) {
         const getCellElement = () => this.$element.find(toSelector(CALENDAR_CELL_CLASS)).eq(4);
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js

@@ -6356,6 +6356,20 @@ QUnit.module('valueChanged handler should receive correct event', {
         this.checkEvent(assert, 'dxclick', $todayButton);
         this.testProgramChange(assert);
     });
+
+    QUnit.test('should display custom text on today button from todayButtonText option', function(assert) {
+        this.instance.option({ calendarOptions: { showTodayButton: true }, todayButtonText: 'today button text' });
+        const $todayButton = $(this.instance.content()).parent().find(`.${CALENDAR_TODAY_BUTTON_CLASS}`);
+
+        assert.equal($todayButton.text().trim(), 'today button text');
+    });
+
+    QUnit.test('should display custom text on today button from todayButtonText option initialize', function(assert) {
+        this.reinit({ calendarOptions: { showTodayButton: true }, todayButtonText: 'today button text' });
+        const $todayButton = $(this.instance.content()).parent().find(`.${CALENDAR_TODAY_BUTTON_CLASS}`);
+
+        assert.equal($todayButton.text().trim(), 'today button text');
+    });
 });
 
 QUnit.module('validation', {