Time Picker

Installation

Install the component
```
templui add timepicker
```
Add the JavaScript to your layout
```
@timepicker.Script()
@popover.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

12h Format

package showcase

import "github.com/templui/templui/internal/components/timepicker"

templ TimePicker12Hour() {
	<div class="w-full max-w-sm">
		@timepicker.TimePicker(timepicker.Props{
			Use12Hours: true,
		})
	</div>
}

With Label

Select a time

package showcase

import (
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/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/internal/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/internal/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/internal/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/internal/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

Select a time from the dropdown.

Please select a time

package showcase

import (
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/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

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`

Menu

Getting Started

Components

Installation

Examples

API Reference

TimePicker