bug: date picker jumps to max date when navigating to next year

[daniel-zero]

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
• [ ] Nightly

Current Behavior

When the max date property is used and the user moves from December 2022 to January 2023 the datepicker will switch to the given max date instead of moving to January

Expected Behavior

The datepicker should switch to January

Steps to Reproduce

  <ion-datetime
    locale="de-DE"
    presentation="date"
    [min]="'2022-08-03'"
    [max]="'2023-07-29'"
    showDefaultButtons="true"
    firstDayOfWeek="1"
  ></ion-datetime>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/Users/danielsogl/.nvm/versions/node/v16.16.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.2.0 @angular-devkit/build-angular : 14.1.0 @angular-devkit/schematics : 14.1.0 @angular/cli : 14.1.0 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.0.1 @capacitor/android : not installed @capacitor/core : 4.0.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.6.0

System:

NodeJS : v16.16.0 (/Users/danielsogl/.nvm/versions/node/v16.16.0/bin/node) npm : 8.15.1 OS : macOS

Additional Information

No response

[daniel-zero]

One thing to note, there looks like there is an Angular 14 issue. Our app with the latest Ionic version and Angular 13 has no issues.

[liamdebeasi]

~Thanks for the issue. Can you provide a minimal GitHub repo for the issue?~

Never mind, I can reproduce the issue now. Let me take a closer look.

[liamdebeasi]

The issue here is that when switching from Dec 2022 --> Jan 2023, the months column in the month/year picker changes from having data for August through December to having data for January through August. To preserve scrolling stability, the picker attempts to select the nearest item: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/picker-column-internal/picker-column-internal.tsx#L97

This causes ionChange to fire, resulting in the datetime picker jumping the view forward to August 2023.

[liamdebeasi]

This also impacts setting min and navigating to the previous year. (https://github.com/ionic-team/ionic-framework/issues/25870)

[liamdebeasi]

Hi there,

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected]

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/26125, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if there are any issues.

[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.