ion-datetime scroll inertia / momentum too high

Viewed 666

On a physical device (iOS) the picker does not stop as expected at slow scroll speeds, it seems to have too much inertia. It is subtle but is different to the native iOS time picker. I am using ionic 4.1

e.g. if you try to set an alarm on an iOS device. It scrolls a little too long at low speeds and makes it more error-prone to pick the correct time.

Does anyone know of a way to change the behavior of this control to match the native one on iOS?

I know it is not good practice to change code in the node_modules folder, however, I found the variables I think I need to change here: \node_modules@ionic\core\dist\collection\components\picker-column\picker-column.js

const PICKER_OPT_SELECTED = 'picker-opt-selected';
const DECELERATION_FRICTION = 0.97
const MAX_PICKER_SPEED = 90;
const TRANSITION_DURATION = 150;

Source: https://github.com/ionic-team/ionic/blob/master/core/src/components/picker-column/picker-column.tsx#L398

But changing them (or even commenting out the whole file) does not seem to do anything.

My code is similar to the following:

<ion-datetime 
              [(ngModel)]="start"
              displayFormat="HH:mm" 
              minuteValues="0,15,30,45" 
              picker-format="HH:mm"
              (ionChange)="onChangeStartTime($event)"
</ion-datetime>
1 Answers

These snippets are the uncompiled version of Ionic Core.

I think to get changes to these constants to be recognised in a running app you will need to rebuild your copy of Ionic Core.

If you look in the repositories contributing.md it shows how to build it, which is a pretty standard process.

I think what you need to do is:

  1. Edit the const lines that you want inside your node_module
  2. Follow the contributing.md guide to install and build that copy of Ionic Core in the project
  3. Celebrate?

As we discussed over on Facebook, this is not a perfect solution. Editing core files is not recommended as it will be overwritten the next time you upgrade.

Related