TailView UI

Basic Date Picker

Simple date picker with calendar popup

Select Date

Date Range Restriction

Date picker with min/max date constraints (±30 days from today)

Select Date (Limited Range)

Date Range: Oct 05, 2025 to Dec 04, 2025

Inline Calendar

Always visible calendar without popup

Selected Date

Select a date

Month Year

Pre-selected Date

Date picker with default value set to today

Appointment Date

Features

Month Navigation

Navigate between months with arrow buttons

Date Restrictions

Set minimum and maximum date constraints

Today Shortcut

Quick button to select today's date

Clear Selection

Reset to empty state with clear button

Dark Mode

Fully styled for light and dark themes

Custom Events

Dispatches events for integration

Usage

Basic Usage

<div data-controller="datepicker">
  <input type="text" 
         data-datepicker-target="input"
         data-action="click->datepicker#toggle" />
  <div data-datepicker-target="calendar">
    <!-- Calendar UI -->
  </div>
</div>

With Date Constraints

<div data-controller="datepicker"
     data-datepicker-min-date-value="2025-01-01"
     data-datepicker-max-date-value="2025-12-31">
  <!-- Date picker UI -->
</div>

With Pre-selected Date

<div data-controller="datepicker"
     data-datepicker-selected-date-value="2025-11-02">
  <!-- Date picker UI -->
</div>