Slate
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
SuMoTuWeThFrSa
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.

SuMoTuWeThFrSa
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.

SuMoTuWeThFrSa

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">
        <x-slate::calendar default-value="2026-08-20" name="popover_date" />
    </x-slate::popover-content>
</x-slate::popover>
Last updated .