feat: support partial i18n for date time picker (#10125)

sissbruecker · web-flow · commit f54fe98acdae · 2025-09-05T11:34:34.000+03:00
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker-mixin.d.ts b/packages/date-time-picker/src/vaadin-date-time-picker-mixin.d.ts
@@ -6,6 +6,7 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
 import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
@@ -19,15 +20,15 @@ export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {
    * If both properties are defined, then accessibleName takes precedence.
    * Then, the dateLabel value is concatenated with it.
    */
-  dateLabel: string | null | undefined;
+  dateLabel?: string;
 
   /**
    * Accessible label to the time picker.
    * The property works in conjunction with label and accessibleName defined on the field.
    * If both properties are defined, then accessibleName takes precedence.
    * Then, the dateLabel value is concatenated with it.
    */
-  timeLabel: string | null | undefined;
+  timeLabel?: string;
 }
 
 /**
@@ -39,6 +40,7 @@ export declare function DateTimePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<DisabledMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
+  Constructor<I18nMixinClass<DateTimePickerI18n>> &
   Constructor<LabelMixinClass> &
   Constructor<ValidateMixinClass> &
   T;
@@ -142,13 +144,31 @@ export declare class DateTimePickerMixinClass {
   autofocus: boolean;
 
   /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * `i18n` object or just the properties you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
-   * The object is a combination of the i18n properties supported by
+   * The object has the following structure and default values:
+   *
+   * ```
+   * {
+   *   // Accessible label to the date picker.
+   *   // The property works in conjunction with label and accessibleName defined on the field.
+   *   // If both properties are defined, then accessibleName takes precedence.
+   *   // Then, the dateLabel value is concatenated with it.
+   *   dateLabel: undefined;
+   *
+   *   // Accessible label to the time picker.
+   *   // The property works in conjunction with label and accessibleName defined on the field.
+   *   // If both properties are defined, then accessibleName takes precedence.
+   *   // Then, the dateLabel value is concatenated with it.
+   *   timeLabel: undefined;
+   * }
+   * ```
+   *
+   * Additionally, all i18n properties from
    * [`<vaadin-date-picker>`](#/elements/vaadin-date-picker) and
-   * [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
+   * [`<vaadin-time-picker>`](#/elements/vaadin-time-picker) are supported.
    */
   i18n: DateTimePickerI18n;
 }
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker-mixin.js b/packages/date-time-picker/src/vaadin-date-time-picker-mixin.js
@@ -5,6 +5,7 @@
  */
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import {
@@ -21,6 +22,8 @@ import { timePickerI18nDefaults } from '@vaadin/time-picker/src/vaadin-time-pick
 const datePickerI18nProps = Object.keys(datePickerI18nDefaults);
 const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
 
+const DEFAULT_I18N = { ...datePickerI18nDefaults, ...timePickerI18nDefaults };
+
 /**
  * A controller to initialize slotted picker.
  *
@@ -46,7 +49,7 @@ class PickerSlotController extends SlotController {
  * @mixes FocusMixin
  */
 export const DateTimePickerMixin = (superClass) =>
-  class DateTimePickerMixinClass extends FieldMixin(FocusMixin(DisabledMixin(superClass))) {
+  class DateTimePickerMixinClass extends I18nMixin(DEFAULT_I18N, FieldMixin(FocusMixin(DisabledMixin(superClass)))) {
     static get properties() {
       return {
         /**
@@ -224,22 +227,6 @@ export const DateTimePickerMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * The object used to localize this component.
-         * To change the default localization, replace the entire
-         * `i18n` object or just the properties you want to modify.
-         *
-         * The object is a combination of the i18n properties supported by
-         * [`<vaadin-date-picker>`](#/elements/vaadin-date-picker) and
-         * [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
-         * @type {!DateTimePickerI18n}
-         */
-        i18n: {
-          type: Object,
-          sync: true,
-          value: () => ({ ...datePickerI18nDefaults, ...timePickerI18nDefaults }),
-        },
-
         /**
          * The current slotted date picker.
          * @private
@@ -274,11 +261,11 @@ export const DateTimePickerMixin = (superClass) =>
         '__invalidChanged(invalid, __datePicker, __timePicker)',
         '__disabledChanged(disabled, __datePicker, __timePicker)',
         '__readonlyChanged(readonly, __datePicker, __timePicker)',
-        '__i18nChanged(i18n, __datePicker, __timePicker)',
+        '__i18nChanged(__effectiveI18n, __datePicker, __timePicker)',
         '__autoOpenDisabledChanged(autoOpenDisabled, __datePicker, __timePicker)',
         '__themeChanged(_theme, __datePicker, __timePicker)',
         '__pickersChanged(__datePicker, __timePicker)',
-        '__labelOrAccessibleNameChanged(label, accessibleName, i18n, __datePicker, __timePicker)',
+        '__labelOrAccessibleNameChanged(label, accessibleName, __effectiveI18n, __datePicker, __timePicker)',
       ];
     }
 
@@ -297,6 +284,43 @@ export const DateTimePickerMixin = (superClass) =>
       this.__openedChangedEventHandler = this.__openedChangedEventHandler.bind(this);
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following structure and default values:
+     *
+     * ```
+     * {
+     *   // Accessible label to the date picker.
+     *   // The property works in conjunction with label and accessibleName defined on the field.
+     *   // If both properties are defined, then accessibleName takes precedence.
+     *   // Then, the dateLabel value is concatenated with it.
+     *   dateLabel: undefined;
+     *
+     *   // Accessible label to the time picker.
+     *   // The property works in conjunction with label and accessibleName defined on the field.
+     *   // If both properties are defined, then accessibleName takes precedence.
+     *   // Then, the dateLabel value is concatenated with it.
+     *   timeLabel: undefined;
+     * }
+     * ```
+     *
+     * Additionally, all i18n properties from
+     * [`<vaadin-date-picker>`](#/elements/vaadin-date-picker) and
+     * [`<vaadin-time-picker>`](#/elements/vaadin-time-picker) are supported.
+     *
+     * @type {!DateTimePickerI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @private */
     get __pickers() {
       return [this.__datePicker, this.__timePicker];
@@ -448,15 +472,15 @@ export const DateTimePickerMixin = (superClass) =>
     }
 
     /** @private */
-    __syncI18n(target, source, props = Object.keys(source.i18n)) {
-      const i18n = { ...target.i18n };
+    __syncI18n(target, i18n, props) {
+      const targetI18n = {};
       props.forEach((prop) => {
         // eslint-disable-next-line no-prototype-builtins
-        if (source.i18n && source.i18n.hasOwnProperty(prop)) {
-          i18n[prop] = source.i18n[prop];
+        if (i18n && i18n.hasOwnProperty(prop)) {
+          targetI18n[prop] = i18n[prop];
         }
       });
-      target.i18n = i18n;
+      target.i18n = targetI18n;
     }
 
     /** @private */
@@ -528,7 +552,6 @@ export const DateTimePickerMixin = (superClass) =>
         this.datePlaceholder = newDatePicker.placeholder;
         this.initialPosition = newDatePicker.initialPosition;
         this.showWeekNumbers = newDatePicker.showWeekNumbers;
-        this.__syncI18n(this, newDatePicker, datePickerI18nProps);
       }
 
       // Min and max are always synchronized from date time picker (host) to inner fields because time picker
@@ -557,7 +580,6 @@ export const DateTimePickerMixin = (superClass) =>
         // Synchronize properties from slotted time picker
         this.timePlaceholder = newTimePicker.placeholder;
         this.step = newTimePicker.step;
-        this.__syncI18n(this, newTimePicker, timePickerI18nProps);
       }
 
       // Min and max are always synchronized from parent to slotted because time picker min and max
@@ -589,26 +611,27 @@ export const DateTimePickerMixin = (superClass) =>
     }
 
     /** @private */
-    __i18nChanged(_i18n, datePicker, timePicker) {
-      if (datePicker) {
-        this.__syncI18n(datePicker, this, datePickerI18nProps);
+    __i18nChanged(effectiveI18n, datePicker, timePicker) {
+      // Only propagate i18n to default pickers
+      if (datePicker && this.__isDefaultPicker(datePicker, 'date')) {
+        this.__syncI18n(datePicker, effectiveI18n, datePickerI18nProps);
       }
 
-      if (timePicker) {
-        this.__syncI18n(timePicker, this, timePickerI18nProps);
+      if (timePicker && this.__isDefaultPicker(timePicker, 'time')) {
+        this.__syncI18n(timePicker, effectiveI18n, timePickerI18nProps);
       }
     }
 
     /** @private */
-    __labelOrAccessibleNameChanged(label, accessibleName, i18n, datePicker, timePicker) {
+    __labelOrAccessibleNameChanged(label, accessibleName, effectiveI18n, datePicker, timePicker) {
       const name = accessibleName || label || '';
 
       if (datePicker) {
-        datePicker.accessibleName = `${name} ${i18n.dateLabel || ''}`.trim();
+        datePicker.accessibleName = `${name} ${effectiveI18n.dateLabel || ''}`.trim();
       }
 
       if (timePicker) {
-        timePicker.accessibleName = `${name} ${i18n.timeLabel || ''}`.trim();
+        timePicker.accessibleName = `${name} ${effectiveI18n.timeLabel || ''}`.trim();
       }
     }
 
diff --git a/packages/date-time-picker/test/i18n.test.js b/packages/date-time-picker/test/i18n.test.js
@@ -1,57 +1,74 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import '../src/vaadin-date-time-picker.js';
 
-['default', 'slotted'].forEach((set) => {
-  describe(`i18n property (${set})`, () => {
-    let dateTimePicker, datePicker;
+describe('i18n property', () => {
+  let dateTimePicker, datePicker, timePicker;
 
-    const CUSTOM_I18N = { cancel: 'Peruuta' };
+  beforeEach(async () => {
+    dateTimePicker = fixtureSync(`<vaadin-date-time-picker></vaadin-date-time-picker>`);
+    await nextRender();
+    datePicker = dateTimePicker.querySelector('[slot="date-picker"]');
+    timePicker = dateTimePicker.querySelector('[slot="time-picker"]');
+  });
 
-    beforeEach(async () => {
-      const i18nProp = JSON.stringify(CUSTOM_I18N);
-
-      if (set === 'default') {
-        dateTimePicker = fixtureSync(`<vaadin-date-time-picker i18n='${i18nProp}'></vaadin-date-time-picker>`);
-      } else {
-        dateTimePicker = fixtureSync(`
-          <vaadin-date-time-picker>
-            <vaadin-date-picker slot="date-picker" i18n='${i18nProp}'></vaadin-date-picker>
-            <vaadin-time-picker slot="time-picker"></vaadin-time-picker>
-          </vaadin-date-time-picker>
-        `);
-      }
-      await nextRender();
-      datePicker = dateTimePicker.querySelector('[slot="date-picker"]');
-    });
+  it('should have default i18n properties coming from date and time pickers', () => {
+    // From date picker
+    expect(dateTimePicker.i18n).to.have.property('formatDate').that.is.a('function');
+    expect(dateTimePicker.i18n).to.have.property('parseDate').that.is.a('function');
+    expect(dateTimePicker.i18n).to.have.property('cancel').that.is.a('string');
+    // From time picker
+    expect(dateTimePicker.i18n).to.have.property('formatTime').that.is.a('function');
+    expect(dateTimePicker.i18n).to.have.property('parseTime').that.is.a('function');
+  });
 
-    it('should have initial value for i18n', () => {
-      expect(dateTimePicker.i18n).to.have.property('cancel', CUSTOM_I18N.cancel);
-      expect(datePicker.i18n).to.have.property('cancel', CUSTOM_I18N.cancel);
-    });
+  it('should propagate relevant properties to sub-components', () => {
+    dateTimePicker.i18n = { cancel: 'Peruuta' };
+
+    expect(datePicker.i18n).to.have.property('cancel', 'Peruuta');
+    expect(timePicker.i18n).to.not.have.property('cancel');
+
+    const parseTime = () => {};
+    dateTimePicker.i18n = { parseTime };
+
+    expect(timePicker.i18n).to.have.property('parseTime', parseTime);
+    expect(datePicker.i18n).to.not.have.property('parseTime');
+  });
+
+  it('should fall back to default values', () => {
+    dateTimePicker.i18n = {};
+
+    expect(datePicker.i18n.cancel).to.equal('Cancel');
+    expect(timePicker.i18n).to.have.property('formatTime').that.is.a('function');
   });
-});
 
-describe('setting i18n on a slotted picker before connected to the DOM', () => {
-  let dateTimePicker, datePicker;
+  it('should initialize property from JSON string', () => {
+    const i18nJson = JSON.stringify({ cancel: 'Peruuta' });
+    dateTimePicker = fixtureSync(`<vaadin-date-time-picker i18n='${i18nJson}'></vaadin-date-time-picker>`);
+    datePicker = dateTimePicker.querySelector('[slot="date-picker"]');
 
-  beforeEach(() => {
-    dateTimePicker = document.createElement('vaadin-date-time-picker');
+    expect(dateTimePicker.i18n).to.have.property('cancel', 'Peruuta');
+    expect(datePicker.i18n).to.have.property('cancel', 'Peruuta');
   });
 
-  describe('date-picker', () => {
+  describe('slotted date and time pickers', () => {
     beforeEach(() => {
-      datePicker = document.createElement('vaadin-date-picker');
-      datePicker.slot = 'date-picker';
-      datePicker.i18n = { ...datePicker.i18n, cancel: 'Peruuta' };
-      dateTimePicker.appendChild(datePicker);
+      dateTimePicker = fixtureSync(`
+        <vaadin-date-time-picker>
+          <vaadin-date-picker slot="date-picker"></vaadin-date-picker>
+          <vaadin-time-picker slot="time-picker"></vaadin-time-picker>
+        </vaadin-date-time-picker>
+      `);
+      datePicker = dateTimePicker.querySelector('[slot="date-picker"]');
+      timePicker = dateTimePicker.querySelector('[slot="time-picker"]');
     });
 
-    it('should not have i18n overridden', async () => {
-      await aTimeout(0);
-      document.body.appendChild(dateTimePicker);
-      await nextRender();
-      expect(datePicker.i18n.cancel).to.equal('Peruuta');
+    it('should not override i18n of slotted date and time pickers', () => {
+      const i18n = { cancel: 'Peruuta', formatDate: () => 'formatted-date' };
+      dateTimePicker.i18n = i18n;
+
+      expect(datePicker.i18n.cancel).to.not.equal(i18n.cancel);
+      expect(datePicker.i18n.formatDate).to.not.equal(i18n.formatDate);
     });
   });
 });
diff --git a/packages/date-time-picker/test/properties.test.js b/packages/date-time-picker/test/properties.test.js
@@ -244,21 +244,6 @@ function getTimePicker(dateTimePicker) {
       expect(datePicker.autoOpenDisabled).to.be.true;
       expect(timePicker.autoOpenDisabled).to.be.true;
     });
-
-    it('should have default i18n properties coming from date and time pickers', () => {
-      // From date picker
-      expect(dateTimePicker.i18n).to.have.property('formatDate').that.is.a('function');
-      expect(dateTimePicker.i18n).to.have.property('parseDate').that.is.a('function');
-      expect(dateTimePicker.i18n).to.have.property('cancel').that.is.a('string');
-      // From time picker
-      expect(dateTimePicker.i18n).to.have.property('formatTime').that.is.a('function');
-      expect(dateTimePicker.i18n).to.have.property('parseTime').that.is.a('function');
-    });
-
-    it('should propagate i18n properties to the date picker', () => {
-      dateTimePicker.i18n = { ...dateTimePicker.i18n, cancel: 'Peruuta' };
-      expect(datePicker.i18n.cancel).to.equal('Peruuta');
-    });
   });
 
   describe(`Initial property values (${set})`, () => {
diff --git a/packages/date-time-picker/test/typings/date-time-picker.types.ts b/packages/date-time-picker/test/typings/date-time-picker.types.ts
