If you’re building a scheduling or booking system in Bubble and need users to select only time (no date) in 24-hour format, here’s a custom approach I used that gives full flexibility — without plugins.
What I Needed:
- 24-hour time picker (e.g., 13:30, 18:00)
- 30-minute intervals
- Ability to filter by time ranges (e.g., between 9:00 and 18:00)
- Store and sort times easily
How I Built It Using Option Sets
1. Created an Option Set: Times
Till 23:30 PM
2. Set These Attributes for Each Option:
Sample Option Example (for 1:30 PM):
- Display:
1:30 PM - 24 hour display:
13:30 - Hour:
13 - Minute:
30 - Time as minutes:
810 - Increment filter:
[810](optional, helpful for between filters)
How I Use It in My App
Dropdown Setup:
- Choices Source:
All Times - Option Caption:
Current option's 24 hour display - Sorted by:
Time as minutes
Filter by Range (e.g., show only office hours 9 AM–6 PM):
This option's Time as minutes ≥ 540
and
This option's Time as minutes ≤ 1080
Comparing Start and End Time:
If the user selects a start time, you can filter the end time dropdown to only show options where:
This option's Time as minutes > Start Time's Time as minutes
Why This Works Well:
- No plugin required
- Fully supports 24-hour and AM/PM formats
- Filterable and sortable using numbers
- Easily extendable (e.g., to 15-minute intervals later)
Hope this helps others building custom time selection features without relying on plugins. This method gives full control and works great for scheduling apps.