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.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.
@@ -234,11 +226,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
       this.updateDefaultMask();
       this.setMask(this._defaultMask);
     }
-  }
 
-  @watch('alwaysLeadingZero', { waitUntilFirstUpdate: true })
-  protected setAlwaysLeadingZero(): void {
-    this.updateDefaultDisplayFormat();
     if (this.value) {
       this.updateMask();
     }
@@ -255,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) =>
@@ -272,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 ||
@@ -389,8 +369,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
       this._maskedValue = DateTimeUtil.formatDisplayDate(
         this.value,
         this.locale,
-        this.displayFormat,
-        this.alwaysLeadingZero
+        this.displayFormat
       );
     }
   }
@@ -512,8 +491,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
 
   private updateDefaultDisplayFormat(): void {
     this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(
-      this.locale,
-      this.alwaysLeadingZero
+      this.locale
     );
   }
 

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

@@ -198,16 +198,14 @@ export abstract class DateTimeUtil {
    * @param locale Locale of the component
    * @param displayFormat Display format specified by the user. Can be undefined.
    * @param inputFormat Input format, so it is not calculated again and used for leading zero format.
-   * @param leadingZero Should leading zero be applied?
    * @returns
    */
   public static formatDisplayDate(
     value: Date,
     locale: string,
-    displayFormat: string | undefined,
-    leadingZero = false
+    displayFormat: string | undefined
   ): string {
-    let options: Intl.DateTimeFormatOptions = {};
+    const options: Intl.DateTimeFormatOptions = {};
     switch (displayFormat) {
       case 'short':
       case 'long':
@@ -233,19 +231,11 @@ export abstract class DateTimeUtil {
           return getDateFormatter().formatDateCustomFormat(
             value,
             displayFormat,
-            { locale, forceLeadingZero: leadingZero }
+            { locale }
           );
         }
     }
 
-    if (leadingZero && !displayFormat) {
-      options = {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-      } as Intl.DateTimeFormatOptions;
-    }
-
     return getDateFormatter().formatDateTime(value, locale, options);
   }