Datepicker

Stable

Interactive date picker component using Cally web components with popover functionality for single, range, and multi-date selection.

API Reference

Attributes

Attribute	Description	Type	Default
`id`	Unique identifier — auto-generated via `{% new_id %}` if not provided	string	`auto`
`name`	Name used in form events and `date-change` event detail; defaults to the component ID	string	`id value`
`label`	Label text displayed on the trigger button	string	`"Pick a date"`
`value`	Initial date value in `YYYY-MM-DD` format	string	`""`
`color`	Button color theme	string	`""`
`variant`	Button style variant	string	`""`
`size`	Button size	string	`"md"`

Events

Event	Description	Detail	Bubbles
`date-change`	Fired when a date is selected from the calendar. Provides structured data for easy form integration.	`{ name, value }`	yes

color

primary secondary accent neutral success warning info error

variant

outline ghost soft

size

xs sm md lg xl

calendar slot

calendar-date calendar-range calendar-multi

Popover trigger: the trigger button is a native <button> with popovertarget pointing to the calendar popover, making it fully keyboard accessible (Tab to focus, Enter/Space to open, Escape to close).

Calendar navigation: the underlying Cally web components support full keyboard navigation — arrow keys move between days, Page Up/Down move between months, and Home/End jump to the start or end of a week.

Labels: always provide a descriptive label so screen readers can announce the purpose of the date picker control.

Event data: the date-change event bubbles up so you can attach a single listener at a form level to handle multiple date pickers without needing per-element event binding.

Examples

Usage


<c-datepicker name="birthdate" label="Select Birthday">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

Basic Datepicker

<!-- Auto-generated ID (no id attribute needed) -->
<c-datepicker label="Select Date">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

<!-- Custom ID (when you need specific control) -->
<c-datepicker id="birthday-picker" label="Choose Birthday">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

Alpine.js Integration

Current value:

<div x-data="{ selectedDate: '2024-12-25' }">
  <c-datepicker label="Pick a date">
    <calendar-date class="cally"
      x-init="value = selectedDate"
      :today="selectedDate"
      @change="selectedDate = $el.value">
      <calendar-month></calendar-month>
    </calendar-date>
  </c-datepicker>
  <p>Selected: <span x-text="selectedDate"></span></p>
</div>

Event Handling

Last Event

Name:

Value:

No events yet — select a date

Event Log (last 5)

No events logged yet

<div x-data="{
  handleDateChange(event) {
    console.log('Date changed:', event.detail);
    // event.detail: { name: 'field-name', value: '2024-12-25' }
  }
}" @date-change="handleDateChange($event)">
  <c-datepicker name="myDate" label="Select a date">
    <calendar-date class="cally">
      <calendar-month></calendar-month>
    </calendar-date>
  </c-datepicker>
</div>

Colors

<c-datepicker color="primary" label="Primary">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

<c-datepicker color="success" label="Success">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

Variants

<c-datepicker variant="outline" color="primary" label="Outline">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

<c-datepicker variant="ghost" color="primary" label="Ghost">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

<c-datepicker variant="soft" color="primary" label="Soft">
  <calendar-date class="cally">
    <calendar-month></calendar-month>
  </calendar-date>
</c-datepicker>

Sizes

<c-datepicker size="xs" color="primary" label="Extra Small">
  <calendar-date class="cally"><calendar-month></calendar-month></calendar-date>
</c-datepicker>

<c-datepicker size="sm" color="primary" label="Small">
  <calendar-date class="cally"><calendar-month></calendar-month></calendar-date>
</c-datepicker>

<c-datepicker size="lg" color="primary" label="Large">
  <calendar-date class="cally"><calendar-month></calendar-month></calendar-date>
</c-datepicker>

Date Range Selection

<c-datepicker color="primary" label="Choose date range">
  <calendar-range class="cally">
    <calendar-month></calendar-month>
  </calendar-range>
</c-datepicker>

Multiple Months View

<!-- Two month range picker -->
<c-datepicker color="accent" size="lg" label="Select from two months">
  <calendar-range class="cally" months="2">
    <div class="flex flex-col md:flex-row gap-4">
      <calendar-month></calendar-month>
      <calendar-month offset="1"></calendar-month>
    </div>
  </calendar-range>
</c-datepicker>

Multi-Date Selection

<!-- Single month multi-date selection -->
<c-datepicker color="warning" label="Choose multiple dates">
  <calendar-multi class="cally">
    <calendar-month></calendar-month>
  </calendar-multi>
</c-datepicker>

<!-- Two month multi-date selection -->
<c-datepicker color="secondary" variant="outline" size="lg" label="Select available days">
  <calendar-multi class="cally">
    <div class="flex flex-col md:flex-row gap-4">
      <calendar-month></calendar-month>
      <calendar-month offset="1"></calendar-month>
    </div>
  </calendar-multi>
</c-datepicker>