Andreas Reinhold / reiniandClaude Opus 5
fb29169d44
An application that lets each person choose when their week starts and how dates are written needs the picker to follow that choice rather than the locale. <x-datepicker> takes week-start, 0 (Sunday) to 6 (Saturday), and format, dd, MM and yyyy each once around one delimiter (dd.MM.yyyy, dd/MM/yyyy, MM/dd/yyyy, yyyy-MM-dd). They replace what Intl derives for firstDayOfWeek() and inputFormat(), so the field, the server-rendered value, the typed-date reader (year first too), the calendar's columns and weekday header, Home and End, the dialog's text fields and ranges all follow them. Month and weekday names stay the locale's, and wire:model still stores Y-m-d. Values that are neither are ignored, and without the props nothing changes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
85 lines
4.9 KiB
PHP
85 lines
4.9 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" clearable 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,
|
|
'First day of the week and format' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 md:grid-cols-2" x-data="{ race: '{{ now()->addMonth()->format('Y-m-d') }}', block: { start: null, end: null } }">
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Race day" week-start="0" format="yyyy-MM-dd" x-model="race" hint="Weeks start on Sunday; typed year first" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(race)"></code></p>
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-datepicker label="Training block" range mode="modal" week-start="1" format="dd.MM.yyyy" x-model="block" />
|
|
<p class="type-body-sm text-on-surface-variant">Bound value: <code x-text="JSON.stringify(block)"></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, the first day of the week and the typed format follow the application's locale; <code>week-start</code> and <code>format</code> set the last two for someone who chose their own.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|