ion-picker, collected features and bugs

[paulstelzer]

Collection of issues which are related to ion-picker.

February 28th, 2022 Update: Most datetime issues have been resolved with the release of Ionic 6. Moving forward this thread will only track the existing bugs that are specific to ion-picker. Please open a new issue for any other bugs. See #16630 (comment) for more information.

Performance:

• bug: ion-datetime scroll inertia/momentum to high #18679 bug: IonPicker on android is very slow. #21836 bug: picker column does not account for pressing when computing velocity #23034 bug: ion-picker performance is very poor with 1000 entries #23964 - scrolling/inertia too sensitive/needs to be configurable

Design Issues:

• Picker of ion-datetime not apply "md" mode in Ionic v4 #16717 ion-datetime ignores mode attribute #23336 - Picker of ion-datetime not apply "md" mode in Ionic v4

Feature request:

• Manipulate picker columns with mouse scroll wheel #15505 - Manipulate picker columns with mouse scroll wheel
• bug: picker giving haptic feedback on android, capacitor v3 #22838 feat: Allow disabling Haptic feedback for Ion-Picker or Ion-Datetime #23491 bug: date picker vibration issue with scroll  #23584 configure haptic feedback per platform/disable in picker and datetime

[WhatsThatItsPat]

Here's an additional feature request:
#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 - #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

[joel-daros]

@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/

[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 #18679 since I logged it July 2019.

[pciseran]

Hi,

ion-datetime's "displayFormat="YYYY" doesn't work, using instead "display-format" does it.

[Suxsem]

Any news about the performance issues?
Lag and inertia are the main issues here, thank you!

[sneko]

@liamdebeasi is there any plan for this same issue:

bug: ion-datetime scroll inertia/momentum to high #18679
bug: IonPicker on android is very slow. #21836
bug: #23034 - scrolling/inertia too sensitive/needs to be configurable

Just to sum up: when I scroll one of the 3 columns for a date, and I stop let's say on "15", for whatever reason it will scroll until "16" even if the "15" was well-aligned. It's really hard for users to get the good selection for a column with less than 2 attempts (that's their feedback).

Thank you,

[jorisbertomeu]

Hey guys, thanks for your incredible work, however, I have a lot of customers really impatient about issue #17526, opened for 3 years .... Without speaking about picker velocity #18679 which is really broken. I try to find other UI solution to replace this picker, but for a lot of cases, this component it the best solution. Our customers are getting more and more angry for more than 2 years .. it's starting to become really uncomfortable for our company to continue to use Ionic Framework, which is really stupid because it's just about UX/UI, but this is the quality of our app reflected by its user experience which is more and more bad (and incredible slow for old devices) ..

Thanks you very much,

[madmacc]

I am still waiting on #18679 also after I raised it over 2 years ago!
Is there a viable alternative?

[evgeniy-skakun]

@madmacc you can try this custom datepicker

async showDataTimePicker(timeValue, splitMinutes = false, tz = null) {
        const time = (tz ? (moment(timeValue).tz(tz).format('h,m,A')) : (moment(timeValue).format('h,m,A'))).split(',');
        const h = [];

        for (let i = 1; i <= 12; i++) {
            h.push({ text: i, value: i });
        }
        const m = [];

        if (splitMinutes) {
            m.push({ text: 0, value: 0 });
            m.push({ text: 15, value: 15 });
            m.push({ text: 30, value: 30 });
            m.push({ text: 45, value: 45 });
        } else {
            for (let i = 0; i < 60; i++) {
                m.push({ text: i, value: i });
            }
        }

        return new Promise(async (resolve, reject) => {
            const opts: PickerOptions = {
                buttons: [
                    {
                        text: 'Cancel',
                        role: 'cancel',
                        handler: (v) => {
                            resolve(null);
                        }
                    },
                    {
                        text: 'Done',
                        handler: (v) => {
                            const datePicker = tz ? moment().tz(tz) : moment();
                            datePicker.minute(v.m.value);
                            const hour = v.a.value === 'AM' ? v.h.value === 12 ? 0 : v.h.value : v.h.value === 12 ? 12 : v.h.value + 12;
                            datePicker.hour(hour);
                            resolve(datePicker.toISOString());
                        }
                    }
                ],
                cssClass: ['custome-datetime-picker'],
                columns: [
                    {
                        name: 'h',
                        options: h,
                        selectedIndex: +time[0] === 12 ? 11 : +time[0] - 1,
                    },
                    {
                        name: 'm',
                        options: m,
                        selectedIndex: +time[1]
                    },
                    {
                        name: 'a',
                        options: [
                            { text: 'AM', value: 'AM' },
                            { text: 'PM', value: 'PM' },
                        ],
                        selectedIndex: time[2] === 'AM' ? 0 : 1,
                    }
                ]
            };
            const picker = await this.pickerCtrl.create(opts);

            picker.present();
        });
    }

[liamdebeasi]

Hi everyone,

We have a brand new datetime component coming in Ionic 6 that will resolve a large number of the issues listed here. We plan on releasing Ionic 6 this year (2021).

To see a demo of the new datetime component, check out the Ionic Framework update from Ioniconf 2021: https://youtu.be/aafHvwRU-BU?t=1147

I am going to lock this thread for now since we have a good understanding of the areas of improvement for datetime, but I will update this thread when the new datetime component launches. Thank you!

[liamdebeasi]

Hi everyone,

I have updated the first post in this thread to show the remaining issues present with ion-picker.

As of Ionic 6, most datetime issues have been resolved due to the new form factor. As a result, this thread will now be dedicated to tracking the existing issues with ion-picker in Ionic 6. For any other issues, please open a new issue.

Thanks!

[sean-perkins]

Hello everyone 👋 since this issue is down to referencing a single remaining open ticket (#23034), we are going to close this issue in favor of that.

If that last remaining issue is sensitive to your application, feel free to upvote it (👍 ).

Thanks!