Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Date Picker component provides a calendar popup for selecting dates. It supports configurable display formats, min/max date constraints, optional time selection, locale-aware day/month names, and full Livewire integration via wire:model. Built with Alpine.js for a smooth, client-side calendar experience.

Basic Usage

<x-aura::date-picker
    label="Date"
    name="date"
/>

Props

Prop Type Default Description
label string|null null Label text displayed above the input.
placeholder string 'dd/mm/yyyy' Placeholder text when no date is selected.
format string 'd/m/Y' Display format for the selected date.
wireFormat string 'Y-m-d' Format sent to Livewire via wire:model.
min string|null null Earliest selectable date (e.g., '2026-01-01').
max string|null null Latest selectable date (e.g., '2026-12-31').
disabled bool false Disable the input.
clearable bool true Show a clear button when a date is selected.
withTime bool false Show time selector (hour and minute inputs).
locale string 'en' Locale for day/month names: en, it, de.
error string|null null Error message displayed below the input.
hint string|null null Hint text displayed below the input.
size string 'md' Input size: sm, md, lg.

Examples

Simple Date Selection

<x-aura::date-picker
    label="Birth Date"
    name="birth_date"
    format="d/m/Y"
    placeholder="DD/MM/YYYY"
/>

With Min and Max Constraints

<x-aura::date-picker
    label="Appointment Date"
    min="2026-02-15"
    max="2026-06-30"
    placeholder="Choose a date..."
    wire:model="appointmentDate"
/>

With Time Selector

<x-aura::date-picker
    label="Event Date & Time"
    :withTime="true"
    format="d/m/Y H:i"
    placeholder="Select date and time..."
    wire:model="eventDateTime"
/>

Livewire Integration

<!-- Blade view -->
<div class="space-y-4">
    <x-aura::date-picker
        label="Start Date"
        wire:model.live="startDate"
        :max="$endDate"
        placeholder="Select start date..."
    />

    <x-aura::date-picker
        label="End Date"
        wire:model.live="endDate"
        :min="$startDate"
        placeholder="Select end date..."
    />
</div>

// Livewire component
class ReportFilter extends Component
{
    public ?string $startDate = null;
    public ?string $endDate = null;

    public function updatedStartDate(): void
    {
        if ($this->endDate && $this->startDate > $this->endDate) {
            $this->endDate = null;
        }
        $this->dispatch('dates-changed');
    }

    public function updatedEndDate(): void
    {
        $this->dispatch('dates-changed');
    }
}

Booking Date

<x-aura::date-picker
    label="Booking Date"
    min="{{ now()->format('Y-m-d') }}"
    max="{{ now()->addYear()->format('Y-m-d') }}"
    wire:model="bookingDate"
    placeholder="Select a date..."
/>

Slots

Slot Description
default Not used. The calendar popup is generated internally.

Accessibility

  • The input has role="combobox" with aria-haspopup="dialog".
  • The calendar popup uses role="dialog" with aria-modal="true".
  • Date cells use role="gridcell" with aria-selected for the chosen date.
  • Disabled dates (outside min/max range) have aria-disabled="true".
  • Arrow keys navigate between days in the calendar grid.
  • Page Up/Down navigate between months.
  • Enter or Space selects the focused date.
  • Escape closes the calendar popup.
  • Month and year navigation buttons have descriptive aria-label attributes.
  • The label is associated with the input via for/id attributes.