templUI Pro coming soon  

50% OFF Join Waitlist

Date Picker

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

Source
TailwindCSS
Vanilla JS

Installation

  1. Install the component

    templui add datepicker
  2. Add 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

Custom Placeholder

Selected Date

Disabled

Formats

Form

Select a date from the calendar.

Select a valid date

API Reference

Required parameter
Hover for description

DatePicker

Main date picker component that triggers the popover calendar.

Name Type Default
ID
string
randomID
Class
string
""
Attributes
templ.Attributes
nil
Value
time.Time
time.Time{}
Format
Format
locale-medium
LocaleTag
LocaleTag
en-US
Placeholder
string
Select a date
Disabled
bool
false
Required
bool
false
HasError
bool
false
Name
string
ID value