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 https://github.com/ionic-team/ionic-framework/issues/16630#issuecomment-1054346804 for more information.

Performance:

• [ ] #18679 #21836 #23034 #23964 - scrolling/inertia too sensitive/needs to be configurable

Design Issues:

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

Feature request:

• [ ] #15505 - Manipulate picker columns with mouse scroll wheel
• [ ] #22838 #23491 #23584 configure haptic feedback per platform/disable in picker and datetime

[madmacc]

I am still waiting on https://github.com/ionic-team/ionic-framework/issues/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 (https://github.com/ionic-team/ionic-framework/issues/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!