blatui

Components

Date Picker

A date picker component with a calendar popover.

php artisan blatui:add date-picker 
<x-ui.date-picker value="2025-06-12" />

Custom Presets

{{-- Mix named keys with fully custom entries. Named keys resolve client-side
     relative to today; custom entries pass literal 'Y-m-d' ranges or dates. --}}
<x-ui.date-picker
    mode="range"
    name="fiscal"
    :presets="[
        'last7Days',
        'last30Days',
        'thisMonth',
        'yearToDate',
        'Q1 2026' => ['from' => '2026-01-01', 'to' => '2026-03-31'],
    ]"
/>

Limits

{{-- A date range limited to a 2–14 night stay. Out-of-bounds selections show an error and
     keep the popover open until corrected. --}}
<x-ui.date-picker mode="range" name="stay" :min-nights="2" :max-nights="14" />

Min Max

{{-- min/max are date bounds. Default out-of-range="disable": dates outside [10–20 Jun] are
     struck-through and not selectable. --}}
<x-ui.date-picker name="d" min="2026-06-10" max="2026-06-20" default-month="2026-06-10" />

Min Max Flag

{{-- out-of-range="flag": dates outside [10–20 Jun] stay selectable but show in red, and picking
     one flags the field invalid (red trigger + error) instead of preventing it. --}}
<x-ui.date-picker name="d" min="2026-06-10" max="2026-06-20" out-of-range="flag" default-month="2026-06-10" />

No Outside Days

{{-- show-outside-days="false" hides the greyed-out prev/next-month days (and collapses any
     week row that's entirely outside the current month). Works on date-picker, datetime-picker
     and the calendar directly. --}}
<x-ui.date-picker name="d" :show-outside-days="false" />

Presets

{{-- Quick-pick shortcuts beside the calendar. `:presets="true"` enables sensible
     defaults for the mode; applying one keeps the popover open so you can fine-tune. --}}
<x-ui.date-picker mode="range" name="reporting" :presets="true" />

Range

{{-- A from–to date range in one popover (two-month calendar by default).
     Submits as dates[from] / dates[to] ("Y-m-d"). --}}
<x-ui.date-picker mode="range" name="dates" :value="['from' => '2025-06-09', 'to' => '2025-06-26']" />

Week Starts Monday

{{-- Start the week on Monday. `week-start` accepts a day name ("sunday", "monday", …)
     or an integer 0–6 (0 = Sunday). Works on date-picker, datetime-picker and calendar. --}}
<x-ui.date-picker name="d" week-start="monday" />

With Dropdown

{{-- A date of birth picker with month/year dropdowns for fast navigation. --}}
<div
    x-data="{
        open: false,
        value: null,
        get label() { return this.value ? new Date(this.value + 'T00:00:00').toLocaleDateString('en-US', { day: '2-digit', month: 'long', year: 'numeric' }) : ''; },
    }"
    @calendar-change="value = $event.detail; open = false"
    class="relative"
>
    <x-ui.button variant="outline" x-ref="trigger" x-on:click="open = !open"
        class="w-48 justify-between font-normal" ::class="!value && 'text-muted-foreground'">
        <span x-text="label || 'Select date'"></span>
        <x-lucide-chevron-down class="size-4 opacity-50" />
    </x-ui.button>
    <div x-show="open" x-cloak x-anchor.bottom-start.offset.4="$refs.trigger"
        @click.outside="open = false" @keydown.escape.window="open = false"
        class="bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border shadow-md">
        <x-ui.calendar mode="single" caption-layout="dropdown" default-month="2000-01-01" class="border-0" />
    </div>
</div>

With Label

<div class="flex flex-col gap-2">
    <x-ui.label for="dob" class="px-1">Date of birth</x-ui.label>
    <x-ui.date-picker name="dob" placeholder="Select date" />
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public ?string $date = null;

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.date-picker wire:model="date" />

Single date in default mode; range mode submits via name[from]/name[to].

API Reference

Props, slots and exposed methods for <x-ui.date-picker>.

Props

Prop Type Default Description
mode string 'single' Pick one date or a from–to range. Range submits two values and shows two months by default.
single range
name string — Form field name for the hidden input. In range mode it submits as name[from] and name[to]; otherwise a single name.
value string|array — Initial selection. Single mode: a "Y-m-d" string. Range mode: an array shaped ['from' => "Y-m-d", 'to' => "Y-m-d"]. See Range value below.
placeholder string — Trigger text shown when nothing is selected. Defaults to "Pick a date" (single) or "Pick a date range" (range).
numberOfMonths int — Number of calendar months shown side by side. Defaults to 1 in single mode and 2 in range mode.
captionLayout string 'label' Calendar header style: a static month/year label, or month/year dropdowns for fast navigation.
label dropdown
weekStart int 0 First day of the week (0 = Sunday, 1 = Monday).
defaultMonth string — The month ("Y-m-d") the calendar opens on when there is no selected value.
min string — Earliest selectable date ("Y-m-d"). Dates before it are disabled (or flagged, per outOfRange).
max string — Latest selectable date ("Y-m-d"). Dates after it are disabled (or flagged, per outOfRange).
minNights int — Range mode only. Minimum number of nights between the from and to dates.
maxNights int — Range mode only. Maximum number of nights between the from and to dates.
outOfRange string 'disable' How to treat dates outside [min, max]: disable prevents picking them; flag allows the pick but shows a red error.
disable flag
showOutsideDays bool true Show leading and trailing days from adjacent months to fill the calendar grid.
width string — Tailwind width class for the trigger and popover. Defaults to w-[240px] (single) or w-[300px] (range).
presets bool|array — Quick-pick shortcuts shown beside the calendar. Pass true for sensible defaults per mode, or an array of named keys and/or custom entries. Named keys: today, yesterday, tomorrow, thisWeek, lastWeek, last7Days, last14Days, last30Days, thisMonth, lastMonth, thisYear, yearToDate, allTime. Custom entries: 'My label' => ['from' => "Y-m-d", 'to' => "Y-m-d"] or ['date' => "Y-m-d"]. Dates resolve client-side relative to today, so they never go stale.

Range value

Prop Type Default Description
from string — Start date of the range, as "Y-m-d".
to string — End date of the range, as "Y-m-d".