Andreas Reinhold / reiniandClaude Opus 5
f4be9848e2
tests / lint (push) Successful in 1m5s
tests / feature (8.4) (push) Successful in 1m10s
tests / feature (8.5) (push) Successful in 1m7s
tests / browser (firefox, firefox) (push) Failing after 8m28s
tests / browser (chrome, chromium) (push) Failing after 5m58s
tests / browser (safari, webkit) (push) Failing after 7m24s
Docked, modal and modal input date pickers for single dates and ranges, with locale month names, week start and typed format from Intl, min and max, and the APG grid keyboard. Completes Phase 7. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
72 lines
3.8 KiB
PHP
72 lines
3.8 KiB
PHP
@php
|
|
$examples = [
|
|
'docked' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2" x-data="{ expires: '{{ now()->addWeek()->format('Y-m-d') }}', starts: null }">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Expires on" x-model="expires" hint="Type a date or pick one" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(expires)"></code></p>
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Starts on" variant="filled" icon="event" x-model="starts" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(starts)"></code></p>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'modal and modal input' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2" x-data="{ birthday: '1990-05-17', delivery: null }">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Birthday" mode="modal" x-model="birthday" :max="now()" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(birthday)"></code></p>
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Delivery" mode="input" x-model="delivery" hint="Opens on a text field" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(delivery)"></code></p>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'range' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2" x-data="{ trip: { start: '{{ now()->addDays(3)->format('Y-m-d') }}', end: '{{ now()->addDays(9)->format('Y-m-d') }}' }, leave: { start: null, end: null } }">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Trip" range x-model="trip" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(trip)"></code></p>
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Leave" range mode="modal" x-model="leave" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(leave)"></code></p>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'limits, errors and states' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Within the next 30 days" :min="now()" :max="now()->addDays(30)" hint="Days outside are disabled" />
|
|
<x-datepicker label="Required" required />
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Disabled" value="2026-09-13" disabled />
|
|
<x-datepicker label="Read-only" value="2026-09-13" readonly />
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<x-datepicker size="sm" aria-label="From" class="w-48" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="pickers" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Date pickers</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-datepicker></code> — docked, modal and modal input; single dates and ranges. Month and weekday names and the first day of the week follow the application's locale.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|