Time Picker granularity

I've incorporated the the time picker into my app and it's working fine. However, one minute resolution is much more than I need for this project. Things would be a lot cleaner if I could only present the user with options for 0, 15, 30, and 45 minutes after every hour. Is there a way I can set the time picker to only give options for 15 minute intervals?




  • While it is not included as functionality, it is fairly simple to put this functionality in due to the inheritance nature of Enyo: http://jsfiddle.net/eF4cc/

    I achieved this result by looking at the code for the TimePicker (https://github.com/enyojs/onyx/blob/master/source/TimePicker.js) and creating a new kind called IntervalTimePicker which inherits from TimePicker. Then, I overrode the initDefaults() method, which, as you can see in the source, is used by TimePicker to render the components, to call my minuteIntervalChanged method which destroys the existing minutePicker client controls and then rebuilds them based on our interval value.
  • Sorry, the first link should be http://jsfiddle.net/eF4cc/1/, since I changed the property name to be more specific and to allow for possible expansion into hour intervals and so forth.
  • @arthur, thanks! That's perfect. I wouldn't be disappointed if that functionality made its way into production enyo. I can now choose my time interval and it seems that's how it should be.
  • One last (I hope) question. I am creating these pickers on the fly and I can successfully pass a time to the picker and the hour is set correctly, but the minute is always 00. I noticed this behavior in your fiddle as well. The hour is correct, but the minute is always 00. How can I have the current (or value I pass) minute, rounded to the nearest minuteInterval be displayed?
  • I actually put that together a few days after I posted the original response, so as to keep in line with the original design of TimePicker but I didn't post that link here.

  • Magnificent, and thanks for all of the commenting so I can go through it and understand what you are doing.
Sign In or Register to comment.