bug(Date Picker): Bug in picking Hijri Date

iiDeSTRoYeR commented 1 year ago

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

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.

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.

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

zarend commented 1 year ago

Hello @iiDeSTRoYeR ,

Thank you for reporting this issue and giving a Stackblitz reproduction.

It appears that the Stackblitz is using the MatNativeDateModule adapter. MatNativeDateModule is based off the functionality available in JavaScript's native Date object. Thus it is not suitable for many locales. One of the biggest shortcomings of the native Date object is the inability to set the parse format. We strongly recommend using an adapter based on a more robust formatting and parsing library. You can use the MomentDateAdapter or a custom DateAdapter that works with the library of your choice.

It seems to me that the native date adapter doesn't support "ar-SA" very well.

Choosing a date implementation and date format settings

Please let us know if you find a date adapter that works well with "ar-SA". That information would be helpful to other Angular developers.

-Zach

iiDeSTRoYeR commented 1 year ago

The adapter by @Ebrahiem-Gamal-Mohamed, (https://github.com/Ebrahiem-Gamal-Mohamed/ngx-angular-material-hijri-adapter/tree/main/projects/ngx-angular-material-hijri-adapter), works greatly for ar-SA.

However, my main issue is that I want to use other locales such as en-GB or ar-EG. I would look into extending the ngx-angular-material-hijri-adapter to be able to override the Hijri implementation when any other locales are passed.

zarend commented 1 year ago

Okay, thanks for the information. I wasn't aware of the ngx-angular-material-hijri-adapter.

We are able to give a limit amount of support in this issue tracker. To get further support, I suggest using one of the following channels:

Stackoverflow https://stackoverflow.com/questions/tagged/angular-material2
Gitter https://gitter.im/angular/material2
Google Groups https://groups.google.com/forum/#!forum/angular-material2

For this question, it might be helpful to create a discussion https://github.com/angular/components/discussions. Perhaps there are other developers with similars questions about Date Adapters.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

Best,

Zach

angular-automatic-lock-bot[bot] commented 11 months ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / components