Components
Calendar
A date field component that allows users to enter and edit dates.
php artisan blatui:add calendar
<x-ui.calendar mode="single" value="2025-06-12" default-month="2025-06-12" class="rounded-md border shadow-sm" />Disabled Dates
{{-- Disable everything before June 12, 2025 --}}
<x-ui.calendar
mode="single"
value="2025-06-12"
default-month="2025-06-12"
:disabled="['before' => '2025-06-12']"
class="rounded-md border shadow-sm"
/>Disabled Weekends
{{-- dayOfWeek: 0 = Sunday, 6 = Saturday --}}
<x-ui.calendar
mode="single"
default-month="2025-06-01"
:disabled="['dayOfWeek' => [0, 6]]"
class="rounded-md border shadow-sm"
/>Dropdown Caption
<x-ui.calendar
mode="single"
value="2025-06-12"
default-month="2025-06-12"
caption-layout="dropdown"
class="rounded-md border shadow-sm"
/>Min Max Range
{{-- Require a range of at least 2 and at most 7 nights --}}
<x-ui.calendar
mode="range"
:value="['from' => '2025-06-12', 'to' => '2025-06-16']"
default-month="2025-06-12"
:min="2"
:max="7"
class="rounded-md border shadow-sm"
/>Multiple
<x-ui.calendar
mode="multiple"
:value="['2025-06-05', '2025-06-12', '2025-06-18']"
default-month="2025-06-12"
:max="5"
class="rounded-md border shadow-sm"
/>Multiple Months
<x-ui.calendar
mode="single"
value="2025-06-12"
default-month="2025-06-12"
:number-of-months="2"
class="rounded-md border shadow-sm"
/>Range
<x-ui.calendar
mode="range"
:value="['from' => '2025-06-09', 'to' => '2025-06-26']"
default-month="2025-06-09"
:number-of-months="2"
class="rounded-md border shadow-sm"
/>Week Numbers
<x-ui.calendar
mode="single"
value="2025-06-12"
default-month="2025-06-12"
:show-week-number="true"
class="rounded-md border shadow-sm"
/>Week Start Monday
{{-- week-start: 0 = Sunday (default), 1 = Monday. Independent of locale. --}}
<x-ui.calendar
mode="single"
value="2025-06-12"
default-month="2025-06-12"
:week-start="1"
class="rounded-md border shadow-sm"
/>