Ionic-framework: ion-datetime: Bugs and feature requests - Collected issues

[paulstelzer]

Collection of issues which are related to ion-datetime (if i missed a issue, please let me know) @manucorporat

Bugs (selecting date):

• [x] #17060 #17521 - min and max prop not working correctly
• [x] #16733 - non-existing date can be selected
• [x] #15794 - When setting min value in the ion-datetime too for example today (28 september 2018) i can no longer select anything below 28, anything below september even though 1 januari 2019 should be perfectly fine.
• [x] #15452 - The fields in the selector do not update while the popup is open when a max value is set.
• [x] #15397 - ion-datetime should open, respecting the set min and max completely
• [x] #14233 #17510 - Being able to select the correct day of month after changing the month.
• [x] #14877 - Datetime does not display a value, when the value choosen equals the max picker value
• [x] #14732 - ion-datetime allows invalid values
• [x] #17977 - Datetime doesn't set the correct date if format doesn't have a time
• [x] #19175 #19260 #20026 - datetime automatically switches from AM to PM (or vice versa) when changing hour up/down
• [x] #18924 - changing hours changes AMPM column
• [ ] #16487 #20095 #20567 - When setting the display-format to "DDDD D MMMM YYYY" it results in the input box showing Wednesday 28 November 2018. However when changing the date the date wheel still shows 28 november 2018
• [ ] #17526 - selecting date triggers Reachability on iPhone X and up
• [ ] #18908 #21545 - changing AM/PM does not update hours according to min/max
• [ ] #22056 incorrect values being shown when using HH:mm and setting min/max
• [ ] #22553 seconds are not accounted for when setting min/max

Bugs:

• [x] #16723 - format as MM only
• [x] #16234 - Seems like you are able to chose the wrong date for example: 31.2.2018. When I translate this into the ISO format, it even outputs me the date 3.3.2018 instead.
• [x] #14609 - (this could be resolved) (PR #17443)
• [x] #16912 - AM /PM
• [x] #15850 - Colliding with other ionic elements
• [ ] #17634 - content behind datetime/picker should not be scrollable
• [ ] #17720 - Different values being returned when running on Android vs web and iOS
• [ ] #19796 - AM/PM not showing up with hours in 24 hours time
• [ ] #21431 #21810 - datetime not working well with accessibility settings
• [ ] #21797 - AM/PM not showing up with "A h:mm"
• [ ] #22535 - ionBlur usage is for the button toggle, not the datetime picker itself (I.e. the implementation/behavior is confusing)

Performance:

• [ ] #16681 #17497 (duplicate) - lag when scrolling especially on year with format MMM DD, YYYY
• [ ] #16079 - Slow if minute can be set
• [ ] #18679 #21836 - scrolling/inertia too sensitive/needs to be configurable

Design Issues:

• [x] #16717 - Picker of ion-datetime not apply "md" mode in Ionic v4
• [x] #18761 - ion-datetime text not aligned with ion-input
• [ ] #16631 - Edge issue

Feature request:

• [x] #16436 #15792 (that's a duplicate - one could be closed) - Start at today's date or allow us to supply a starting pointl (current it's starting on max date)
• [ ] #16279 - translateable AM PM
• [ ] #15505 - Manipulate picker columns with mouse scroll wheel
• [ ] #17416 - Expose more ionic date time/picker controller methods
• [ ] #17482 - Add method to clear datetime set value
• [ ] #18122 - Use arrow keys to change day/month/year HH:SS in datetime

[WhatsThatItsPat]

Here's an additional feature request:
https://github.com/ionic-team/ionic/issues/15505

[paulstelzer]

Thank you! Added it. @manucorporat and I think that the mentioned issues are not critical, so it will be fixed and added after the v4 final

[Newbie012]

Another bug - https://github.com/ionic-team/ionic/issues/16723

[soumyanildas]

Thank you! Added it. @manucorporat and I think that the mentioned issues are not critical, so it will be fixed and added after the v4 final

Hello there! We are actually using ionic v4 for one of our projects and we are hoping to launch it soon, but this issue is postponing that launch. Any timeline as to when the final version would be released?

Thanks

[MrSparklle]

@DasCode94 If you don't want to wait until all bugs being fixed, I recommend to replace ion-datetime by the native component date-picker bellow:

https://ionicframework.com/docs/native/date-picker/

[carstenbaumhoegger]

hello,
I've found another bug related to ion-datetime: https://github.com/ionic-team/ionic/issues/17720

Would be great if you could fix this aswell!

[liamdebeasi]

Hi everyone,

