Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

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
The hour should stick to the default hour system or the specified one

Steps to Reproduce

https://user-images.githubusercontent.com/12111716/147143799-39426950-d69e-438c-8b34-f793f4e727c7.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

Issue Analytics

State:
Created 2 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

1reaction

sean-perkinscommented, Dec 22, 2021

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?

1reaction

sean-perkinscommented, Dec 22, 2021

@jongbonga I see that as well 👍

Is this behavior closer to your expectation?

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

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.

Top Results From Across the Web

ion-datetime - Ionic Framework

Datetimes present a picker interface to select dates and times. Ionic's API Datetime input component easily displays a preferred format, and manages values....

ion-datetime always forces the date picker to be displayed

ion -datetime will use the hour cycle that is specified by the locale property by default. For example, if locale is set to...

Angular and Ionic Date & Time Min & max values Example

Angular date time picker & scroller with min/max restrictions, DOB picker, custom header text for instructions. For Angular 14 and Ionic 6.

Intl.DateTimeFormat() constructor - JavaScript - MDN Web Docs

The Intl.DateTimeFormat() constructor creates Intl.DateTimeFormat objects that enable language-sensitive date and time formatting.

@ionic/core | Yarn - Package Manager

Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase ......