fix(date-inputs): Remove alwaysLeadingZero prop. Update tests.

Author: skrustev

src/components/date-picker/date-picker.spec.ts

@@ -55,7 +55,7 @@ describe('Date picker', () => {
 
   beforeEach(async () => {
     picker = await fixture<IgcDatePickerComponent>(
-      html`<igc-date-picker always-leading-zero></igc-date-picker>`
+      html`<igc-date-picker></igc-date-picker>`
     );
     dateTimeInput = picker.renderRoot.querySelector(
       IgcDateTimeInputComponent.tagName
@@ -581,20 +581,26 @@ describe('Date picker', () => {
       it('should use the value of locale format for displayFormat, if it is not defined', async () => {
         expect(picker.locale).to.equal('en-US');
         expect(picker.getAttribute('display-format')).to.be.null;
-        expect(picker.displayFormat).to.equal(picker.inputFormat);
+        expect(picker.displayFormat).to.equal('M/d/yyyy');
 
         // updates inputFormat according to changed locale
         picker.locale = 'fr';
         await elementUpdated(picker);
         expect(picker.inputFormat).to.equal('dd/MM/yyyy');
-        expect(picker.displayFormat).to.equal(picker.inputFormat);
+        expect(picker.displayFormat).to.equal('dd/MM/yyyy');
 
         // sets inputFormat as attribute
         picker.setAttribute('input-format', 'dd-MM-yyyy');
         await elementUpdated(picker);
 
         expect(picker.inputFormat).to.equal('dd-MM-yyyy');
         expect(picker.displayFormat).to.equal(picker.inputFormat);
+
+        // changing locale after setting input format shouldn't affect it
+        picker.locale = 'de';
+        await elementUpdated(picker);
+        expect(picker.inputFormat).to.equal('dd-MM-yyyy');
+        expect(picker.displayFormat).to.equal(picker.inputFormat);
       });
     });
 

src/components/date-picker/date-picker.ts

@@ -420,14 +420,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })
   public showWeekNumbers = false;
 
-  /**
-   * Sets to always show leading zero regardless of the displayFormat applied or one based on locale.
-   * Leading zero is applied during edit for the inputFormat always, regardless of this option.
-   * @attr
-   */
-  @property({ type: Boolean, attribute: 'always-leading-zero' })
-  public alwaysLeadingZero = false;
-
   /**
    * Format to display the value in when not editing.
    * Defaults to the locale format if not set.
@@ -862,7 +854,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
         label=${bindIf(this._isMaterial, this.label)}
         input-format=${ifDefined(this._inputFormat)}
         display-format=${ifDefined(format)}
-        ?always-leading-zero=${this.alwaysLeadingZero}
         ?disabled=${this.disabled}
         ?readonly=${readOnly}
         ?required=${this.required}

src/components/date-range-picker/date-range-picker-single.spec.ts

@@ -42,7 +42,7 @@ describe('Date range picker - single input', () => {
 
   beforeEach(async () => {
     picker = await fixture<IgcDateRangePickerComponent>(
-      html`<igc-date-range-picker always-leading-zero></igc-date-range-picker>`
+      html`<igc-date-range-picker></igc-date-range-picker>`
     );
     input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;
 
@@ -205,21 +205,21 @@ describe('Date range picker - single input', () => {
     });
 
     it('should update the masked value with the locale', async () => {
-      expect(picker.displayFormat).to.equal(picker.inputFormat);
+      expect(picker.displayFormat).to.equal('M/d/yyyy');
 
       picker.value = {
         start: CalendarDay.from(new Date(2025, 3, 9)).native,
         end: CalendarDay.from(new Date(2025, 3, 10)).native,
       };
       await elementUpdated(picker);
       const input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;
-      expect(input.value).to.equal('04/09/2025 - 04/10/2025');
+      expect(input.value).to.equal('4/9/2025 - 4/10/2025');
 
       picker.locale = 'bg';
       await elementUpdated(picker);
 
       expect(input.value.normalize('NFKC')).to.equal(
-        '09.04.2025 г. - 10.04.2025 г.'
+        '9.04.2025 г. - 10.04.2025 г.'
       );
     });
     it('should set the default placeholder of the single input to the input format (like dd/MM/yyyy - dd/MM/yyyy)', async () => {
@@ -238,7 +238,7 @@ describe('Date range picker - single input', () => {
     it('should set the mask of the single input per the display format (like dd/MM/yyyy - dd/MM/yyyy)', async () => {
       picker.useTwoInputs = false;
       await elementUpdated(picker);
-      expect(picker.displayFormat).to.equal(picker.inputFormat);
+      expect(picker.displayFormat).to.equal('M/d/yyyy');
 
       picker.value = {
         start: CalendarDay.from(new Date(2025, 3, 9)).native,
@@ -247,7 +247,7 @@ describe('Date range picker - single input', () => {
       await elementUpdated(picker);
 
       const input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;
-      expect(input.value).to.equal('04/09/2025 - 04/10/2025');
+      expect(input.value).to.equal('4/9/2025 - 4/10/2025');
 
       picker.displayFormat = 'yyyy-MM-dd';
       await elementUpdated(picker);
@@ -264,7 +264,7 @@ describe('Date range picker - single input', () => {
       };
       await elementUpdated(picker);
 
-      expect(input.value).to.equal('04/09/2025 - 04/10/2025');
+      expect(input.value).to.equal('4/9/2025 - 4/10/2025');
 
       picker.clear();
       await elementUpdated(picker);
@@ -288,7 +288,7 @@ describe('Date range picker - single input', () => {
         start,
         end,
       });
-      expect(input.value).to.equal('04/09/2025 - 04/10/2025');
+      expect(input.value).to.equal('4/9/2025 - 4/10/2025');
       expect(eventSpy).not.called;
     });
   });

src/components/date-range-picker/date-range-picker.ts

@@ -458,14 +458,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   @property()
   public prompt = '_';
 
-  /**
-   * Sets to always show leading zero regardless of the displayFormat applied or one based on locale.
-   * Leading zero is applied during edit for the inputFormat always, regardless of this option.
-   * @attr
-   */
-  @property({ type: Boolean, attribute: 'always-leading-zero' })
-  public alwaysLeadingZero = false;
-
   /**
    * Format to display the value in when not editing.
    * Defaults to the locale format if not set.
@@ -686,17 +678,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   protected _updateDefaultMask(): void {
     this._defaultMask = DateTimeUtil.getDefaultInputMask(this.locale);
     this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(
-      this.locale,
-      this.alwaysLeadingZero
-    );
-    this._updateMaskedRangeValue();
-  }
-
-  @watch('alwaysLeadingZero')
-  protected _setAlwaysLeadingZero(): void {
-    this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(
-      this.locale,
-      this.alwaysLeadingZero
+      this.locale
     );
     this._updateMaskedRangeValue();
   }
@@ -914,18 +896,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     const { start, end } = this.value;
     const displayFormat = predefinedToDateDisplayFormat(this.displayFormat);
 
-    const startValue = formatDisplayDate(
-      start,
-      this.locale,
-      displayFormat,
-      this.alwaysLeadingZero
-    );
-    const endValue = formatDisplayDate(
-      end,
-      this.locale,
-      displayFormat,
-      this.alwaysLeadingZero
-    );
+    const startValue = formatDisplayDate(start, this.locale, displayFormat);
+    const endValue = formatDisplayDate(end, this.locale, displayFormat);
     this._maskedRangeValue =
       displayFormat || this.inputFormat
         ? `${startValue} - ${endValue}`
@@ -1170,7 +1142,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
         aria-haspopup="dialog"
         input-format=${ifDefined(this._inputFormat)}
         display-format=${ifDefined(format)}
-        ?always-leading-zero=${this.alwaysLeadingZero}
         ?disabled=${this.disabled}
         ?readonly=${readOnly}
         .value=${value ?? null}

src/components/date-range-picker/date-range-picker.utils.spec.ts

@@ -55,16 +55,14 @@ export const checkSelectedRange = (
       ? DateTimeUtil.formatDisplayDate(
           expectedValue.start,
           picker.locale,
-          picker.displayFormat,
-          picker.alwaysLeadingZero
+          picker.displayFormat
         )
       : '';
     const end = expectedValue?.end
       ? DateTimeUtil.formatDisplayDate(
           expectedValue.end,
           picker.locale,
-          picker.displayFormat,
-          picker.alwaysLeadingZero
+          picker.displayFormat
         )
       : '';
     expect(input.value).to.equal(`${start} - ${end}`);

src/components/date-time-input/date-time-input.spec.ts

@@ -41,7 +41,7 @@ describe('Date Time Input component', () => {
   describe('', async () => {
     beforeEach(async () => {
       el = await fixture<IgcDateTimeInputComponent>(
-        html`<igc-date-time-input always-leading-zero></igc-date-time-input>`
+        html`<igc-date-time-input></igc-date-time-input>`
       );
       input = el.renderRoot.querySelector('input')!;
       parser.prompt = defaultPrompt;
@@ -60,18 +60,20 @@ describe('Date Time Input component', () => {
       await elementUpdated(el);
       expect(el.placeholder).to.equal('dd.MM.yyyy');
       expect(el.inputFormat).to.equal('dd.MM.yyyy');
+      expect(el.displayFormat).to.equal('d.M.yyyy');
     });
 
     it('should update inputFormat with value according to locale', async () => {
       el.value = new Date(2020, 2, 3);
       await elementUpdated(el);
-      expect(input.value).to.equal('03/03/2020');
+      expect(input.value).to.equal('3/3/2020');
 
       el.locale = 'no';
       await elementUpdated(el);
       expect(el.placeholder).to.equal('dd.MM.yyyy');
       expect(el.inputFormat).to.equal('dd.MM.yyyy');
-      expect(input.value).to.equal('03.03.2020');
+      expect(el.displayFormat).to.equal('d.M.yyyy');
+      expect(input.value).to.equal('3.3.2020');
     });
 
     it('should use inputFormat if no displayFormat is defined - issue 1114', async () => {
@@ -108,13 +110,12 @@ describe('Date Time Input component', () => {
       el.value = new Date(2020, 2, 3);
       await elementUpdated(el);
 
-      expect(input.value).to.equal('03/03/2020');
+      expect(input.value).to.equal('3/3/2020');
 
       el.displayFormat = 'dd.MM/yyyy';
       await elementUpdated(el);
       expect(input.value).to.equal('03.03/2020');
 
-      el.alwaysLeadingZero = false;
       el.displayFormat = 'd.M';
       await elementUpdated(el);
       expect(input.value).to.equal('3.3');
@@ -201,7 +202,7 @@ describe('Date Time Input component', () => {
       await elementUpdated(el);
 
       expect(eventSpy).calledWith('igcChange');
-      expect(input.value).to.deep.equal('01/01/2000');
+      expect(input.value).to.deep.equal('1/1/2000');
     });
 
     it('should correctly switch between different pre-defined date formats', async () => {
@@ -275,7 +276,7 @@ describe('Date Time Input component', () => {
     it('should clear input date on clear', async () => {
       el.value = new Date(2020, 2, 3);
       await elementUpdated(el);
-      expect(input.value).to.equal('03/03/2020');
+      expect(input.value).to.equal('3/3/2020');
 
       el.clear();
       await elementUpdated(el);
@@ -831,7 +832,7 @@ describe('Date Time Input component', () => {
     it('Drop behavior', async () => {
       el.value = new Date(2020, 2, 3);
       await elementUpdated(el);
-      expect(input.value).to.equal('03/03/2020');
+      expect(input.value).to.equal('3/3/2020');
 
       input.value = '1010';
       input.setSelectionRange(0, 4);

src/components/date-time-input/date-time-input.ts

@@ -175,14 +175,6 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     return this._max;
   }
 
-  /**
-   * Sets to always show leading zero regardless of the displayFormat applied or one based on locale.
-   * Leading zero is applied during edit for the inputFormat always, regardless of this option.
-   * @attr
-   */
-  @property({ type: Boolean, attribute: 'always-leading-zero' })
-  public alwaysLeadingZero = false;
-
   /**
    * Format to display the value in when not editing.
    * Defaults to the locale format if not set.
@@ -240,14 +232,6 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     }
   }
 
-  @watch('alwaysLeadingZero', { waitUntilFirstUpdate: true })
-  protected setAlwaysLeadingZero(): void {
-    this.updateDefaultDisplayFormat();
-    if (this.value) {
-      this.updateMask();
-    }
-  }
-
   @watch('displayFormat', { waitUntilFirstUpdate: true })
   protected setDisplayFormat(): void {
     this.updateDefaultDisplayFormat();
@@ -259,11 +243,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   protected get hasDateParts(): boolean {
     const parts =
       this._inputDateParts ||
-      DateTimeUtil.parseDateTimeFormat(
-        this.inputFormat,
-        this.locale,
-        this.alwaysLeadingZero
-      );
+      DateTimeUtil.parseDateTimeFormat(this.inputFormat, this.locale);
 
     return parts.some(
       (p) =>
@@ -276,11 +256,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   protected get hasTimeParts(): boolean {
     const parts =
       this._inputDateParts ||
-      DateTimeUtil.parseDateTimeFormat(
-        this.inputFormat,
-        this.locale,
-        this.alwaysLeadingZero
-      );
+      DateTimeUtil.parseDateTimeFormat(this.inputFormat, this.locale);
     return parts.some(
       (p) =>
         p.type === DateParts.Hours ||
@@ -393,8 +369,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
       this._maskedValue = DateTimeUtil.formatDisplayDate(
         this.value,
         this.locale,
-        this.displayFormat,
-        this.alwaysLeadingZero
+        this.displayFormat
       );
     }
   }
@@ -516,8 +491,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
 
   private updateDefaultDisplayFormat(): void {
     this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(
-      this.locale,
-      this.alwaysLeadingZero
+      this.locale
     );
   }