noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let the date picker take a first day of the week and a format

Browse Source 
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
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 18:18:39 +02:00
co-authored by Claude Opus 5
parent fdb13313f7
commit fb29169d44
6 changed files with 222 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/datepicker.blade.php
+19 -5
View File
@@ -27,8 +27,14 @@
the `wire:model` name replace the hint, and so does a typed date that cannot be read.
Month and weekday names, the first day of the week and the typed format come from `Intl` for
`app()->getLocale()` (resources/js/datepicker.js). Replaces ReStride's flatpickr picker: its
`config` becomes `min`, `max`, `range` and `mode`.
`app()->getLocale()` (resources/js/datepicker.js). An application that lets each person choose
overrides the last two: `week-start` is the first day of the week, 0 (Sunday) to 6 (Saturday),
and `format` the typed and displayed format, `dd`, `MM` and `yyyy` in any order around one
delimiter (`.`, `/` or `-`: `dd.MM.yyyy`, `MM/dd/yyyy`, `yyyy-MM-dd`). The field, the typed-date
reader, the calendar's columns and weekday header, Home and End, and the dialog's text fields
all follow them; the names stay the locale's, and `wire:model` still stores `Y-m-d`. A value
that is neither (`week-start="7"`, `format="d.M.yy"`) is ignored, as `null` is. Replaces
ReStride's flatpickr picker: its `config` becomes `min`, `max`, `range` and `mode`.
M3's date pickers (DatePickerModalTokens and DateInputModalTokens from androidx Compose
Material 3, androidx commit 27cf9a7d5788aa0f5f2d8b6699ce279560daf326, with the layout of
@@ -50,6 +56,8 @@
'max' => null,
'value' => null,
'clearable' => false,
'weekStart' => null,
'format' => null,
])
@php
@@ -63,6 +71,10 @@
? array_values(array_unique(\Illuminate\Support\Arr::flatten([$errors->get($errorKey), $errors->get($errorKey.'.*')])))
: [];
$locale = str_replace('_', '-', app()->getLocale());
$weekStart = (is_int($weekStart) || is_string($weekStart)) && preg_match('/^[0-6]\z/', (string) $weekStart) === 1 ? (int) $weekStart : null;
$format = is_string($format) && preg_match('/^(dd|MM|yyyy)([.\/-])(dd|MM|yyyy)\2(dd|MM|yyyy)\z/', $format, $units) === 1 && count(array_unique([$units[1], $units[3], $units[4]])) === 3
? $format
: null;
$toIso = function (mixed $date): ?string {
if ($date instanceof \DateTimeInterface) {
@@ -85,9 +97,9 @@
? ['start' => $toIso(data_get($current, 'start')), 'end' => $toIso(data_get($current, 'end'))]
: $toIso($current);
// The typed format as resources/js/datepicker.js derives it, from ICU's short date when PHP has intl.
$pattern = 'yyyy-MM-dd';
if (class_exists(\IntlDateFormatter::class)) {
// The typed format: `format`, or as resources/js/datepicker.js derives it, from ICU's short date when PHP has intl.
$pattern = $format ?? 'yyyy-MM-dd';
if ($format === null && class_exists(\IntlDateFormatter::class)) {
$short = (string) (new \IntlDateFormatter(str_replace('-', '_', $locale), \IntlDateFormatter::SHORT, \IntlDateFormatter::NONE))->getPattern();
$candidate = rtrim(str_replace('My', 'M/y', (string) preg_replace(['/[^dMy\/\-.]/', '/d{1,2}/', '/M{1,2}/', '/y{1,4}/'], ['', 'dd', 'MM', 'yyyy'], $short)), '.');
if (preg_match('/^(?=.*dd)(?=.*MM)(?=.*yyyy)[dMy]+[\/\-.][dMy]+[\/\-.][dMy]+$/', $candidate) === 1) {
@@ -110,6 +122,8 @@
'range' => (bool) $range,
'min' => $toIso($min),
'max' => $toIso($max),
'weekStart' => $weekStart,
'format' => $format,
'disabled' => (bool) $attributes->get('disabled'),
'readonly' => (bool) $attributes->get('readonly'),
'strings' => [