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" />

Range

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