Date Picker
Calendar interface for selecting and formatting dates. Uses Popover for the popup.
package showcase
import "github.com/axzilla/templui/internal/components/datepicker"
templ DatePickerDefault() {
<div class="w-full max-w-sm">
@datepicker.DatePicker()
</div>
}
Installation
Install the component
templui add datepickerAdd the JavaScript to your layout
@datepicker.Script() @popover.Script()Call this template in your base layout file (e.g., in the <head> section).
Examples
With Label
package showcase
import "github.com/axzilla/templui/internal/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
package showcase
import "github.com/axzilla/templui/internal/components/datepicker"
templ DatePickerCustomPlaceholder() {
<div class="w-full max-w-sm">
@datepicker.DatePicker(datepicker.Props{
Placeholder: "When is your birthday?",
})
</div>
}
Selected Date
package showcase
import (
"github.com/axzilla/templui/internal/components/datepicker"
"time"
)
templ DatePickerSelectedDate() {
<div class="w-full max-w-sm">
@datepicker.DatePicker(datepicker.Props{
Value: time.Now(),
})
</div>
}
Disabled
package showcase
import "github.com/axzilla/templui/internal/components/datepicker"
templ DatePickerDisabled() {
<div class="w-full max-w-sm">
@datepicker.DatePicker(datepicker.Props{
Disabled: true,
})
</div>
}
Formats
package showcase
import (
"github.com/axzilla/templui/internal/components/datepicker"
"github.com/axzilla/templui/internal/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>
}
Form
Select a date from the calendar.
Select a valid date
package showcase
import (
"github.com/axzilla/templui/internal/components/datepicker"
"github.com/axzilla/templui/internal/components/form"
)
templ DatePickerForm() {
<div class="w-full max-w-sm">
@form.Item() {
@form.Label(form.LabelProps{
For: "date-picker-form",
}) {
Select a date
}
@datepicker.DatePicker(datepicker.Props{
ID: "date-picker-form",
HasError: true,
})
@form.Description() {
Select a date from the calendar.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
Select a valid date
}
}
</div>
}