bug: ion-datetime selecting a day past the max day value will disable arrow navigation on previous month

[alexooi]

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

In ion-datetime with min and max values set, when a date other than the default date value is selected, the navigation arrow is incorrectly disabled.

Expected Behavior

In ion-datetime with min and max values set, when a date other than the default date value is selected, the navigation arrow is not disabled.

Steps to Reproduce

2022-04-07.21-49-38.mp4

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (C:\Users\alexo\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.14
@angular-devkit/build-angular : 12.2.16
@angular-devkit/schematics : 12.1.1
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 2.4.6
@capacitor/android : 2.5.0
@capacitor/core : 2.4.6
@capacitor/ios : 2.5.0

Utility:

cordova-res : 0.15.3
native-run : 1.3.0

System:

NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

Additional Information

No response

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

[StefanNedelchev]

I confirm to have the same problem and it's really weird how and when happens. It appears to me that happens when you use property binding for min, max and value instead of string binding. At first I thought it has something to do with the summer time switching on the 27th of March but now I see the problem exists even if the min-max range does not cross different local times. As soon as remove the min and max bindings from the template, the whole calendar becomes active
Here's a stackblitz project where I notice the issue
https://stackblitz.com/edit/ionic6-angular13-hn7ytp

[sean-perkins]

@hardmaster92 thanks for the added detail & the reproduction! That is very strange behavior, but reproducible. I'm going to track this specific to Angular for now.

I will need to dig in a little further to find the exact cause, but we can track this as a bug in the interim so others can find/follow it.

[sean-perkins]

@hardmaster92 apologies as I didn't catch this the first time reviewing, in your stackblitz example you are setting the min and max of the datetime to your min property. This is causing your navigation to be disabled.

Updating:

<ion-datetime [min]="min" [max]="min" [value]="initialDate"></ion-datetime>

to:

<ion-datetime [min]="min" [max]="max" [value]="initialDate"></ion-datetime>

Should resolve your issue.

@alexooi could you provide a reproduction for your issue?

[alexooi]

@sean-perkins I am able to reproduce the issue with @hardmaster92's link. I changed "min" to "max" for [max] and the arrow is disabled if I select 8 Mar onwards. The arrow is not disabled for 7 Mar and before.

[StefanNedelchev]

@sean-perkins sorry for the mistake, I fixed it and updated to the latest ionic, check the example again. Now the arrows are enabled (not sure if updating ionic also helped) but if you select a date from March then the navigation becomes disabled which is also weird

[sean-perkins]

Thank you both for following up! I've been able to discover "what is happening". When calculating if the next/previous month should be disabled, we offset the active (working parts) month value +/- 1 and check if the date is before or after your min and max date.

This is problematic, because if the max value is April 7th, but you selected March 16th, our offset logic is comparing April 7th vs. April 16th, which would disable the button.

I need to update the comparison logic to ignore days of the month, for next/previous logic. I'll post a dev build when that is available.

Thanks!

[sean-perkins]

Could either of you test with this dev build and let me know if you have any issues?

6.1.3-dev.11650481711.1ca044fb

[alexooi]

@sean-perkins I have yet to set up a stackblitz project - apologies for that.

The dev build breaks a behaviour that was working fine previously.

Now, when I am in the month of max, the left arrow to navigate to the previous month is disabled. I would expect the left arrow to still be clickable.

[sean-perkins]

@alexooi can you clone this repo and adjust the parameters to match the behavior you are seeing?

https://github.com/sean-perkins/ion-datetime-min-max-25073

I've been having issues with Stackblitz recently and it not actually installing the dev build, even though it is specified in the project dependencies in their interface.

The repo above uses the dev build. I was unable to get the previous navigation to be disabled in the max month.

[alexooi]

@sean-perkins I can't push to your repo, might be due to the fact that I have yet to set up the SSH key for my github account. It's getting late here so I will just paste the date that I tested with, hope that's ok with you.
min = '2022-04-22';
max = '2022-05-21';
initialDate = '2022-04-22T10:00:00';

[sean-perkins]

@alexooi thanks for the extra information, that was super helpful!

Here is an updated dev build:

6.1.3-dev.11650654723.120c74ee

I've also updated the Github repo with your reproduction data & the latest dev build, if you could also confirm for me.

[alexooi]

@sean-perkins I can confirm that the dev build works perfectly! Thank you so much for your time and effort into resolving this. Much appreciated!

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