## Elements Included
This plugin includes two elements:
1. Time Picker Wheel Selector
A visual input for selecting a validated time.
2. Time Calculator
A non-visual utility for adding minutes to a time and returning the calculated result.
---
# Time Picker Wheel Selector
## Quick Start
1. Add the "Time Picker Wheel Selector" element to your Bubble page.
2. Set the desired size and appearance in Bubble's Appearance tab.
3. Configure the available time range:
- Minimum Time
- Maximum Time
- Interval Minutes
4. Create workflows using the exposed states or the "When the selected time changes" event.
Example configuration:
Minimum Time: 08:00
Maximum Time: 18:00
Interval Minutes: 15
This creates valid selections such as:
08:00
08:15
08:30
08:45
...
17:45
18:00
---
## Value Configuration
### Initial Time
Use the Initial Time property to define an initial value.
Example:
09:30
The expected format is:
HH:mm
Examples:
09:30
14:15
23:45
When a dynamic Bubble value changes, the picker synchronizes with that value.
This makes it possible to connect a Time Calculator result to a second Time Picker automatically.
---
## Minimum Time and Maximum Time
Use these properties to limit the available selection range.
Example:
Minimum Time: 08:00
Maximum Time: 17:30
The picker automatically disables invalid hour/minute combinations outside this range.
Important:
The current version requires Minimum Time to be earlier than or equal to Maximum Time.
Supported:
08:00 to 18:00
Not supported:
22:00 to 02:00
---
## Interval Minutes
Choose the available minute increments:
5
10
15
30
60
Example with a 15-minute interval:
00
15
30
45
Example with a 30-minute interval:
00
30
Example with a 60-minute interval:
00
The selector only allows minute values compatible with the configured interval.
---
## Picker-Only Mode
By default, Allow Manual Input is disabled.
In this mode:
• Clicking the field opens the selector.
• Clicking the clock icon opens the selector.
• Users cannot type a time manually.
• Only valid times available in the wheels can be selected.
This is the recommended mode for booking, availability and scheduling forms because it guarantees that the selected value respects the configured range and minute interval.
---
## Allow Manual Input
Enable Allow Manual Input only if users should be able to type directly into the field.
Manual input is normalized automatically.
Examples:
930 becomes 09:30
1616 becomes 16:16
A manually entered value is accepted only when it:
• Is a valid 24-hour time;
• Respects Minimum Time;
• Respects Maximum Time;
• Respects Interval Minutes.
For example, with an interval of 15 minutes:
16:00 is valid
16:15 is valid
16:30 is valid
16:16 is invalid
---
## Confirm and Cancel Behaviour
The wheel selector keeps changes temporary until the user presses Confirm.
• Confirm: saves the selected hour and minute, updates states and triggers the change event.
• Cancel: discards temporary wheel changes.
• Clicking outside the panel: closes the panel and discards temporary wheel changes.
• Pressing Escape: closes the panel and discards temporary wheel changes.
---
## Clear Behaviour
Enable Allow Clear to show the clear button when a time is selected.
Clicking the clear button:
• Removes the selected time;
• Clears selected time states;
• Triggers the selected time changed event.
---
## Required Behaviour
Enable Required when the field must have a value.
The exposed state is_valid becomes:
yes — when a valid time is selected
no — when the field is empty and Required is enabled
Use this state to control form validation, button availability or workflow conditions.
---
## Button and Icon Appearance
The following optional appearance properties allow complete control over the action buttons:
Confirm button:
• Confirm Button Color
• Confirm Text Color
• Confirm Border Color
• Confirm Hover Color
• Confirm Hover Text Color
• Confirm Button Label
Cancel button:
• Cancel Button Color
• Cancel Text Color
• Cancel Border Color
• Cancel Hover Color
• Cancel Hover Text Color
• Cancel Button Label
Input icons:
• Clock Icon Color
• Clock Icon Hover Color
• Clear Icon Color
• Clear Icon Hover Color
Example:
Confirm Button Label: OK
Confirm Button Color: #3b9df2
Confirm Hover Color: #2563eb
Confirm Text Color: #ffffff
Cancel Button Label: Back
Cancel Button Color: #fb7185
Cancel Hover Color: #ef4444
Cancel Text Color: #ffffff
Clock Icon Color: #2563eb
Clear Icon Color: #ef4444
When a custom property is left empty, the element uses its documented fallback colour.
---
## Language
Use the Language property to choose interface labels.
| Value | Language |
|-------|----------|
| pt | Portuguese |
| en | English |
Portuguese labels:
Hora
Minutos
Cancelar
Confirmar
English labels:
Hour
Minutes
Cancel
Confirm
Custom Confirm and Cancel labels override the language defaults.
---
## Time Picker Exposed States
| State | Type | Description |
|-------|------|-------------|
| selected_time | text | Selected time in HH:mm format |
| selected_hour | number | Selected hour, from 0 to 23 |
| selected_minute | number | Selected minute, from 0 to 59 |
| selected_minutes | number | Total minutes since 00:00 |
| is_valid | yes/no | Whether the field currently has a valid value |
| is_open | yes/no | Whether the selector panel is open |
Example:
Selected Time: 08:30
Selected Hour: 8
Selected Minute: 30
Selected Minutes: 510
---
## Time Picker Events
### When the selected time changes
Triggered when:
• The user confirms a new time;
• The user clears the selected time;
• A valid manually typed time is committed, when manual input is enabled.
Use this event to save the value, update availability, calculate durations or continue a booking workflow.
### When the time picker is opened
Triggered when the wheel selection panel opens.
### When the time picker is closed
Triggered when the wheel selection panel closes.
---
## Reset Relevant Inputs
Enable the Bubble plugin option:
"Add a reset function to wipe the content of the element on Reset actions"
The Time Picker supports Bubble's native Reset relevant inputs workflow action.
When reset:
• The selected time is cleared;
• The selector panel is closed;
• All selected time states are cleared;
• is_valid respects the Required configuration.
---
# Time Calculator
## Purpose
Time Calculator is a non-visual element that adds a number of minutes to a base time.
Use it to calculate an end time automatically from a selected start time.
Example:
Base Time: 23:35
Minutes to Add: 30
Result Time: 00:05
Day Offset: 1
---
## Configuration
Add the Time Calculator element to the page and configure:
### Base Time
A time in 24-hour format.
Expected format:
HH:mm
Examples:
09:30
14:15
23:45
The Base Time can be dynamic.
Typical setup:
Time Picker Start's selected_time
### Minutes to Add
The number of whole minutes to add to Base Time.
Supported range:
0 to 10,080 minutes
This represents up to 7 days.
Examples:
10
30
60
90
480
1440
2880
Negative values, decimal values and values above 10,080 are invalid.
---
## Automatic Start and End Time Setup
A common use case is automatically deriving an end time from a start time.
1. Add a Time Picker for the start time.
2. Add a Time Calculator.
3. Add a second Time Picker for the end time.
4. Configure the Time Calculator:
Base Time = Time Picker Start's selected_time
Minutes to Add = 30
5. Configure the end Time Picker:
Initial Time = Time Calculator's result_time
Result:
Start Time: 23:35
Minutes to Add: 30
End Time: 00:05
Day Offset: 1
Whenever the Start Time or Minutes to Add changes, the Time Calculator recalculates and the End Time picker receives the new Initial Time dynamically.
---
## Time Calculator Exposed States
| State | Type | Description |
|-------|------|-------------|
| result_time | text | Calculated time in HH:mm format |
| result_hour | number | Calculated hour, from 0 to 23 |
| result_minute | number | Calculated minute, from 0 to 59 |
| result_minutes | number | Minutes since 00:00 for the calculated time |
| day_offset | number | Number of complete days crossed during the calculation |
| is_valid | yes/no | Whether Base Time and Minutes to Add are valid |
Examples:
| Base Time | Minutes to Add | Result Time | Day Offset |
|-----------|----------------|-------------|------------|
| 09:32 | 10 | 09:42 | 0 |
| 19:34 | 30 | 20:04 | 0 |
| 23:35 | 30 | 00:05 | 1 |
| 09:00 | 1440 | 09:00 | 1 |
| 22:30 | 2880 | 22:30 | 2 |
---
## Day Offset
The result time always stays within a 24-hour day.
When the calculation passes midnight, use day_offset to identify the number of days crossed.
Example:
Base Time: 23:35
Minutes to Add: 30
Result Time: 00:05
Day Offset: 1
In Bubble, you can display a message only when the result is on a later day:
When Time Calculator's day_offset > 0
Suggested text:
The end time occurs on the next day.
For multi-day durations, use:
Ends after Time Calculator's day_offset days.
---
## Invalid Calculator Values
The Time Calculator publishes:
result_time = empty
is_valid = no
when:
• Base Time is empty or invalid;
• Base Time is not in valid 24-hour time format;
• Minutes to Add is negative;
• Minutes to Add is a decimal value;
• Minutes to Add is greater than 10,080.
**Demo Page**
https://nobubble-48765.bubbleapps.io/version-test/time_picker?debug_mode=true**Editor Page**
https://bubble.io/page?id=nobubble-48765&tab=Workflow&name=time_picker&type=page## Owner Name
**Gilsénio Ferreira**
Built on Bubble
