bug: datetime month navigation blocked with min attribute

[antoine92190]

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

When I set a min date, for example min="2022-02-09", the datetime picker opens correctly, and January is correctly disabled.
But if I navigate to march, I cannot go back to February.

Screen.Recording.2022-02-09.at.18.19.22.mov

Expected Behavior

We should be able to go back to previous month as it is and was not disabled.

Steps to Reproduce

• Add a min date to the datetime picker component
• Open the datetime picker
• Navigate to the next month
• Try to navigate back to the previous month => Not possible

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.12.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.7
@angular-devkit/build-angular : 12.2.4 (/Users/antoine/Dev/agorapulse/platform/frontend/node_modules/@angular-devkit/build-angular)
@angular-devkit/schematics : 11.2.18
@angular/cli : 12.2.4 (/Users/antoine/Dev/agorapulse/platform/frontend/node_modules/@angular/cli)
@ionic/angular-toolkit : 3.1.1

Capacitor:

Capacitor CLI : 3.2.4
@capacitor/core : 3.2.4

Cordova:

Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : not installed
native-run : 1.5.0

System:

NodeJS : v14.17.0 (/usr/local/bin/node)
npm : 6.14.13
OS : macOS
Xcode : Xcode 13.2.1 Build version 13C100

Additional Information

No response

[sean-perkins]

@antoine92190 thanks for reporting this issue! I can replicate the same behavior in our minmax test file.

[sean-perkins]

Anyone that runs into this issue can temporarily use this dev build:

6.0.8-dev.1644432569.937206e

You can install it for your necessary package (react/vue/angular/core).

Thanks!

[antoine92190]

@sean-perkins Is it safe tu use the dev build in production?

[Yura13]

@sean-perkins
Thanks! I am starting to use 6.0.8-dev.1644432569.937206e.
There is the same issue with the max attribute.

[Yura13]

The same bug is reproduced if use the max attribute.

<ion-popover class="popover-datepicker" trigger="open-date-input" show-backdrop="false" mode="md">
            <ng-template>
                <ion-datetime #popoverDatetime
                              hour-cycle="h12"
                              [showDefaultButtons]="true"
                              [minuteValues]="minuteValues"
                              [hourValues]="hourValues"
                              [min]="minStartsAt"
                              [max]="maxStartsAt"
                              mode="ios"
                              [value]="partialForm.get('schedule_time').value"
                              (ionChange)="setScheduleTime()"></ion-datetime>
            </ng-template>
        </ion-popover>

[philkonick]

This is still happening to me too, for min and max dates. Ionic Angular 6.0.11.

To elaborate: I am able to swipe to months that contain the min/max dates (correct behaviour), and I am able to select the months with the min/max dates from the month picker in the top left (also correct behaviour). However the next and previous buttons in the top right are disabled if the next/previous month contains a min/max date (incorrect behaviour).

I've done some experimenting and it seems like the incorrect behaviour only occurs if the day (i.e. 15) of the min date is greater than the current day. If the day of the min date is equal to or less than the current day the buttons behave correctly. Likewise for the max date, the incorrect behaviour only occurs if the day of the max date is less than the current day, etc.

Example:
Today is "2022-03-15"
min = "2022-03-16"
If you navigate to April, you won't be able to navigate back to March using the previous button. If min = "2022-03-[0-15]" you will be able to navigate correctly.

Found an open bug dealing with this more specifically, linking here.

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