When using the "ar-SA" locale in Angular Material datepicker component, the date on display (illustrated in the following image) is shifted back two months and does not represent the actual date.
Image of incorrect month being displayed in date picker
Moreover, when selecting the date on the datepicker, another date appears different to that selected (indicated in image below); however, the date that appears in the text field is the correct date that matches today's date. Image of different date picker input value and text input
Diagnosis steps:
- According to (https://github.com/angular/components/issues/27429), the issue occurs because the Angular Material Native date adapter (which extends Date JS), doesn't support Hijri date.
- I have used the Hijri date adapter in ngx-angular-material-hijri-adapter (https://github.com/Ebrahiem-Gamal-Mohamed/ngx-angular-material-hijri-adapter/tree/main/projects/ngx-angular-material-hijri-adapter), and it works flawlessly, but my main issue is that I want the user to switch between locales (gregorian/hijri) seemlessly. The ngx-angular-material-hijri-adapter doesn't support Gregorian.
- Suggested solution is either to use a date adapter that switches between the native date adapter and ngx-angular-material-hijri-adapter, or extend the ngx-angular-material-hijri-adapter to allow overriding the Hijri functions when a gregorian locale is passed.
Reproduction StackBlitz link: https://components-issue-f7fmes.stackblitz.io Steps to reproduce: Select an Today's date Date in text field appears correct Date in Date picker appears incorrectly
Expected Behavior Date should match in both picker and text field
Actual Behavior Date in datepicker is incorrect and should be shifted
Environment Angular: 15.2.9 CDK/Material:15.2.1 Browser(s): Google Chrome Operating System (e.g. Windows, macOS, Ubuntu): Windows 11