bug(datetime): month-year presentation doesn't check if day is in new month when changing value

[Wuesteon]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

when I select a date with presentation='month-year', a date with the day 31 is always created

Expected Behavior

Correct days should be displayed

Steps to Reproduce

<ion-datetime formControlName="dateMin" presentation="month-year"></ion-datetime>

result:

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.17.1

Utility:

cordova-res (update available: 0.15.4) : 0.15.2 native-run (update available: 1.5.0) : 1.4.1

System:

NodeJS : v16.14.2 npm : 8.5.0 OS : macOS Monterey

Additional Information

"@ionic/angular": "6.0.8",

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[DwieDima]

I discovered the same issue. The problem is, when presentation is set to date-month, it will always select the current day (lets say 05. of April 2022). If you now switch months (e.g February) the current day will always be selected (05. of February ...).

This issue was created on 31. of March. If you now switch the month to February you'll get the date 31. of February 2022.

Here's a repoduction repo (you have to change your system date).

https://github.com/DwieDima/ion-datetime-bug

[amandaejohnston]

Thanks, and apologies for the delayed response. I'm able to replicate this. If you initialize date to the 31st (public date = "2022-03-31T15:00:00";), you don't have to change your system date.

While using the month-year presentation means you don't care about the day, the issue is that Angular's date pipe (and probably other date formatting options) will interpret February 31st as March. 🤔 Example using date | date:"LLLL": We should probably just force month-year to use the 1st for the day, or else add checks to ensure the date we're moving to is valid.

As a workaround, you can initialize the datetime's value to the 1st of this month, or some other day that will be valid for all months.

[kyoz]

For more information, this issue also happen with other presentation like date & date-time, when you switch between month-year selection wheels and date.

And seem ion-datetime only respect the init Form value, I'v tried to set the FormControl value before switching to month-year wheels but it's seem doesn't work, only click on days or set initial FormControl value work.

https://user-images.githubusercontent.com/29815830/177726566-cb566314-cc9c-49e0-9b02-aa6a7618be0e.mov

[liamdebeasi]

Thanks for the issue. This was resolved via https://github.com/ionic-team/ionic-framework/pull/25996, and a fix will be available in an upcoming release of Ionic.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.