Get started
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Calendar

A simple month grid date picker. Value is stored as Y-m-d. Requires Alpine.js.

Usage
Su Mo Tu We Th Fr Sa
example.blade.php 
<x-slate::calendar value="2026-08-20" name="date" />

Default value

Use default-value when the picker should start on a date without a controlled value.

Su Mo Tu We Th Fr Sa
example.blade.php 
<x-slate::calendar default-value="2026-08-01" name="start_date" />

With form field

Compose with field helpers for labels and descriptions.

Su Mo Tu We Th Fr Sa

Stored as Y-m-d.

example.blade.php 
<x-slate::field>
    <x-slate::field-label>Start date</x-slate::field-label>
    <x-slate::calendar default-value="2026-08-01" name="start_date" />
    <x-slate::field-description>Stored as Y-m-d.</x-slate::field-description>
</x-slate::field>

In a popover

Pair with popover for compact date entry in dense forms.

example.blade.php 
<x-slate::popover>
    <x-slate::popover-trigger>
        <x-slate::button variant="outline">Pick a date</x-slate::button>
    </x-slate::popover-trigger>
    <x-slate::popover-content class="w-auto p-0 overflow-visible">
        <x-slate::calendar default-value="2026-08-20" name="popover_date" />
    </x-slate::popover-content>
</x-slate::popover>

Keyboard & Livewire

Arrow keys move focus across the month grid; Enter/Space selects. Use wire:model (or name) for ISO Y-m-d binding.

example.blade.php 
<x-slate::calendar wire:model="startsOn" label="Start date" />
Last updated . · Legal