Time Input Showcase
time_full
S
M
T
W
T
F
S
{
"epoch": 1735689600,
"granularity": null,
"year": 2025,
"month": 1,
"day_of_month": 1,
"day_of_week": 3,
"day_of_year": 1,
"week_of_year": 1,
"hour": 0,
"minute": 0,
"second": 0,
"timezone": "UTC",
"datetime": "2025-01-01T00:00:00",
"datetime_zoned": "2025-01-01T00:00:00GMT[UTC]",
"datetime_utc": "2025-01-01T00:00:00Z",
"content": "1/1/2025 0:00:00"
} epoch
S
M
T
W
T
F
S
1735689600
calendar_date
S
M
T
W
T
F
S
null
datetime
S
M
T
W
T
F
S
Hour
Minute
"2025-01-01T00:00:00"
datetime_utc
S
M
T
W
T
F
S
"2025-01-01T00:00:00Z"
datetime_zoned
S
M
T
W
T
F
S
"2025-01-01T00:00:00GMT[UTC]"
year
Year
null
year_month
Year
null
hour_minute
Hour
Minute
null
hour_minute_second
Hour
Minute
Second
null
year_week
S
M
T
W
T
F
S
null
Component Documentation
Component Name
TimeInput
Builder Function Name
create_time_input_manager
Description
Builds a time/date/datetime/period selection input with flexible granularity, calendar picker, optional time zone support, and more.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| label | string or null | A text label displayed for the time input. | |
| is_popover | boolean | true | If true, the time picker is shown in a popover when clicking a toggle button. If false, it’s displayed inline. |
| format | string | time_full | Determines the interpretation of the time object. For example, 'datetime_zoned' or 'calendar_date'. Controls which UI sections appear (calendar, hours, etc.). |
| granularity_options | array of strings | year,month,week,day,hour,minute,second | Which granularities are allowed, e.g. ['day','hour','minute']. The user can select from them if `is_show_granularity_dropdown` is true. |
| granularity | string | day | Specifies the current granularity (e.g. 'day','hour','minute','second'). |
| val | object or null | The starting value to set. `create_time_input_manager` will parse it as a time object. If null, means 'no value'. | |
| is_show_granularity_dropdown | boolean | false | If true, displays a dropdown to change the time granularity. |
| picker_year | number or null | current year | The calendar’s initial highlighted year. |
| picker_month | number or null | current month (1–12) | The calendar’s initial highlighted month. |
| is_disabled | boolean | false | If true, the time input is not interactive. |
| on_finish | function or null | Callback called when the user finalizes (clicking 'Finish'). Receives the time value. Typically returns an object like `{ is_success: boolean, ... }`. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Initializes internal state and managers, called once with the config. | No Params | |
| set_val | Set the time/datetime/period value from outside. Provide an object matching the relevant format or null. | No Params | |
| set_to_now | Convenient method to set the value to the current system time. | No Params | |
| set_year | Sets the year. Also updates the calendar year pickers. | No Params | |
| set_month | Sets the month (1–12). Also updates the calendar. | No Params | |
| set_day_of_month | Sets a new day of the month. (1–31) Also moves the selected date in the calendar. | No Params | |
| set_hour | Sets hour in [0..23]. | No Params | |
| set_minute | Sets minute in [0..59]. | No Params | |
| set_second | Sets second in [0..59]. | No Params | |
| set_timezone | Sets the time zone (e.g. 'America/Los_Angeles'). | No Params | |
| set_picker_data | Update `picker_year` and `picker_month` used by the internal calendar UI. | No Params | |
| handle_left_month | Calendar arrow method for shifting the visible month left. | No Params | |
| handle_right_month | Calendar arrow method for shifting the visible month right. | No Params | |
| finish | Closes the popover and calls the `on_finish` callback if provided. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | object or null | The current time/datetime/period value. It's structured according to the specified format & granularity, e.g. `{ year, month, day_of_month, hour, minute, timezone, ... }` or null. |
| popover_manager | object | Controls the popover if `is_popover=true`. You can open or close the popover with `manager.popover_manager.open()` or `manager.popover_manager.close()`. |
| main_toggle_button_manager | object | If `is_popover=true`, this is the toggle button’s manager used to open the time picker. |
| set_null_button_manager | object | Clicking it clears the value to null. |
| finish_button_manager | object | The button manager for finalizing the time selection (running `on_finish`). |
