bug: `ion-datetime` timepicker does not respect hour cycle format with min provided

[jongbonga]

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 setting the minimum DateTime to now (new Date()), there is no way to select previous minutes even on a different hour.
And the hour wheel doesn't respect the default h23 even when specified.

Expected Behavior

1. The min value should restrict only up to what is specified. if minimum was set to 19:30, I should be able to select 20:everthing else
2. The hour should stick to the default hour system or the specified one

Steps to Reproduce

RPReplay_Final1640193110.2.mp4

  now = moment().add(1, 'h').format();
  minInsterval: number[];
  dateTime:any

ngOnInit() {
    const min = 0,
      max = 55,
      interval = 5;

    const length = (max - min) / interval + 1;
    this.minInsterval = Array.from({ length }, (_, i) => min + i * interval);
  }

<ion-datetime
        #calendar
        size="cover"
        hourCycle="h23"
        [min]="now"
        [minuteValues]="minInsterval"
        [(ngModel)]="dateTime"
      >
      </ion-datetime>

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (/Users/jonathan/.nvm/versions/node/v16.13.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.1
   @angular-devkit/build-angular : 13.1.2
   @angular-devkit/schematics    : 13.1.2
   @angular/cli                  : 13.1.2
   @ionic/angular-toolkit        : 5.0.3

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

Hello @jongbonga there appears to be an issue with the uploaded mp4. Can you please re-upload that video asset? Thanks!

[jongbonga]

hey @sean-perkins, updated! sorry about earlier, fighting with compression

[jongbonga]

@sean-perkins thanks for the title change, but notice the minutes' behavior, they don't update properly. the wheel is locked to the min value even when updating the hour

[sean-perkins]

@jongbonga I see that as well 👍

Is this behavior closer to your expectation?

Min: 19:30
Initial value: 20:30
Hour cycle: h23

Kapture.2021-12-22.at.14.38.31.mp4

I believe the value going to 19:59 once stepping back isn't ideal 🤔 but also it cannot send you to 19:00 because of the min range.

[jongbonga]

Yes, 100%!
if it goes back to 19:59, it won't be "wrong" as long as the other options can be set properly. and Yes, shouldn't go back to 19:00 because the min is the expected behavior

[jongbonga]

Will the fix also resolve the issue where 19:00 would show 7:00 first time then 19:00 when re-opened?

[sean-perkins]

Yes I believe so 👍 at least in the hour cycle examples, it is showing the 24 hour format consistently on initial render of the time, as well as for the time picker selection.

Is that another bug logged somewhere else that I can associate to the PR?

[jongbonga]

I don't know if the issue is caused by the DateTime format being ISO but for some reason, I get it every time as you can see in the video.
I haven't logged it yet but I can. I will try to reproduce as soon as possible on a blank and will open a new one if the issue persists