fix(calendar): add DayDigitPipe to handle non-numeric day characters in locales like zh-CN

- Introduced DayDigitPipe to strip non-numeric characters from localized day strings.
- Updated `IgxDaysViewComponent` to use the new pipe in the day formatting logic.
- Added a test to verify correct formatting for zh-CN locale.

Author: desig9stein

projects/igniteui-angular/calendar/src/calendar/day-digit.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { IFormattingViews } from "igniteui-angular/calendar";
+
+@Pipe({ name: 'dayDigit' })
+export class DayDigitPipe implements PipeTransform {
+    public transform(value: string, formatViews: IFormattingViews): string {
+        if (!value) {
+            return '';
+        }
+
+        // strip non-numeric characters that might have been added by the locale formatter (e.g., "25日" -> "25").
+        if (formatViews.day) {
+            // Use regex to extract the numeric day value.
+            // This handles locales that include non-numeric characters (e.g. '25日' in zh-CN).
+            // match(/\d+/) is preferred over parseInt() as it robustly finds the digits regardless
+            // of their position (prefix/suffix) in the localized string.
+            const match = value.match(/\d+/);
+            return match ? match[0] : value;
+        }
+
+        return value;
+    }
+}

projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.html

@@ -81,7 +81,7 @@
                 (mouseEnter)="changePreviewRange(day.native)"
                 (mouseLeave)="clearPreviewRange()"
             >
-                {{ formattedDate(day.native) }}
+                {{ formattedDate(day.native) | dayDigit:formatViews }}
             </igx-day-item>
         }
     </div>

projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.spec.ts

@@ -7,6 +7,7 @@ import { ScrollDirection } from "../calendar";
 import { KeyboardNavigationService } from '../calendar.services';
 import { CalendarDay } from 'igniteui-angular/core';
 import { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
+import { DayDigitPipe } from "igniteui-angular/calendar/src/calendar/day-digit.pipe";
 
 const TODAY = new Date(2024, 6, 12);
 
@@ -114,6 +115,37 @@ describe("Days View Component", () => {
         }
     });
 
+    it("should format date correctly for zh-CN locale programmatically vs template pipe", () => {
+        const fixture = TestBed.createComponent(InitDaysViewComponent);
+        const daysView = fixture.componentInstance.instance;
+        const pipe = new DayDigitPipe();
+        const date = new Date(2020, 10, 25); // Nov 25
+
+        // Initialize component
+        daysView.formatViews = { day: true, month: true, year: true };
+        fixture.detectChanges();
+
+        // Mock the formatter behavior
+        // Simulate a locale (like zh-CN) that adds a suffix to the day number.
+        // Cast to 'any' to overwrite the protected 'formatterDay' property used by formattedDate()
+        (daysView as any).formatterDay = {
+            format: () => '25日',
+        } as Intl.DateTimeFormat;
+
+        // 1. Verify Programmatic Access (formattedDate method)
+        // Should return the raw formatted string from the formatter (with suffix)
+        const programmaticResult = daysView.formattedDate(date);
+        expect(programmaticResult).toBe('25日', 'Programmatic API should return the full locale string (including suffix, in this case 日)');
+
+        // 2. Verify Pipe Logic
+        // The pipe takes the formatted string "25日" and strips non-digits to return "25"
+        const pipeResult = pipe.transform(programmaticResult, daysView.formatViews);
+        expect(pipeResult).toBe('25', 'Pipe should strip non-numeric characters from the input string');
+
+        // 3. Confirm the difference implies the pipe did its job
+        expect(programmaticResult).not.toEqual(pipeResult);
+    });
+
     describe("Keyboard navigation", () => {
         let fixture: ComponentFixture<InitDaysViewComponent>;
         let el: HTMLElement;

projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts

@@ -37,6 +37,7 @@ import {
 import { IgxCalendarBaseDirective } from '../calendar-base';
 import { IViewChangingEventArgs } from './days-view.interface';
 import { KeyboardNavigationService } from '../calendar.services';
+import { DayDigitPipe } from "igniteui-angular/calendar/src/calendar/day-digit.pipe";
 
 let NEXT_ID = 0;
 
@@ -52,7 +53,7 @@ let NEXT_ID = 0;
     selector: 'igx-days-view',
     templateUrl: 'days-view.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [IgxDayItemComponent, TitleCasePipe]
+    imports: [IgxDayItemComponent, TitleCasePipe, DayDigitPipe]
 })
 export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements AfterContentChecked {
     protected el = inject(ElementRef);
@@ -446,8 +447,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Af
      */
     public formattedDate(value: Date): string {
         if (this.formatViews.day) {
-            const dateParts = this.formatterDay.formatToParts(value);
-            return dateParts.find(part => part.type === 'day')?.value ?? value.getDate().toString();
+            return this.formatterDay.format(value);
         }
 
         return `${value.getDate()}`;

src/app/calendar/calendar.sample.html

@@ -14,6 +14,7 @@
                 [showWeekNumbers]="properties.showWeekNumbers"
                 [hasHeader]="!properties.hideHeader"
                 [formatOptions]="formatOptions"
+                [formatViews]="formatViews"
                 [disabledDates]="disabledDates"
                 [specialDates]="specialDates"
                 (selected)="onSelection($event)"