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

Author: aleksei-semikozov

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

@@ -85,6 +85,8 @@ const Calendar = Editor.inherit({
 
       currentDate: new Date(),
 
+      todayButtonText: messageLocalization.format('dxCalendar-todayButtonText'),
+
       value: null,
 
       dateSerializationFormat: undefined,
@@ -1123,15 +1125,15 @@ const Calendar = Editor.inherit({
   },
 
   _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);
           },
@@ -1546,6 +1548,7 @@ const Calendar = Editor.inherit({
       case 'dateSerializationFormat':
       case 'cellTemplate':
       case 'showTodayButton':
+      case 'todayButtonText':
         this._invalidate();
         break;
       case 'skipFocusCheck':

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

@@ -685,6 +685,7 @@ const DateBox = DropDownEditor.inherit({
       case 'interval':
       case 'disabledDates':
       case 'calendarOptions':
+      case 'todayButtonText':
         this._invalidate();
         break;
       case 'displayFormat':
@@ -707,9 +708,6 @@ const DateBox = DropDownEditor.inherit({
         this.callBase.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

@@ -17,7 +17,7 @@ const CalendarStrategy = DateBoxStrategy.inherit({
 
   getDefaultOptions() {
     return extend(this.callBase(), {
-      todayButtonText: messageLocalization.format('dxCalendar-todayButtonText'),
+      todayButtonText: this.dateBox.option('todayButtonText') ?? messageLocalization.format('dxCalendar-todayButtonText'),
     });
   },
 
@@ -90,19 +90,22 @@ const CalendarStrategy = DateBoxStrategy.inherit({
   },
 
   _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

@@ -6376,6 +6376,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', {