Ionic-framework: bug: changing hours changes AmPm column

[topalavlad]

Bug Report

Ionic version:
[x] 4.4
[x] 4.7

Current behavior:
Having a TimePicker with display-format="h:mm a", when a user changes the hour to 12, AmPm column is automatically changed to PM. When the user selects any other hour, the AmPm column is changed to AM.

Expected behavior:
Changing the hour does not influence the AmPm column.

Steps to reproduce:
Change hour

Related code:

        <ion-item>
          <ion-label>h:mm a</ion-label>
          <ion-datetime display-format="h:mm a" value="01:47"></ion-datetime>
        </ion-item>

Other info:
Tracked by #16630

[topalavlad]

The issue here is that the columns get regenerated for any change in order to compute min/max values and valid ones (number of days in month for example). When this happens, because ampm value is not part of datetimeValue, it's implied from the hour value using getValueFromFormat(date, format).

The reason why this didn't happen before 4.4 is the following block which was removed in 4.4 with this PR #18380:

    picker.addEventListener('ionPickerColChange', async (event: any) => {
      ...
      /**
       * Don't bother checking for non-dates as things like hours or minutes
       * are always going to have the same number of column options
       */
      if (data.name !== 'month' && data.name !== 'day' && data.name !== 'year') { return; }
      ...

I think the cleanest way to fix this would be to add ampm to datetimeValue. That way we'll only imply it from hour value when ampm is missing. Any opinions?

[msbware]

I'm also experiencing this behavior with Ionic 5. Any updates on it?

[shlomir]

Same here on ionic 5. any fix on the way?

[leichelkraut1]

Same here on ionic 5. whats the word?

[jonathan-chin]

also experiencing this on ionic 5

[rr-phillips]

also having trouble with this bug, ionic cli - 5.4.16
any solutions or work being done on this? @adamdbradley

[satyadeva9]

any update on this issue? Thanks in advance.

[delbertlarson]

I have the same issue, please let us know if someone figures a way to get around it. I know that 'topalavlad' had a suggestion, but I really don't understand how to implement his proposed fix. Anyone know?

[felipe-ff]

There is also an issue when using 24 hours format, as you roll the hour it goes back to 0 on it's own... basically broke my app for the users...

Wow over 1 year... maybe we should go for react.

[brandyscarney]

This issue was actually resolved by https://github.com/ionic-team/ionic-framework/pull/21997, but then I added in code to automatically switch between AM/PM when going to or from 12, because I thought that was how it had always worked in order to be most like native. I took another look at this issue and after making code reproductions to compare 4.3.0 to 5.3.0 it was apparent that this was introduced on accident, as mentioned in the second comment on this issue. This will be fixed by #22207 for version 5, and also fixed for version 4 via https://github.com/ionic-team/ionic-framework/pull/22208. Thanks!

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