blatui

Components

Date & Time Picker

Pick a date and a time together — single or range — in one popover.

php artisan blatui:add datetime-picker 
<x-ui.datetime-picker name="published_at" value="2026-06-06T10:30" />

Min Max

{{-- Bounded by a full datetime: nothing before Jun 10, 09:00 or after Jun 20, 17:00.
     The calendar disables out-of-window days; on the edge days the time bound is enforced
     (an error shows and "Done" is disabled until the selection is valid). --}}
<x-ui.datetime-picker
    name="slot"
    min="2026-06-10T09:00"
    max="2026-06-20T17:00"
    time-variant="select"
    hour-cycle="24"
/>

Range

<x-ui.datetime-picker
    mode="range"
    name="window"
    :value="['from' => '2026-06-06T09:00', 'to' => '2026-06-08T17:30']"
/>

Range Limits

{{-- Range constrained to 2–14 nights, inside [Jun 1 .. Jul 31], with end ≥ start.
     Any invalid selection shows an inline error and disables "Done". --}}
<x-ui.datetime-picker
    mode="range"
    name="stay"
    min="2026-06-01"
    max="2026-07-31"
    :min-nights="2"
    :max-nights="14"
    hour-cycle="24"
/>

Range Select

{{-- Range, with each end's TIME chosen via dropdowns (time-variant="select") instead of the
     native time input. The calendar picks the day range; the Start/End selects set the time.
     Works the same in single mode — set time-variant on any <x-ui.datetime-picker>. --}}
<x-ui.datetime-picker
    mode="range"
    name="shift"
    time-variant="select"
    hour-cycle="24"
    :value="['from' => '2026-06-06T09:00', 'to' => '2026-06-06T17:30']"
/>

Select Variant

<x-ui.datetime-picker
    name="appointment_at"
    value="2026-06-06T14:15"
    time-variant="select"
    hour-cycle="12"
    :minute-step="15"
/>

With Seconds

<x-ui.datetime-picker name="logged_at" value="2026-06-06T10:30:45" hour-cycle="24" :seconds="true" />

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 $startsAt = null;

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

API Reference

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

Props

Prop Type Default Description
mode string 'single' Pick one date and time, 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\TH:i" (or "Y-m-d H:i") string. Range mode: an array shaped ['from' => ..., 'to' => ...]. See Range value below.
placeholder string — Trigger text shown when nothing is selected. Defaults to "Pick a date & time" (single) or "Pick a date range" (range).
hourCycle string 'auto' Clock format for the time control and the label. auto follows the visitor's locale.
auto 12 24
timeVariant string 'input' Time control style forwarded to the time-field: a native time input or hour/minute dropdowns.
input select
seconds bool false Include a seconds component in the time control and the displayed value.
minuteStep int 1 Minute increment for the time control (e.g. 15 for quarter-hour stepping).
captionLayout string 'dropdown' Calendar header style: a static month/year label, or month/year dropdowns for fast navigation.
label dropdown
min string — Earliest allowed value, as "Y-m-d" or full "Y-m-d\TH:i". The date part bounds the calendar; the time part bounds the time of day on the boundary day.
max string — Latest allowed value, as "Y-m-d" or full "Y-m-d\TH:i". The date part bounds the calendar; the time part bounds the time of day on the boundary day.
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
weekStart int 0 First day of the week (0 = Sunday, 1 = Monday).
numberOfMonths int — Number of calendar months shown side by side. Defaults to 1 in single mode and 2 in range mode.
defaultMonth string — The month ("Y-m-d") the calendar opens on when there is no selected value.
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-[280px] (single) or w-[320px] (range).

Range value

Prop Type Default Description
from string — Start of the range, as "Y-m-d\TH:i" (or "Y-m-d H:i").
to string — End of the range, as "Y-m-d\TH:i" (or "Y-m-d H:i").