bug: datetime locale with h23 does not respect max range

[OlivierChirouze]

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

I set min and max values for date-time.

• min value is 18:30
• max value is 20:40
• initial value is set to 20:30

I carefully provide values that don't include any timezone, to keep things simple. It works fine for min and initial value. It doesn't for max.
Max value seems to be exactly 3 hours later than the provided value (one can set anything up to 23:40). Users should be prevented from setting anything above 20:40.

Example:
https://stackblitz.com/edit/angular-ivy-cyzzpl?file=src/app/app.component.ts

As far as I remember, this used to work fine on Ionic 5 (but I had to adapt the code for the new date format anyway).

Expected Behavior

The min value should be exactly the one provided and users should not be able to pass it.

Steps to Reproduce

Set a max value and try to define a value that goes beyond this max value.

Code Reproduction URL

https://stackblitz.com/edit/angular-ivy-cyzzpl?file=src/app/app.component.ts

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/o.chirouze/.nvm/versions/node/v14.18.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.2
@angular-devkit/build-angular : 12.2.14
@angular-devkit/schematics : 12.2.14
@angular/cli : 12.2.14
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.3.2
@capacitor/android : 3.3.2
@capacitor/core : 3.3.2
@capacitor/ios : 3.3.2

Cordova:

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

Utility:

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

System:

NodeJS : v14.18.2 (/Users/o.chirouze/.nvm/versions/node/v14.18.2/bin/node)
npm : 6.14.15
OS : macOS Monterey

Additional Information

No response

[sean-perkins]

Hello @OlivierChirouze thanks for reporting this issue.

I'm not quite following the issue here. In your stackblitz, the date value ranges are:

• Min: 2022-01-17T18:30:34 (January 17th, 6:30PM)
• Initial value: 2022-01-17T20:30:34 (January 17th, 8:30pm)
• Max: 2022-01-17T20:40:34 (January 17th, 8:40pm)

Following these rules, I should be able to select any time on January 17th, between 6:30PM until 8:40pm.

This is the exact scenario I'm seeing in your example:

Kapture.2022-01-19.at.12.08.05.mp4

Outside of seconds not being enforced in the calculation for min/max, I don't see the 3 hour offset you described.

Can you let me know what I am missing? Thanks!

[OlivierChirouze]

Thanks a lot Sean.

As I was guessing, this seems related to the locale. At first I couldn't imagine we'd have a different behavior because the new component doesn't use timezones, but it does use hour cycles! You are using h12, I'm using h24.

And... using a 24h cycle, here's what I see:

In fact, I don't think the issue is that it's "3 hours later", but rather that the hours are not limited at all (the minutes are, though).

I've updated the stackblitz to use locale en-GB to force it to h24, you should be able to experience it yourself.

BTW, for some reason using this didn't work: hour-cycle="h24". Only using the locale worked.

[sean-perkins]

Thanks for the added detail and discovery, that's super helpful! I'm seeing the same issue as you now.

I'll label this as a bug and will personally take a look, as I recently updated some logic around hour cycles and the generated values with min/max ranges and likely that is the culprit (#24476).