Add the M3 date pickers

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
2026-09-13 08:48:56 +02:00
parent b8239dd215
commit f4be9848e2
13 changed files with 2370 additions and 1 deletions
@@ -463,6 +463,27 @@ M3 Expressive's slider on native `<input type="range">`s (one per handle), so th

 Other attributes go to the input(s). A `wire:model.live` slider sends while it is dragged, and a server render never moves a handle under the pointer (the drawing is `wire:ignore`); a value the server sets moves the handle after the morph. The binding gets `.number`, so values arrive as numbers. Its width is the container's unless a `w-*` class is passed.

+### `<x-datepicker>`
+
+M3 date pickers on a text field. `wire:model` stores `Y-m-d` strings (`x-model` without Livewire).
+
+```blade
+<x-datepicker label="Expires on" wire:model.live="expiresOn" :min="now()" :max="now()->addMonth()" />
+<x-datepicker label="Birthday" mode="modal" wire:model="birthday" :max="now()" />
+<x-datepicker label="Trip" range wire:model="trip" hint="Start and end" />
+```
+
+| Prop | Default | |
+|---|---|---|
+| `mode` | `docked` | `docked`: type a date (in the locale's numeric format) or pick one from a calendar under the field, which opens as a dialog below `sm`; `modal`: the field opens a calendar dialog; `input`: the dialog opens on a text field. Both dialogs switch between calendar and typing |
+| `range` | `false` | binds one array property, `['start' => 'Y-m-d', 'end' => 'Y-m-d']` (either may be null); errors for `trip`, `trip.start` and `trip.end` show on the field |
+| `min`, `max` | `null` | `Y-m-d` or a date; days outside are disabled and the keyboard stays inside |
+| `label`, `hint`, `icon`, `variant`, `size` | | the field's |
+| `value` | `null` | the initial value without `wire:model` |
+| `name` | | adds hidden inputs with `Y-m-d` for a plain form post (`name[start]`, `name[end]` for a range) |
+
+Picking in the calendar is a draft; OK or Enter on a day keeps it, Cancel or Escape does not. A typed date is the value once it is whole and allowed; otherwise the field says why. Month and weekday names, the week's first day and the typed format follow `app()->getLocale()`. Keyboard: arrows, Home/End (week), PageUp/PageDown (month; with Shift, year), Space, Enter, Escape. `min` and `max` are read when the picker starts: when they change on the server, give the component a `wire:key` that changes with them. `required`, `disabled` and `readonly` reach the text field.
+
 ### `<x-timepicker>`

 M3's time picker in a modal dialog, opened from a read-only text field (a press, Enter, Space, ArrowDown or its clock icon). The dial picks the hour, then the minutes, by press or drag; a 24-hour clock puts 12–23 on the inner ring. The keyboard icon switches to two text fields. The arrow keys change the focused dial's value, Home and End go to the ends, Enter confirms; Escape, Cancel or the scrim close it unchanged and give focus back to the field. In a landscape window the dial lies on its side.