Time Picker
A native time selector with support for 12/24 hour formats.
package showcase
import "github.com/templui/templui/components/timepicker"
templ TimePickerDefault() {
<div class="w-full max-w-sm">
@timepicker.TimePicker()
</div>
}
Installation
templui add timepickerLoad the script once in your layout:
<head>
@timepicker.Script()
</head>import "github.com/templui/templui/components/timepicker"Load the script once in your layout:
<head>
@timepicker.Script()
</head>Examples
12h Format
package showcase
import "github.com/templui/templui/components/timepicker"
templ TimePicker12Hour() {
<div class="w-full max-w-sm">
@timepicker.TimePicker(timepicker.Props{
Use12Hours: true,
})
</div>
}
With Label
package showcase
import (
"github.com/templui/templui/components/label"
"github.com/templui/templui/components/timepicker"
)
templ TimePickerLabel() {
<div class="flex flex-col gap-2 w-full max-w-sm">
@label.Label(label.Props{
For: "time-picker-label",
}) {
Select a time
}
@timepicker.TimePicker(timepicker.Props{
ID: "time-picker-label",
Use12Hours: true,
})
</div>
}
With Custom Placeholder
package showcase
import "github.com/templui/templui/components/timepicker"
templ TimePickerCustomPlaceholder() {
<div class="w-full max-w-sm">
@timepicker.TimePicker(timepicker.Props{
Placeholder: "When do you want to meet?",
})
</div>
}
With Selected Time
package showcase
import (
"github.com/templui/templui/components/timepicker"
"time"
)
templ TimePickerSelectedTime() {
<div class="w-full max-w-sm">
@timepicker.TimePicker(timepicker.Props{
Value: time.Now(),
})
</div>
}
With Step Intervals
package showcase
import "github.com/templui/templui/components/timepicker"
templ TimePickerStep() {
<div class="w-full max-w-sm">
@timepicker.TimePicker(timepicker.Props{
Step: 15,
Placeholder: "Select time (15 min intervals)",
})
</div>
}
With Min/Max Range
package showcase
import (
"github.com/templui/templui/components/timepicker"
"time"
)
templ TimePickerMinMax() {
{{
// Create min and max times for business hours (9 AM to 5 PM)
now := time.Now()
minTime := time.Date(now.Year(), now.Month(), now.Day(), 9, 0, 0, 0, now.Location())
maxTime := time.Date(now.Year(), now.Month(), now.Day(), 17, 0, 0, 0, now.Location())
}}
<div class="w-full max-w-sm">
@timepicker.TimePicker(timepicker.Props{
MinTime: minTime,
MaxTime: maxTime,
Step: 30,
Placeholder: "Business hours (9AM-5PM)",
})
</div>
}
With Form
Select a time from the dropdown.
Please select a time
package showcase
import (
"github.com/templui/templui/components/form"
"github.com/templui/templui/components/timepicker"
)
templ TimePickerForm() {
<div class="w-full max-w-sm">
@form.Item() {
@form.Label(form.LabelProps{
For: "time-picker-form",
}) {
Select a time
}
@timepicker.TimePicker(timepicker.Props{
ID: "time-picker-form",
Name: "time-picker-form",
HasError: true,
})
@form.Description() {
Select a time from the dropdown.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
Please select a time
}
}
</div>
}
API Reference
TimePicker
Time picker component for selecting time values with 12/24 hour format support.
| Name | Type | Default |
|---|---|---|
Unique identifier for the time picker element. | | - |
Additional CSS classes to apply to the time picker. | | - |
Additional HTML attributes to apply to the time picker element. | | - |
Name attribute for the hidden input field. | | - |
Selected time value. | | - |
Minimum selectable time. Times before this will be disabled. | | - |
Maximum selectable time. Times after this will be disabled. | | - |
Minute intervals for selection (e.g., 5, 10, 15, 30). Must be a divisor of 60. | | |
Whether to use 12-hour format (AM/PM) or 24-hour format. | | |
Label for AM period in 12-hour format. | | |
Label for PM period in 12-hour format. | | |
Placeholder text when no time is selected. | | |
Whether the time picker is disabled and non-interactive. | | |
Whether the time picker has an error state (applies error styling). | | |
