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>
}