Date Picker
Calendar interface for selecting and formatting dates. Uses Calendar for date selection and Popover for the popup.
Jul
2026
package showcase
import "github.com/templui/templui/components/datepicker"
templ DatePickerDefault() {
<div class="w-full max-w-sm">
@datepicker.DatePicker()
</div>
}
Installation
templui add datepicker
Load the script once in your layout:
<head>
@datepicker.Script()
</head>
import "github.com/templui/templui/components/datepicker"
Load the script once in your layout:
<head>
@datepicker.Script()
</head>
Examples
With Label
Jul
2026
package showcase
import "github.com/templui/templui/components/datepicker"
templ DatePickerWithLabel() {
<div class="w-full max-w-sm space-y-2">
// @label.Label(label.Props{
// For: "date-picker-with-label",
// }) {
// Pick a date
// }
@datepicker.DatePicker(datepicker.Props{
ID: "xxxx",
})
</div>
}
Custom Placeholder
Jul
2026
package showcase
import "github.com/templui/templui/components/datepicker"
templ DatePickerCustomPlaceholder() {
<div class="w-full max-w-sm">
@datepicker.DatePicker(datepicker.Props{
Placeholder: "When is your birthday?",
})
</div>
}
Selected Date
Jul
2026
package showcase
import (
"github.com/templui/templui/components/datepicker"
"time"
)
templ DatePickerSelectedDate() {
<div class="w-full max-w-sm">
@datepicker.DatePicker(datepicker.Props{
Value: time.Now(),
})
</div>
}
Range
Jul
2026
package showcase
import (
"github.com/templui/templui/components/calendar"
"github.com/templui/templui/components/datepicker"
)
templ DatePickerRange() {
<div class="w-full max-w-sm">
@datepicker.DatePicker(datepicker.Props{
Mode: calendar.SelectionModeRange,
Placeholder: "Start date",
})
</div>
}
Disabled
Jul
2026
package showcase
import "github.com/templui/templui/components/datepicker"
templ DatePickerDisabled() {
<div class="w-full max-w-sm">
@datepicker.DatePicker(datepicker.Props{
Disabled: true,
})
</div>
}
Formats
Jul
2026
Jul
2026
Jun
2026
Jul
2026
Jul
2026
Jul
2026
package showcase
import (
"github.com/templui/templui/components/datepicker"
"github.com/templui/templui/components/label"
"time"
)
templ DatePickerFormats() {
<div class="w-full max-w-sm flex flex-col gap-4">
<div class="space-y-2">
@label.Label(label.Props{
For: "dp-default",
}) {
Default (Medium, en-US)
}
@datepicker.DatePicker(datepicker.Props{
ID: "dp-default",
Value: time.Now(),
})
</div>
<div class="space-y-2">
@label.Label(label.Props{
For: "dp-de-short",
}) {
Short Format (German)
}
@datepicker.DatePicker(datepicker.Props{
ID: "dp-de-short",
LocaleTag: datepicker.LocaleTagGerman,
Format: datepicker.FormatLOCALE_SHORT,
Value: time.Now(),
})
</div>
<div class="space-y-2">
@label.Label(label.Props{
For: "dp-es-long",
}) {
Long Format (Spanish)
}
@datepicker.DatePicker(datepicker.Props{
ID: "dp-es-long",
LocaleTag: datepicker.LocaleTagSpanish,
Format: datepicker.FormatLOCALE_LONG,
Value: time.Now().AddDate(0, 0, -30), // 30 days ago
Placeholder: "Seleccionar fecha",
})
</div>
<div class="space-y-2">
@label.Label(label.Props{
For: "dp-fr-full",
}) {
Full Format (French)
}
@datepicker.DatePicker(datepicker.Props{
ID: "dp-fr-full",
LocaleTag: datepicker.LocaleTagFrench,
Format: datepicker.FormatLOCALE_FULL,
Value: time.Now(),
})
</div>
<div class="space-y-2">
@label.Label(label.Props{
For: "dp-ja-medium",
}) {
Medium Format (Japanese)
}
@datepicker.DatePicker(datepicker.Props{
ID: "dp-ja-medium",
LocaleTag: datepicker.LocaleTagJapanese,
Format: datepicker.FormatLOCALE_MEDIUM,
Value: time.Now(),
})
</div>
<div class="space-y-2">
@label.Label(label.Props{
For: "dp-ar-short",
}) {
Short Format (Arabic - ar-SA)
}
@datepicker.DatePicker(datepicker.Props{
ID: "dp-ar-short",
LocaleTag: "ar-SA", // Using string literal for locale
Format: datepicker.FormatLOCALE_SHORT,
Value: time.Now(),
})
</div>
</div>
}
With Time
Jul
2026
package showcase
import (
"github.com/templui/templui/components/datepicker"
"github.com/templui/templui/components/input"
"github.com/templui/templui/components/label"
)
templ DatePickerWithTime() {
<div class="flex gap-4">
<div class="flex flex-col gap-3">
@label.Label(label.Props{
For: "date-picker",
Class: "px-1",
}) {
Date
}
@datepicker.DatePicker(datepicker.Props{
ID: "date-picker",
})
</div>
<div class="flex flex-col gap-3">
@label.Label(label.Props{
For: "time-picker",
Class: "px-1",
}) {
Time
}
@input.Input(input.Props{
Type: input.TypeTime,
ID: "time-picker",
Value: "10:30:00",
Class: "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
Attributes: templ.Attributes{
"step": "1",
},
})
</div>
</div>
}
Form
Jul
2026
Select a date from the calendar.
Select a valid date
package showcase
import (
"github.com/templui/templui/components/datepicker"
"github.com/templui/templui/components/field"
)
templ DatePickerForm() {
<div class="w-full max-w-sm">
@field.Field() {
@field.Label(field.LabelProps{
For: "date-picker-form",
}) {
Select a date
}
@datepicker.DatePicker(datepicker.Props{
ID: "date-picker-form",
HasError: true,
})
@field.Description() {
Select a date from the calendar.
}
@field.Error() {
Select a valid date
}
}
</div>
}
API Reference
Required parameter
Hover for description
DatePicker
Main date picker component that triggers the popover calendar.
| Name | Type | Default |
|---|---|---|
Unique identifier for the date picker component | | |
Additional CSS classes to apply to the trigger button | | |
Additional HTML attributes to apply to the trigger button | | |
Current selected date value | | |
Display format for the selected date | | |
BCP 47 Locale Tag for language and regional format | | |
Optional start of week passed to Calendar component. When nil, Calendar defaults to Monday. Use calendar.Sunday through calendar.Saturday constants. | | |
Placeholder text when no date is selected | | |
Whether the date picker is disabled | | |
Whether the date picker should display error styling | | |
Name attribute for the hidden input field | | |
Selection mode. Use calendar.SelectionModeRange for two-date range selection. | | |
Range end date (range mode only). | | |
Name attribute for the range end hidden input (range mode only). | | |
Placeholder for the range end date (range mode only). | | |