I have merged a PR that fixes a number of datetime issues (#14233 #14732 #15452 #15794 #16733 #17060 #17510 #17521). I have published a nightly build of Ionic, so it would be great if people could test it out and let me know if they see any issues with the fix. Thanks!

Install the latest nightly: npm i @ionic/core@dev @ionic/angular@dev

We appreciate everyone's patience as we resolve these issues!

[pwespi]

Another bug here: https://github.com/ionic-team/ionic/issues/17868 with a fix here: https://github.com/ionic-team/ionic/pull/17869

[maxtacco]

@liamdebeasi, I've tested 4.2 and a lot of issues got resolved, thank you and everyone else involved. But, I still have one issue with February that limits the number of days to 28 instead of 29 when there is no year specified. I think if year is omitted February should have 29 days (can't really do much in this case when it comes to validation).

<ion-datetime displayFormat="MMMM DD" pickerFormat="MMMM DD" placeholder="Pick a date" formControlName="birthday"></ion-datetime>

[kevin-barrientos]

Please add this issue to the list

[astec]

@liamdebeasi, is here a bug or feature request regards allowing to change day/month/year with keyboard only using arrows? I would expect a current scroll item (day/month/year) to be selected with left-right arrows and to change it value with up-down arrows.

[liamdebeasi]

Hi @astec,

If you do not see your issue listed in the first post, please open a bug report/feature request, and we can add it to the list.

[terranmarine]

Hello,
I think that min value still limits the available pickable dates since I updated to 4.2 and still having this issue.
I did a test with setting min to 2019-04-27T14:01:25.976Z and max to 2019-05-03T14:01:25.976Z to see that the issue is still there.
see attached.
https://screenshots.firefox.com/uHmM9oZU6UYzDAek/localhost

[liamdebeasi]

Hi @terranmarine,

If you are running into a bug, please create a new bug report, and I can add it to the list once it is verified.

Thanks!

[astec]

@liamdebeasi I've created feature request for usage of arrow key here - https://github.com/ionic-team/ionic/issues/18122

[terranmarine]

@liamdebeasi
Hello, just submitted a new issue.
https://github.com/ionic-team/ionic/issues/18124

Alex.

[penseeartificielle]

