Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add date-range-picker

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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

Overview

The Date Range Picker lets users select a start and end date from a single calendar. It highlights the selected range (with a live hover preview while picking the end date), offers quick presets (Today, Last 7 days, Last 30 days, This month), supports min/max constraints, English/Italian/German locales, and binds to Livewire as a { from, to } object via wire:model.

Basic Usage

<x-aura::date-range-picker label="Period" wire:model="range" />

In your Livewire component, the bound property holds an object with from and to ISO dates:

public array $range = ['from' => null, 'to' => null];

public function applied()
{
    // $this->range['from'] === '2026-06-01'
    // $this->range['to']   === '2026-06-30'
}

Props

Prop Type Default Description
label string|null null Field label.
placeholder string dd/mm/yyyy – dd/mm/yyyy Input placeholder.
format string d/m/Y Display format for each endpoint.
separator string – String shown between the two dates.
min / max string|null null ISO bounds (Y-m-d) for selectable days.
presets bool true Show the quick-preset sidebar.
locale string en en, it, or de — localises day, month, and preset labels.
clearable bool true Show a clear button when a range is selected.
disabled bool false Disable the input.
error / hint string|null null Validation error / helper text.
size string md sm, md, or lg.

Hiding presets

<x-aura::date-range-picker wire:model="range" :presets="false" />

Localised

<x-aura::date-range-picker wire:model="range" locale="it" />

Accessibility

The calendar popover is a role="dialog" with aria-modal="true"; the trigger exposes aria-haspopup="dialog" and aria-expanded. Navigation buttons carry descriptive aria-labels.