Ship faster with goilerplate • Get it now for $99 instead of $199

Time Picker

A native time selector with support for 12/24 hour formats.

Source Tailwind CSS JavaScript

Installation

templui add timepicker

Load the script once in your layout:

<head> @timepicker.Script() </head>

Examples

12h Format

With Label

With Custom Placeholder

With Selected Time

With Step Intervals

With Min/Max Range

With Form

Select a time from the dropdown.

API Reference

Required parameter
Hover for description

TimePicker

Time picker component for selecting time values with 12/24 hour format support.

Name Type Default
 
ID

Unique identifier for the time picker element.

 
string
 -
Class

Additional CSS classes to apply to the time picker.

 
string
 -
Attributes

Additional HTML attributes to apply to the time picker element.

 
templ.Attributes
 -
Name

Name attribute for the hidden input field.

 
string
 -
Value

Selected time value.

 
time.Time
 -
MinTime

Minimum selectable time. Times before this will be disabled.

 
time.Time
 -
MaxTime

Maximum selectable time. Times after this will be disabled.

 
time.Time
 -
Step

Minute intervals for selection (e.g., 5, 10, 15, 30). Must be a divisor of 60.

 
int
 
1
Use12Hours

Whether to use 12-hour format (AM/PM) or 24-hour format.

 
bool
 
false
AMLabel

Label for AM period in 12-hour format.

 
string
 
AM
PMLabel

Label for PM period in 12-hour format.

 
string
 
PM
Placeholder

Placeholder text when no time is selected.

 
string
 
Select time
Disabled

Whether the time picker is disabled and non-interactive.

 
bool
 
false
HasError

Whether the time picker has an error state (applies error styling).

 
bool
 
false