Date Picker

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

Source Tailwind CSS JavaScript

Installation

templui add datepicker

Load the script once in your layout:

<head>
  @datepicker.Script()
</head>

Examples

With Label

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

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


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

Disabled

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

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

Date

Time

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

Select a date

Select a date from the calendar.

Select a valid date

package showcase

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