angularangular-materialmat-datepicker

Unable to translate month name after upgrading to angular 18

I recently upgraded my web app to Angular 18 from 15. In that, I have one date-picker from which user can choose month name, but after upgrading it to latest version, It's unable to translate month name as per locale. Apart from that everything is working.

I always get English month even though I changing it programmatically. (Previously it's working)

So, before upgrading I used below config in my date picker component to show month name

export const MONTH_PICKER_FORMAT = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MMMM',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

export const CUSTOM_MONTH_FORMAT_PROVIDER = [
  {
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
  },
  { provide: MAT_DATE_FORMATS, useValue: MONTH_PICKER_FORMAT}
];

@component({
selector: 'sm-month-picker',
  templateUrl: './month-picker.component.html',
  styleUrls: ['./month-picker.component.scss'],
  providers: [CUSTOM_MONTH_FORMAT_PROVIDER]
})

After upgrading, I changed it to new approach which is documented in Angular website.

I tried to replicate my component new code in stackblitz and there it's working as expected (we can change the locale). Please check below link for your reference-

https://stackblitz.com/edit/glngoj?file=src%2Fexample%2Fdatepicker-locale-example.ts

When I tried to removed provideMomentDateAdapter() from providers array, then I can able to change month name as per locale, but without custom date format.

So, I unable to debug what's wrong with my new code.

Please suggest me how I can fix it.

Solution

  • I fixed it by importing locale file form moment/locale/.

    But still, I don't know how it was working on stackblitz without importing locale specific file.