How to create a scrolling time wheel?

11 years ago • updated by 11 years ago • 3

I need to have a user select a time. I was interested in them being able to use a scrolling time wheel, like what you see in the iOS calendar app when you create an event and choose to change the date/time.

The goal would be to allow them to pick the hour, minutes and AM/PM.

I tried to use a pager to enable the "feel" of scrolling, but couldn't figure out how to get an event to fire for the hour or minute that was in the center of the scroll wheel window when the wheel stopped. The idea of the center would be that the user could see a couple of hours above and below the center hour in the wheel as they spin through.

Any thoughts on how this can be done would be appreciated!

Vote

Replies 3
Oldest first
- Newest first
- Oldest first

11 years ago

Help me clarify. You want to create a time wheel similar to our datepicker object?

11 years ago

That was very gentle way to respond :) Thank you.

Ummm...Lets just say I looked right past that many times; guess I need to slow down and read a tad bit more.

The datepicker is what I was looking for...don't know why I didn't see it.

I gave it a quick test and it seems to be a good fit. I like being able to turn off the date and only have time.

I struggled a bit with the time only scrolling capability. It seems that the scrolling up doesn't work for me if I start below the blue center area with the swipe on either hour or minute.

Also, you can't change the AM/PM by scrolling it. You have to circle the "hour" wheel around until it switches AM/PM.

Sorry for the ridiculous starting question. Hopefully my scrolling issues listed here are as easily resolved.

Thanks!
Steve

11 years ago

Hm, perhaps you have another object partially blocking it? I just tested the following with no scrolling issues:

<panel name="case" alias="CASE" width="100%" height="100%" align="center" valign="center" background="000000"> <datepicker name="selectdate" width="300" height="300" time="only"></datepicker> </panel>

The AM/PM should be free flowing, but also switch when you move from 11 to 12 and back again.

Customer support service by UserEcho