Hi everyone,
I’m trying to build a scrollable selection UI similar to the time picker in iOS/Android clock apps, but for the web (HTML). I think it’s a great interaction pattern for touch devices.
I’ve looked at <input type="time">, which does show a similar picker on iPhone Safari, but it’s very limited: hours are capped at 24, AM/PM can’t be removed, no support for custom options or arbitrary ranges.
I managed to create a working prototype using quite a bit of CSS and JavaScript: https://ramsicandra.com/poc/scroll_select.html
I’m wondering if there’s a simpler or more native approach to achieve this, ideally without with lesser CSS/JS?
0 comments
—
Ask HN: How to create a scrollable picker (like iOS/Android clock) in HTML? · HackerTrans
I’ve looked at <input type="time">, which does show a similar picker on iPhone Safari, but it’s very limited: hours are capped at 24, AM/PM can’t be removed, no support for custom options or arbitrary ranges.
I managed to create a working prototype using quite a bit of CSS and JavaScript: https://ramsicandra.com/poc/scroll_select.html
I’m wondering if there’s a simpler or more native approach to achieve this, ideally without with lesser CSS/JS?