Hi, do you have also a bug with colors ? all my buttons and current date picked are in white (primary color) and i can't change any of the css of my datepicker...
So, can we change the colors (buttons and picker) ?
.picker-opt.picker-opt-selected {color: #F3F3F3;}
(can't override this)

thank you in advance, i really need my datepicker to work to go to prod :p

ionic version : 3.9.2

EDIT : i found the solution thanks to this post https://github.com/VitaliiBlagodir/cordova-plugin-datepicker/issues/245

you have to put your code in variables.scss and not in the page.scss
and you have to use these variables https://github.com/ionic-team/ionic/blob/master/core/src/components/picker/picker.md.vars.scss

[3alampro]

Hello any news on how to fix this issue #17497 we can't ship our applications because we use the date picker and it's causes huge performance issue when we click to pick date and start scrolling we tried many display format or other tweaks with no success on fixing it

[topalavlad]

@maxtacco you should add a separate issue for the 29th of February problem and link it here. The reason you only see 28 days for February is that if the year column is not visible, ionic uses the current year for validation.

Not sure how easy it would be to fix but maybe using a random leap year (or a more permissive one) instead of the current one for validation would be an acceptable hack.

[REPTILEHAUS]

Heres another one, its a ui issue when scrolling spotted in chrome on osx and while running on iPhone X https://github.com/ionic-team/ionic/issues/18641

[topalavlad]

16079 can be marked as solved. The columns are quickly populated when changing the year to 2020 in this codepen (@ionic/[email protected]).

[vancuren]

I have a parsing error when selecting AM/PM. I'm unable to choose PM. It appears to be happening on the docs page example as well.

You can recreate the issue using the demo https://ionicframework.com/docs/api/datetime and try to select PM.

This is my first bug report so I apologize ahead of time if I didn't follow the correct format.

[kotran88]

16279 translate AM / PM is still not working?

[achrafscoorpion22]

ion-datetime still lag on my app . on android device
ionic 5.2.1.
huawei p9 lite

[jhavinay]

#16436 #15792 (that's a duplicate - one could be closed) - Start at today's date or allow us to supply a starting pointl (current it's starting on max date)

The issue was closed. But reading through i couldn't find how to specify a default start-date as something other than today's date.
Am i missing something or it was just missed?
An additional property to specify the startdate will be nice.

[ShaneJohnsonCC]

Hello, both #19175 #19260 are closed and I'm not able to comment there, so I'm asking here. Is there any head way on this? We are 4.10.0 and since 4.7.1 it's still doing the same thing. Thanks! :)

[piorot]

What is a Real status of #18679. It looks it is closed. However on issue specific site it seems to closed only as it was listed here. I believe it is not truly closed.

[tmk1991]

#18908 - changing AM/PM does not update hours according to min/max - Still exists. Anyone navigate this?

[CitizenBeta]

I can also confirm this on Ionic 4

[smcardle]

18679 - Is not fixed in [email protected]

This is causing negative feedback from our users as it's an annoying user experience. The scrolling does not stop as quickly as expected compared to the native dateTime pickers.

Any chance we can get an update on this ?

[madmacc]

18679 - Is not fixed in [email protected]

This is causing negative feedback from our users as it's an annoying user experience. The scrolling does not stop as quickly as expected compared to the native dateTime pickers.

Any chance we can get an update on this ?

This was my issue. Just checking in to see if there was a fix. I guess not!

[ShaneJohnsonCC]

18679 - Is not fixed in [email protected]

This is causing negative feedback from our users as it's an annoying user experience. The scrolling does not stop as quickly as expected compared to the native dateTime pickers.
Any chance we can get an update on this ?

This was my issue. Just checking in to see if there was a fix. I guess not!

I third this!! Been tracking ion-datetime issues since Ionic V3. I know there are a lot of things to address that are more important than this, but it would be really helpful if we had an update or deadline on this. UX is make or break.

[pritamsoni-hsr]

datetime picker has this creepy haptics bug when you try to past scroll a certain time limit, ideally it should just become static when it reaches the limits, but instead you can interact with it and it keeps firing haptic event.
This is a small fix, can add a conditional expression before calling hapticSelectionEnd.

[sushant-agiliad]

My issue is more precisely related to #17060

Issue:

In _ion-datetime_ when _max_ date is defined lets say for all future dates. Calendar opens fine as expected lets say on data 10-Aug-2020.
Scrolling makes an issue. Till now all dates above 10 Aug are disabled which is fine. Scroll the year to 2019, even then Aug 11 and above are disabled.
It do depends upon speed of scroll so i am sure its missing event relation in it.
Scroll year a bit more to 2018 and it works fine for 2019 too.

Expectation:

Selection of year must update view with respect to Min/Max provided instantaneously.

Probable fix:

It is definitely threading / queuing related issue. Updating the UI with respect to min / max after every reselection of date of date (which is already being done) in systematic manner will ensure the fix.

--
Good luck with this. Expecting an update soon.
Please reach out if more details are required.

[rightmentor]

Please can we have an update for #18679

[cathypark]

Please fix scroll performance issue #18679

[gonewayword]

Hey all!

@brandyscarney So, I came here to see if there was any progress on the bug for AM/PM switching when you select 12 or 1, but it looks like that's intentional, from your comments and work in your latest update?

I.e., I have an ion-datetimepicker in this format: h:mm:A

When user selects 12, the last item on the list, it switches AM to PM (unless already on PM), and when they select 1, the first item, it switches from PM to AM (unless already on AM).

This comment makes it look like that's intentional?

"// If the existing meridiem is am, we want to switch to pm if it is either
// A) coming from 0 (12 am)
// B) going to 12 (12 pm)"

Thanks!

[brandyscarney]

@gonewayword Yes this is intended to match how native works in iOS and Android. The only difference is that in iOS the hours loop around indefinitely, which I think would be the ideal behavior (you can see this in action in the iOS Calendar app when creating a new event). It should not change when selecting 1 though, only going from 1-11 AM -> 12 PM, 1-11 PM -> 12 AM or vice versa. Here's the latest behavior (not yet released):

vs what's in the last version 5.3.2 (taken from the datetime docs):

[brandyscarney]

@gonewayword Actually, I was wrong! I went back and looked at how datetime worked on 4.3.0 based on the comments on that issue and saw that it did not have this automatic switching prior to 4.4.0 which introduced it but in a _broken_ way. I thought that we had it implemented in order to be as close to native as possible, but it looks like this was not ever working that way, so I will be removing it and fixing issue https://github.com/ionic-team/ionic-framework/issues/18924.

[cathypark]

@brandyscarney #18679
Please fix this UX problem...I waited for almost a year. I'm also seriously considering replacing with the native time picker plugin. Can I know the timeline?

[hermitdemschoenenleben]

I agree, #18679 is really annoying

[shannahutch]

The ngModel inside the ion-datetime isn't always initializing when the page loads? Is this in any of the bugs or is anyone aware of it?

[danishin]

@brandyscarney
Please fix #18679. Our users are getting pretty furious over this..
This is simple ux but takes massive toll on our users' usability since our app uses datetime-picker heavily

[ohhyeongseok]

@brandyscarney
Please fix #18679~ I hate smooth scroll

[janghoikoo]

@brandyscarney
I am also facing problem about scrolling (#18679)

[madmacc]

I have a customer still waiting for the fix to https://github.com/ionic-team/ionic-framework/issues/18679 since I logged it July 2019.