Ionic Framework - Time Picker - Enable endless scrolling

Question

I want the time picker (https://ionicframework.com/docs/api/datetime) to rotate endless.

If I select hours I start at 0 and end at 23. When I’m at 23 I have to scroll all the way up to get to 0.

What I want is when I’m at 23 to just scroll one unit further down so it starts at 0 again so that I could theoretically scroll down endlessly.

Luxemburg

Answer 1

I don't believe there's also someway to do this kind of thing in ion-datetime component yet. Something you can do is to bind a variable which repeats those values [0-23] and set on hourValues​ attribute

Marlenemarler

Answer 2

You should use the Timeless Picker package.

Installations:

npm i --save timeless-picker

npm i --save-dev @types/hammerjs

Add the styles to index.html:

<link href="https://cdn.jsdelivr.net/npm/timeless-picker/src/styles/styles.css" rel="stylesheet">

Import TimelessPickerModule to app.module in order to use the package:

Then you can use the component. Based on the photo you provided, you should have the following properties:

<timeless-time-picker
 [hourFormat]='hours24'
 [startTime]='23:59:00'
 (timeChangeIso)=newTimeEvent()
>
</timeless-time-picker>

You can use (timeChangeSimple) instead of (timeChangeIso) if you don't want to receive the new time in ISO format. This will return it as a string 'HH:mm:ss'.

There are many other customizable properties. Please refer to the documentation: https://github.com/eliasab16/timeless-picker

Rolon

Answer 3

There are actually no workarounds for this feature without changing the library.

Open feature request for this feature: https://github.com/ionic-team/ionic-framework/issues/26268

Latest update on Ionic 8.1 datetime https://ionic.io/blog/announcing-ionic-8-1

I hope Ionic adds this feature soon.

Zworykin