T templcn/ui
Componentdate-picker

Date Picker

A date picker component with range and presets.

Preview

A date picker component with range and presets.

May 2026
May 2026
Su
Mo
Tu
We
Th
Fr
Sa

Installation

Add this component to your project using the CLI.

templcn add date-picker

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.DatePicker(ui.DatePickerProps{Name: "date", Value: "2026-05-08"}) {
  @ui.Calendar(ui.CalendarProps{
    DOMProps: ui.DOMProps{Class: "rounded-md border"},
    Mode: "single",
    Selected: "2026-05-08",
  })
}

Composition

Use these parts together to build the component.

DatePicker
├── Calendar

Examples

Named examples and common variations.

Default

A date picker input with embedded calendar popover.

May 2026
May 2026
Su
Mo
Tu
We
Th
Fr
Sa
API Reference
PropTypeDefaultDescription
Modestring"single""single" or "range".
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type DatePickerProps struct {
	DOMProps
	Mode        string
	Name        string
	Value       string
	Range       string
	Placeholder string
	Open        bool
	DefaultOpen bool
}

func DatePicker(props DatePickerProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		ctx, ownChildren := childrenFromContext(ctx)
		open := props.Open || props.DefaultOpen
		attrs := attrsFromDOMProps(props.DOMProps, "date-picker", "grid gap-2")
		attrs["data-state"] = openState(open)
		if props.Mode != "" {
			attrs["data-mode"] = props.Mode
		}
		if props.Name != "" {
			attrs["data-name"] = props.Name
		}
		if props.Value != "" {
			attrs["data-value"] = props.Value
		}
		if props.Range != "" {
			attrs["data-range"] = props.Range
		}
		if props.Placeholder != "" {
			attrs["data-placeholder"] = props.Placeholder
		}
		if open {
			attrs["data-open"] = "true"
		}
		if props.DefaultOpen {
			attrs["data-default-open"] = "true"
		}
		children := templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
			if props.Name != "" {
				inputAttrs := templ.Attributes{"type": "hidden", "name": props.Name, "value": props.Value}
				if err := renderVoidElement(ctx, w, "input", inputAttrs); err != nil {
					return err
				}
			}
			return renderChildren(ctx, w, ownChildren)
		})
		return renderElement(ctx, w, "div", attrs, children)
	})
}

type DateRangePickerProps struct {
	DatePickerProps
}

func DateRangePicker(props DateRangePickerProps) templ.Component {
	return DatePicker(props.DatePickerProps)
}
Next: Dialog