Date Picker

Calendar interface for selecting and formatting dates. Uses Calendar for date selection and Popover for the popup.

Source Tailwind CSS JavaScript

Installation

Install the component
```
templui add datepicker
```
Add the JavaScript to your layout
```
@datepicker.Script()
@calendar.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/templui/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/templui/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/templui/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/templui/templui/internal/components/datepicker"

templ DatePickerDisabled() {
	<div class="w-full max-w-sm">
		@datepicker.DatePicker(datepicker.Props{
			Disabled: true,
		})
	</div>
}

Formats

Default (Medium, en-US)

Short Format (German)

Long Format (Spanish)

Full Format (French)

Medium Format (Japanese)

Short Format (Arabic - ar-SA)

package showcase

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

With Time

Date

Time

package showcase

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

Select a date

Select a date from the calendar.

Select a valid date

package showcase

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

API Reference

Required parameter

Hover for description

DatePicker

Main date picker component that triggers the popover calendar.

Name	Type	Default
`ID` Unique identifier for the date picker component	`string`	`randomID`
`Class` Additional CSS classes to apply to the trigger button	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger button	`templ.Attributes`	`nil`
`Value` Current selected date value	`time.Time`	`time.Time{}`
`Format` Display format for the selected date	`Format`	`locale-medium`
`LocaleTag` BCP 47 Locale Tag for language and regional format	`LocaleTag`	`en-US`
`StartOfWeek` Optional start of week passed to Calendar component. When nil, Calendar defaults to Monday. Use calendar.Sunday through calendar.Saturday constants.	`*calendar.Day`	`nil`
`Placeholder` Placeholder text when no date is selected	`string`	`Select a date`
`Disabled` Whether the date picker is disabled	`bool`	`false`
`HasError` Whether the date picker should display error styling	`bool`	`false`
`Name` Name attribute for the hidden input field	`string`	`ID value`

Menu

Getting Started

Components

Date Picker

Installation

Examples

API Reference

DatePicker