bug: Minimum date in Datetime causes issues with 12-hour clock

[elenche]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [X] Nightly

Current Behavior

Setting a minimum datetime causes noon (12pm) to be missing from the PM time picker. Instead it shows in the AM picker. Note: I tried using the hourCycle property but that didn't change anything.

Current values: minuteValues: string = '0,15,30,45'; min: string = '2022-04-25T08:30:00'; max: string = '2022-04-25T21:30:00';

AM picker result:

PM picker result:

Expected Behavior

The time picker should correctly display the following options: AM picker: 8:30 - 11:45 PM picker: 12:00 - 21:30

Steps to Reproduce

Tested both on @ionic/angular versions 6.1.0 and 6.1.3-dev.11650654723.120c74ee.

Open the StackBlitz URL below and try to select 12pm.

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-bptrsx?file=src%2Fapp%2Fapp.component.html

Ionic Info

On my machine:

Ionic:
   Ionic CLI                     : 6.16.3 (...npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.3-dev.11650654723.120c74ee
   @angular-devkit/build-angular : 13.3.3
   @angular-devkit/schematics    : 13.3.3
   @angular/cli                  : 13.3.3
   @ionic/angular-toolkit        : 6.1.0

...

System:
   NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.12
   OS     : Windows 10

Additional Information

No response

[amandaejohnston]

Thanks for the issue. I'm able to replicate this in core using the following HTML:

<ion-datetime
  locale="en-US"
  presentation="date-time"
  min="2022-04-25T08:30"
  max="2022-04-25T21:30"
  minute-values="0,15,30,45"
  show-default-buttons="true"
></ion-datetime>

[acommend]

I see the same issue with @ionic/vue 6.1.3

[pjc2007]

Yes, I have this with "@ionic/angular": "^6.1.9".

TS:
public min = '2022-06-30T06:00:00.000';
public max = '2022-06-30T18:00:00.000';
public value = '2022-06-30T10:29:06.000';

HTML:
 <ion-datetime     
      hourCycle="h12"
      [min]="min" 
      [max]="max"
      [value]="value">
  </ion-datetime>

So anything that makes the display 12 hours (eg the locale or hourCycle)

Also I noticed it only happens if the value is also set. If I remove the line [value]="value" it is ok

[jdforsythe]

Same. Only have ngModel and min set on the end time, which is set in a very common scenario to have a minimum date equal to the start date.

public startTime = '2022-07-29T08:00:00-04';
public endTime = '2022-07-29T12:00:00-04';

<ion-datetime
  [(ngModel)]="startTime"
  name="startTime"
  presentation="date-time"
  showDefaultButtons=true"
></ion-datetime>

<ion-datetime
  [(ngModel)]="endTime"
  name="endTime"
  presentation="date-time"
  showDefaultButtons=true"
  [min]="startTime"
></ion-datetime>

The 12 on the PM is missing. There is a 12 on the wheel when you switch to AM, but it sets the value to 12am, which is before the min date

[liamdebeasi]

Hi there,

Here is a dev build with a proposed fix if anyone is interested in testing: 6.2.8-dev.11663343248.1fce52ab

Install Example:

npm install @ionic/[email protected]

Note: You may need to test this in a local Ionic app. StackBlitz sometimes has trouble installing dev builds.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25952, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build.

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