Ionic-framework: bug: Cannot change AM/PM input in ion-datetime

[godspeed529]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Cannot change AM/PM input in ion-datetime element.

Expected behavior:
Should be able to change AM/PM input in ion-datetime element.

Steps to reproduce:

1. cd into cloned github project directory
2. run ng serve
3. open website in browser
4. click rendered ion-datetime element
5. try to change am/pm input
6. see "Error parsing date: "[object Object]". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime" in console

Related code:

https://github.com/godspeed529/datetime-error-parsing-date

Other information:
This regression was introduced in v4.5.0

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.14.1 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[adamduren]

This regression makes uses of ionic with ion-datetime unusable. We had to issue an update reverted to @ionic/[email protected]. Will this be hotfixed outside of the normal 2 week release cycle?

[godspeed529]

@brandyscarney can this issue get some love also. It is blocking our 4.6.x upgrade.

[liamdebeasi]

Thanks for the issue! This isn't a regression, it's actually a bug that was uncovered when we fixed another bug oddly enough 🙂.

We are looking into a fix, and I will update this thread when I have more to share.

Thanks!

[adamduren]

@liamdebeasi I'm not sure I understand. I don't have this issue on 4.4.2 so in that case it appeared to be working as intended. If there was another bug that was fixed but as a result this happened then I would call that a regression.

[liamdebeasi]

We fixed a bug that landed in 4.5.0 where changing the selected hour/minute/second etc did not refresh the picker values according to the max and min constraints.

That functionality should have been in there from the start, but there was a bug that prevented it from working. Had that bug not been in there, this current bug would have appeared. The AM/PM switching appeared to work only because another part of the datetime functionality was broken.

In reality, switching AM/PM should update which date/time values are displaying in ion-datetime since it is possible a user sets the max value to be something like June 28, 2019 5:30pm. With June 27, 2019 selected, the user should be able to select past 5:30pm but not if June 28, 2019 is selected.

Hope this clears things up. I am currently investigating a fix, and I hope to have it land soon. Thanks!

[topalavlad]

This might require creating a different issue, but I think it's also wrong that changing the time to 12 changes the amPmColumn to pm automatically since the user has no way of selecting 0 as hour:

I think the consistent behavior would be to take into account amPm selection and setting the hour to 0 if am is selected instead of 12 changing it to pm

[topalavlad]

@liamdebeasi - hope you don't mind I added a PR for the AM/PM issue. I hope it helps.

I tried the maxValue feature but unfortunately that only works on HH format. I didn't check the code but from what I saw it just removes the options in the picker columns so for example if you set max="2019-07-01T17:06Z" but use format h:mm a, it won't restrict the hours for that date.

If you use max="2019-07-01T09:06Z", it will restrict the values in both hour and minute column to be lower than 9 and 6 but you will still be able to select 8PM so it's still incorrect.

[liamdebeasi]

@topalavlad Thank you! I will take a look at the PR soon.

[ShaneJohnsonCC]

@liamdebeasi do you have a timeline on this fix?

[corysmc]

Also ran into this issue, created a simple repro in codepen: https://codepen.io/corysmc/pen/ydQpbX?editors=1010

[CitizenBeta]

We're also running into this issue and is preventing us from a release. A fix for this would be greatly appreciated.

[ShaneJohnsonCC]

100% in the same boat @CitizenBeta

[CitizenBeta]

I just double checked and we're 100% on the latest version @ionic/[email protected], tested again and can reproduce the bug.

[liamdebeasi]

Hoping to merge in the PR with this fix later today. I’ll create a dev build once it is merged for people who need access to the fix before the next release. Thanks!

[ShaneJohnsonCC]

Thank you @liamdebeasi !!

[adamduren]

Thanks @liamdebeasi. Will the dev release be based off of the latest tag 4.6.2 versus master?

[liamdebeasi]

Hi everyone,

I have created a dev build with the AM/PM datetime fix. If people could test with their apps and let me know if the issue is resolved for them, that would be great! (This is based off the latest master, which has the 4.6.2 changes)

Using Angular:

npm i @ionic/[email protected]

Using Ionic Core:

npm i @ionic/[email protected]

Thanks!

[CitizenBeta]

@liamdebeasi THANK YOU! This does fix the AM/PM being able to be selected; however, it reverts back to AM when you change the day. Minor bug compared to not being able to change AM/PM and very much appreciate the dev build <3

[liamdebeasi]

@CitizenBeta Can you provide a test case of AM/PM reverting when changing the day? We are aware of an issue where that happens when changing the hour, but that seems to be unrelated to the changes made here.

[CitizenBeta]

@liamdebeasi my mistake, it was on changing the hour.

[corysmc]

That fixed it for us @liamdebeasi Thanks!! Will be releasing soon :)

[liamdebeasi]

Thanks! This issue has been fixed and will be released in Ionic 4.7.0. 🎉

[godspeed529]

@liamdebeasi Thanks for this fix. Can you provide a link to the issue, for tracking, where changing the hour reverts the AM/PM input? We are seeing this issue now and I don't remember this happening with Ionic 4.4.0.

[godspeed529]

@liamdebeasi Looks like this issue is there in Ionic 4.4.0.

[liamdebeasi]

@godspeed529 this issue was fixed in Ionic 4.7.0. Please update to that version to get the bug fix. Here's the full changelog: https://ionicframework.com/docs/release-notes

[godspeed529]

@liamdebeasi I am talking about your comment:

@CitizenBeta Can you provide a test case of AM/PM reverting when changing the day? We are aware of an issue where that happens when changing the hour, but that seems to be unrelated to the changes made here.

[liamdebeasi]

@godspeed529 seems to be related to this issue: https://github.com/ionic-team/ionic/issues/18908

Datetime issues are being tracked here: https://github.com/ionic-team/ionic/issues/16630

[topalavlad]

Added #18924 before I saw the last comment.

[godspeed529]

@liamdebeasi very good. i must say that every direct interaction i have had with team Ionic has been confidence inspiring.

that being said i am experiencing some issues upgrading to 4.7.1 and I am wondering whether they may be related to the recently added Angular 8 support. there is no way I can afford to upgrade to
Angular 8 at the moment considering the NgRx changes it would necessitate, so I am just curious about the risk entailed when using Ionic Angular in these circumstances. should i be concerned about using Ionic 4.7.1 with the latest Angular 7.2.x/NgRx 7.2.x?

thanks to you and your team for the awesome work and awesome product.

m.

[liamdebeasi]

@godspeed529 If you are running into issues, I would recommend creating a new issue and including steps to reproduce. We can take a closer look there, thanks! 🙂

[ShaneJohnsonCC]

@liamdebeasi Hey there! I have updated to the latest 4.7.1 now and I see that AM/PM are now selectable without any issues. But there still seems to be the issue of PM changing to AM when changing the hour. I am using the format "h mm a". Changing the minutes is fine, but if I change the hour and PM is selected, then it slides it back to AM

[nascarjake]

I have the same issue as @ShaneJohnsonCC after updating to 4.7.1 and following all angular 8 upgrade steps.
I can now select AM and PM without it glitching out, but anytime I change the hour while on AM it automatically switches to PM. Luckily at least now the user can go back and switch it to AM before submitting - but still very weird behavior

[ShaneJohnsonCC]

@liamdebeasi Why did this get closed? Do you open a new issue from our new issues?

[liamdebeasi]

@ShaneJohnsonCC The original issue "Cannot change AM/PM input" was fixed. Any additional issues are being tracked in the main datetime tracker: https://github.com/ionic-team/ionic/issues/16630

If you do not see your issue listed there, create a new issue and I can add it to the tracker. 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.