Basic
A labeled field that opens a teleported calendar.
<div class="flex w-full max-w-xs justify-center">
<x-components.date-picker label="Departure date" />
</div>
Date Picker
x-date-picker
A calendar date picker bound to a read-only input, with month navigation, today/selected highlighting and several display formats. The calendar is teleported so it never clips. Works with wire:model.
php artisan components:add date-picker
Live — running in a real Laravel app in your browser
Live preview unavailable right now — showing the server render.
Examples
Custom format
Pre-fill a value and control how it displays.
<div class="flex w-full max-w-xs justify-center">
<x-components.date-picker label="Start date" value="2026-01-15" format="YYYY-MM-DD" />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
text |
—
|
Optional label above the field. |
placeholder
|
text |
Select a date
|
Placeholder shown before a date is chosen. |
format
|
select M d, Y · MM-DD-YYYY · DD-MM-YYYY · YYYY-MM-DD · D d M, Y |
M d, Y
|
How the selected date is formatted. |
value
|
text |
—
|
Initial date value (parseable date string). |
name
|
text |
—
|
Name for a hidden input, for plain form submission. |
Works with
`components:add date-picker` pulls these in automatically.