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