bug: datetime, setting value out of bounds prevents user from navigating in bounds

[Yura13]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Expected Behavior

I should have a possibility to navigate to the available months.

Steps to Reproduce

I am trying to edit the saved date but can't navigate to the next month.
Saved date is 2021-12-12
Min date is 2022-03-04
Max date is 2022-04-03

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\Xiaomi\AppData\Roaming\nvm\v16.13.2\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.10
@angular-devkit/build-angular : 13.1.3
@angular-devkit/schematics : 13.1.3
@angular/cli : 13.1.3
@ionic/angular-toolkit : 5.0.3

Cordova:

Cordova CLI : 10.0.0 ([email protected])
Cordova Platforms : android 9.1.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, cordova-plugin-ionic 5.5.1, (and 28 other plugins)

Utility:

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

System:

Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
NodeJS : v16.13.2 (C:\Program Files\nodejs\node.exe)
npm : 8.1.2
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. The current expectation is that developers must provide a valid date to the value property. Given the max and min values you provided, 2021-12-12 is not a valid value as it is out of bounds.

However, we can look into improving this developer experience so I will add this to our tracker.

[philkonick]

This is still related to the bug where you can't navigate to a month that contains a min or max date, if the day of that date is greater or less than the current day respectively. Please see here for the explanation based on my testing.

For usability, I do also think the user should be able to navigate to any month between the current date and the month containing the min date. A simple workaround for this would be to set value=min on initialisation, which would immediately put the selected date into the valid date range, however the other bug I mentioned above will still prevent this workaround from working correctly.

Found a more recent open bug that deals with this problem more specifically, linking here.

[liamdebeasi]

The team met to discuss this behavior. Here is out current plan for addressing this:

When no value is set:

• The datetime will render the calendar on an in-bound month and will never start the user out of bounds.
• It will use the following algorithm to determine which month to render:

1. If the minimum month > today’s month, show the minimum month.
2. If the maximum month < today’s month, show the maximum month.
3. Otherwise, show today’s month.

• The time picker will show all possible values until you select a date at which point it will only show the times that are in bounds according to the date you selected.

When a value Is set:

• The datetime will add a console.warn informing the developer that the current value is out of bounds.
• The datetime will render the calendar on a current in-bound month. It will use the above algorithm to determine which month to render.

---

In neither case will the datetime modify the value set.

[averyjohnston]

This has been resolved via #25351 and #25513. The former, which accounts for most of the fix, has already been released in Ionic 6.1.9. The latter, which adds console warnings for better DX, will be available in a future release of Ionic 👍

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