Laravel Date Picker Component

Free · MIT

Calendar-based date selection input with min/max constraints, time selector, locale support, and customizable format.

A Date 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-picker>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

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

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

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.

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