bug: `ion-datetime` cannot select year values in the future

[sean-perkins]

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

Users cannot use the month/year picker to select year values beyond the current year.

Expected Behavior

Users should be able to select year values 100 years into the past and future.

Steps to Reproduce

1. Visit the Stackblitz reproduction
2. Open the Month/Year selector (clicking the month label in the upper-left)
3. Notice: The max year is 2022
4. You can use the next arrow button in the main datetime view to get to the next year (2023)

Code Reproduction URL

https://stackblitz.com/edit/react-c4nyee-afkjzh?file=App.js,main.js

Ionic Info

N/A

Additional Information

No response

[liamdebeasi]

This likely needs some design work. By default the maximum year we render in the year picker is 2022 (to avoid rendering too many items in the wheel).

[sven-93]

You should be able to increase the max year to select like so <IonDatetime max="2023"></IonDatetime>

But selecting any year value greater than the current one throws an error.

[wf9a5m75]

Yeah, ion-datetime should support future years. I would like to use it to make a reservation, but can't select the next year :(

[wf9a5m75]

Ah, figured out. We can do <ion-datetime min="2022-10-23" max="2023-12-09"></ion-date-time> (2022-10-23 is today, and 2023-12-09 is next year)

[richardkshergold]

@wf9a5m75 I tried max="2030-12-31" and I still saw 2022 as the highest year in the list?

[Gkleinereva]

From my testing, it looks like the limitation is only relevant if developers don't specify both a min and a max value. If you provide both the min and max boundary, the month/year selector can display at least 200 distinct years. For example, I can use the following markup:

    <ion-datetime
        (ionChange)="confirmModalValue($event)"
        (ionCancel)="dismissModal()"
        [locale]="locale"
        [showDefaultButtons]="true"
        minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
        [presentation]="presentation"
        [value]="value"
        min="1923-05-25T10:21:52.978-08:00"
        max="2123-05-25T10:19:04.840-07:00"
    ></ion-datetime>

and I see all date options that should be displayed - in both the calendar selector and the month/year selector.

*@iionic/angular: ^7.0.3