MARKETPLACE
PLUGINS
APPLETIMEPICKER
AppleTimePicker logo

AppleTimePicker

Published August 2026
   •    Updated this week

Plugin details

A time picker element styled after the iOS wheel picker: two scrolling columns for hours and minutes, a rounded highlight bar
marking the centre row, and the selected value fading in as it
reaches the middle.

Built on native browser scrolling, so momentum, snapping and
touch feel match the system picker on iOS and Android instead of
approximating it. No external libraries are loaded.

FEATURES

Native feel
- Inertial scrolling with snap-to-row on touch, mouse wheel and
 trackpad
- Tap or click any row to scroll it to the centre
- Arrow key support for keyboard users
- Selected row is highlighted and enlarged; rows fade out towards
 the edges

Formats
- 24-hour mode, or 12-hour mode with an automatic AM/PM column
- Minute step of 1, 5, 15 or any custom interval
- Hours are always exposed as 0-23, so 12-hour mode needs no
 conversion in your workflows

Styling
- Transparent background by default — sits on any group, popup or
 image
- Configurable text, dimmed text, highlight and background colours
- Adjustable row height, font size, corner radius and number of
 visible rows
- Translucent highlight bar that reads correctly on both light and
 dark backgrounds

Data
- Four exposed states, updated as the user scrolls:
 hour (number), minute (number), value (text "08:03"),
 display (text as shown, e.g. "08:03 AM")
- "Value changed" event, fired once scrolling stops rather than on
 every frame
- "Set time" element action to move the picker from a workflow

Setup
- No API keys, accounts or external services
- Drop it on a page, set the height, done

$8

One time  •  Or  $4/mo

stars   •   0 ratings
1 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

VibeBox logo
VibeBox
Joined 2022   •   1 Plugin
View contributor profile

Instructions

LIVE DEMO Preview: https://appletimepicker.bubbleapps.io/version-test?debug_mode=true
Editor:  https://bubble.io/page?type=page&name=index&id=appletimepicker&tab=tabs-1

SETUP

Step 1 — Install the plugin
Go to Plugins > Add plugins, find "AppleTimePicker" and install it.
No API keys or account setup are required.

Step 2 — Add the element to a page
In the editor, open the elements palette, pick "AppleTimePicker"
and draw it on your page.

Step 3 — Set the height (important)
The element height must equal: Visible rows x Item height.
With the default values (7 rows x 44px) set the height to 308px.
If it doesn't match, rows are clipped at the top and bottom.
Width is up to you — the columns split it evenly.

Step 4 — Set the starting time
In the property editor, set "Initial hour" (0-23) and
"Initial minute". These are only used on load; after that the
picker keeps whatever the user selected.

Step 5 — Adjust the look
The background is transparent by default, so the picker sits on
whatever is behind it. Set "Bg color" only if you want a solid fill.
On a light background change "Text color" to a dark value —
the default is white.
"Visible rows" must be an odd number so one row sits in the centre.
Optional: "Minute step" (e.g. 5 or 15), "Font size", "Radius".

Step 6 — Read the selected value
The element publishes four states, updated as the user scrolls:
 hour     number, always 0-23, even in 12-hour mode
 minute   number
 value    text, e.g. "08:03"
 display  text, as shown on screen, e.g. "08:03 AM"
Reference them like: AppleTimePicker A's value

Step 7 — Run a workflow on change
Add a workflow: When AppleTimePicker A's value changed.
The event fires once scrolling stops, not on every frame.
Example: Make changes to a thing > time = AppleTimePicker A's value

Step 8 — Set the time from a workflow
Use Element Actions > Set time.
Pass Hour as 0-23 and Minute as 0-59.
If "Minute step" is above 1, the picker snaps to the nearest
available minute.

NOTES
Works with touch, mouse wheel, click and arrow keys.
To save into a date field, build the date from Current date/time
plus the hour and minute states instead of parsing the text value.

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble