Date Picker

Interactive calendar-based date selection component

Back to Home

Basic Date Picker

Simple date picker with calendar popup

Date Range Restriction

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

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

Inline Calendar

Always visible calendar without popup

Select a date

Month Year

Pre-selected Date

Date picker with default value set to today

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>