Laravel Date Range Picker Component

Pro

Single-calendar date range selection with in-range highlighting, quick presets, locale support, and Livewire binding to a from/to object.

A Date Range Picker built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::date-range-picker>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Date Range Picker is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

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

See the full API, props and live examples in the Date Range Picker documentation.

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.

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`.