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

Draw the datepicker without Tailwind

Browse Source 
Plan step 36 (inputs group): <x-datepicker> renders data-md-datepicker
with every part data-md-datepicker-* (data-md-presentation replaces
data-presentation; data-md-range, data-md-docked, data-md-concealed and
data-md-value replace their unprefixed hooks), and datepicker.css moves
into material.components on the same px, spacing and colour tokens,
importing field.css, icon.css and button.css for what the view renders.
The month's live-announced text drops its `sr-only` class for a
data-md-datepicker-month-live hook with the same visually-hidden clip
(a package view writes no class but the interaction classes), matching
field's and search's counter/status live regions. The day, year, menu
button and list option keep their own hand-rolled state layer and focus
ring rather than the foundation's classes, as data-md-field-button
already does: each is a bigger interactive box than the round indicator
drawn inside it, which the foundation's fixed-geometry classes can't
draw, and `:focus-visible` only ever matches the actually-focused
element. Cancel, OK and the icon buttons are <x-button>, which already
draws from the classes. datepicker.js follows the renamed hooks and
dataset properties.

Shift+M/Y (reaching the month/year dropdowns) and the full-screen range
picker at compact were already implemented; this commit adds the browser
tests the plan owed for them plus the month list's keyboard-driven growth
in both directions and Save/close from the full-screen app bar
(docs/plans/material-3-browser-tests.md), written but not run — the
inputs group's Chromium run follows this stream.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 19:12:58 +02:00
co-authored by Claude Opus 5
parent 52fd65a390
commit 72d9dbfc89
8 changed files with 351 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css
+1
View File
@@ -52,6 +52,7 @@
@import './components/table.css';
@import './components/sort-header.css';
@import './components/pagination.css';
@import './components/datepicker.css';
/* Containment */
resources/css/components/datepicker.css
+142 -113
View File
@@ -13,35 +13,49 @@
* DateInput.kt; the docked picker's from material-web's md-comp-date-picker-docked tokens (v0_192).
* Apache-2.0.
*
* [data-datepicker] the root: the field, its support line, the dialog
* [data-datepicker-support] the hint, a server error, or what is wrong with the typed date
* [data-datepicker-picker] the <dialog>; data-presentation="docked" | "modal" | "full"
* [data-datepicker-surface]
* [data-datepicker-header] modal only: title, headline, switch
* [data-datepicker-full] full only: [data-datepicker-app-bar] (close, switch, Save)
* and [data-datepicker-full-headline] (title, headline)
* [data-datepicker-calendar] the scroller, full screen
* [data-datepicker-nav] month and year: one menu button and arrows (modal),
* or a month and a year stepper (docked, data-docked)
* [data-datepicker-grid] the weekdays and six weeks of [data-datepicker-day] cells:
* data-today, data-selected, data-start, data-end,
* data-between, data-outside, data-blank, aria-disabled —
* full screen, every month of the window under a
* [data-datepicker-month-label] row
* [data-datepicker-years] the modal year grid
* [data-datepicker-menu] a docked month or year list of [data-datepicker-option]s
* [data-datepicker-entry] the text field(s) of the modal input
* [data-datepicker-actions] Cancel and OK
* [data-md-datepicker] the root: the field, its support line, the dialog
* [data-md-datepicker-support] the hint, a server error, or what is wrong with the typed date
* [data-md-datepicker-picker] the <dialog>; data-md-presentation="docked" | "modal" | "full"
* [data-md-datepicker-surface]
* [data-md-datepicker-header] modal only: title, headline, switch
* [data-md-datepicker-full] full only: [data-md-datepicker-app-bar] (close, switch, Save)
* and [data-md-datepicker-full-headline] (title, headline)
* [data-md-datepicker-calendar] the scroller, full screen
* [data-md-datepicker-nav] month and year: one menu button and arrows (modal),
* or a month and a year stepper (docked, data-md-docked)
* [data-md-datepicker-grid] the weekdays and six weeks of [data-md-datepicker-day]
* cells: data-md-today, data-md-selected, data-md-start,
* data-md-end, data-md-between, data-md-outside,
* data-md-blank, aria-disabled — full screen, every month
* of the window under a [data-md-datepicker-month-label] row
* [data-md-datepicker-years] the modal year grid
* [data-md-datepicker-menu] a docked month or year list of [data-md-datepicker-option]s
* [data-md-datepicker-entry] the text field(s) of the modal input
* [data-md-datepicker-actions] Cancel and OK
*
* Every state layer is the content colour at 8% on hover (only where a pointer can hover) and 10% on
* focus and press; keyboard focus adds the package's 3px secondary ring.
* Cancel, OK and the icon buttons in the app bar and the nav are <x-button>, which draws its own
* state layer and focus ring from the foundation classes. The day, the year, the menu button and
* the list option keep their own hand-rolled state layer and focus ring, as `data-md-field-button`
* does (field.css): each interactive box is bigger than the round indicator drawn inside it (a
* day's cell is 48px, its indicator 40px; a menu button and an option are full rows), which the
* foundation's classes, fixed to the element they are on, cannot draw — and `:focus-visible` only
* ever matches the element actually focused, never a smaller child inside it.
*
* Every state layer here is the content colour at 8% on hover (only where a pointer can hover) and
* 10% on focus and press; keyboard focus adds the package's 3px secondary ring.
*/
@layer components {
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './field.css';
@import './icon.css';
@import './button.css';
@layer material.components {
/* ---- The support line under the field ------------------------------------------------------ */
/* The padding is on the lines, not the box, so a box with nothing to say takes no room. */
[data-datepicker-support] {
[data-md-datepicker-support] {
--datepicker-pad: 1rem;
color: var(--md-sys-color-on-surface-variant);
@@ -49,25 +63,25 @@
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
}
[data-datepicker-support] > * {
[data-md-datepicker-support] > * {
padding: 0.25rem var(--datepicker-pad) 0;
}
[data-datepicker-support][data-size="sm"] {
[data-md-datepicker-support][data-md-size='sm'] {
--datepicker-pad: 0.75rem;
}
[data-datepicker-support][data-size="xs"] {
[data-md-datepicker-support][data-md-size='xs'] {
--datepicker-pad: 0.625rem;
}
[data-datepicker-error] {
[data-md-datepicker-error] {
color: var(--md-sys-color-error);
}
/* ---- The dialog ---------------------------------------------------------------------------- */
[data-datepicker-picker] {
[data-md-datepicker-picker] {
inset: auto;
width: 22.5rem;
max-width: calc(100vw - 1rem);
@@ -80,7 +94,7 @@
color: var(--md-sys-color-on-surface);
}
[data-datepicker-picker]:popover-open {
[data-md-datepicker-picker]:popover-open {
top: anchor(bottom);
left: anchor(left);
margin-block: 0.25rem;
@@ -92,12 +106,12 @@
}
@starting-style {
[data-datepicker-picker]:popover-open {
[data-md-datepicker-picker]:popover-open {
opacity: 0;
}
}
[data-datepicker-picker]:modal {
[data-md-datepicker-picker]:modal {
inset: 0;
margin: auto;
opacity: 1;
@@ -108,17 +122,17 @@
}
@starting-style {
[data-datepicker-picker]:modal {
[data-md-datepicker-picker]:modal {
opacity: 0;
scale: 0.95;
}
}
[data-datepicker-picker]:modal::backdrop {
[data-md-datepicker-picker]:modal::backdrop {
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
}
[data-datepicker-surface] {
[data-md-datepicker-surface] {
display: flex;
flex-direction: column;
max-height: inherit;
@@ -130,7 +144,7 @@
outline: none;
}
[data-datepicker-picker][data-presentation="modal"] [data-datepicker-surface] {
[data-md-datepicker-picker][data-md-presentation='modal'] [data-md-datepicker-surface] {
border-radius: var(--md-sys-shape-corner-xl);
}
@@ -142,7 +156,7 @@
* different order: an app bar, the supporting text and the range as the headline, a divider, the
* day-of-week labels, and a vertically scrolling list of months under them, each with its label.
* Only the months scroll; everything above them stays where it is. */
[data-datepicker-picker][data-presentation="full"] {
[data-md-datepicker-picker][data-md-presentation='full'] {
inset: 0;
width: 100vw;
max-width: none;
@@ -151,7 +165,7 @@
margin: 0;
}
[data-datepicker-picker][data-presentation="full"] [data-datepicker-surface] {
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-surface] {
height: 100%;
max-height: none;
padding-block: var(--material-safe-top, env(safe-area-inset-top)) var(--material-safe-bottom, env(safe-area-inset-bottom));
@@ -160,13 +174,13 @@
box-shadow: none;
}
[data-datepicker-full] {
[data-md-datepicker-full] {
flex: none;
border-bottom: 1px solid var(--md-sys-color-outline-variant);
color: var(--md-sys-color-on-surface-variant);
}
[data-datepicker-app-bar] {
[data-md-datepicker-app-bar] {
display: flex;
align-items: center;
justify-content: space-between;
@@ -175,13 +189,13 @@
padding-inline: 0.25rem 0.75rem;
}
[data-datepicker-app-bar-actions] {
[data-md-datepicker-app-bar-actions] {
display: flex;
align-items: center;
gap: 0.25rem;
}
[data-datepicker-full-headline] {
[data-md-datepicker-full-headline] {
display: flex;
flex-direction: column;
gap: 0.25rem;
@@ -189,25 +203,25 @@
}
/* The calendar is the only part that scrolls, with the weekday header held at its top. */
[data-datepicker-picker][data-presentation="full"] [data-datepicker-calendar] {
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-calendar] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
[data-datepicker-picker][data-presentation="full"] [data-datepicker-grid] thead th {
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-grid] thead th {
position: sticky;
top: 0;
z-index: 1;
background-color: var(--md-sys-color-surface-container-high);
}
[data-datepicker-picker][data-presentation="full"] [data-datepicker-day] {
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-day] {
scroll-margin-block: 3rem;
}
[data-datepicker-month-label] {
[data-md-datepicker-month-label] {
padding: 1.25rem 0 0.5rem;
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-title-sm);
@@ -217,7 +231,7 @@
/* ---- The modal header ---------------------------------------------------------------------- */
[data-datepicker-header] {
[data-md-datepicker-header] {
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -227,17 +241,17 @@
color: var(--md-sys-color-on-surface-variant);
}
[data-datepicker-header][data-range] {
[data-md-datepicker-header][data-md-range] {
min-height: 8rem;
}
[data-datepicker-title] {
[data-md-datepicker-title] {
padding: 1rem 0.75rem 0 1.5rem;
font: var(--md-sys-typescale-label-lg);
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
}
[data-datepicker-headline-row] {
[data-md-datepicker-headline-row] {
display: flex;
align-items: center;
justify-content: space-between;
@@ -245,7 +259,7 @@
padding: 0 0.75rem 0.75rem 1.5rem;
}
[data-datepicker-headline] {
[data-md-datepicker-headline] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -254,14 +268,14 @@
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
}
[data-datepicker-header][data-range] [data-datepicker-headline] {
[data-md-datepicker-header][data-md-range] [data-md-datepicker-headline] {
font: var(--md-sys-typescale-title-lg);
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
}
/* ---- Month and year navigation -------------------------------------------------------------- */
[data-datepicker-nav] {
[data-md-datepicker-nav] {
display: flex;
flex: none;
align-items: center;
@@ -271,23 +285,23 @@
color: var(--md-sys-color-on-surface-variant);
}
[data-datepicker-nav][data-docked] {
[data-md-datepicker-nav][data-md-docked] {
height: 4rem;
padding-inline: 0.25rem;
}
[data-datepicker-stepper],
[data-datepicker-arrows] {
[data-md-datepicker-stepper],
[data-md-datepicker-arrows] {
display: flex;
align-items: center;
}
/* While a year or month list is open the arrows keep their place but are gone, as androidx hides them. */
[data-datepicker-arrows][data-concealed] {
[data-md-datepicker-arrows][data-md-concealed] {
visibility: hidden;
}
[data-datepicker-menu-button] {
[data-md-datepicker-menu-button] {
position: relative;
display: inline-flex;
align-items: center;
@@ -304,26 +318,26 @@
isolation: isolate;
}
[data-datepicker-nav][data-docked] [data-datepicker-menu-button] {
[data-md-datepicker-nav][data-md-docked] [data-md-datepicker-menu-button] {
padding-inline: 0.5rem 0.25rem;
gap: 0.25rem;
}
[data-datepicker-menu-arrow] {
[data-md-datepicker-menu-arrow] {
transition: rotate var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
[data-datepicker-menu-button][aria-expanded="true"] [data-datepicker-menu-arrow] {
[data-md-datepicker-menu-button][aria-expanded='true'] [data-md-datepicker-menu-arrow] {
rotate: 180deg;
}
/* ---- State layers shared by days, years, menu buttons and list rows ------------------------ */
[data-datepicker-menu-button]::before,
[data-datepicker-day] > span::before,
[data-datepicker-year]::before,
[data-datepicker-option]::before {
content: "";
[data-md-datepicker-menu-button]::before,
[data-md-datepicker-day] > span::before,
[data-md-datepicker-year]::before,
[data-md-datepicker-option]::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
@@ -335,47 +349,47 @@
}
@media (hover: hover) {
[data-datepicker-menu-button]:hover::before,
[data-datepicker-day]:not([aria-disabled="true"], [data-blank]):hover > span::before,
[data-datepicker-year]:hover::before,
[data-datepicker-option]:not([aria-disabled="true"]):hover::before {
[data-md-datepicker-menu-button]:hover::before,
[data-md-datepicker-day]:not([aria-disabled='true'], [data-md-blank]):hover > span::before,
[data-md-datepicker-year]:hover::before,
[data-md-datepicker-option]:not([aria-disabled='true']):hover::before {
opacity: 0.08;
}
}
[data-datepicker-menu-button]:focus-visible::before,
[data-datepicker-menu-button]:active::before,
[data-datepicker-day]:focus-visible > span::before,
[data-datepicker-day]:not([aria-disabled="true"], [data-blank]):active > span::before,
[data-datepicker-year]:focus-visible::before,
[data-datepicker-year]:active::before,
[data-datepicker-option]:focus-visible::before,
[data-datepicker-option]:not([aria-disabled="true"]):active::before {
[data-md-datepicker-menu-button]:focus-visible::before,
[data-md-datepicker-menu-button]:active::before,
[data-md-datepicker-day]:focus-visible > span::before,
[data-md-datepicker-day]:not([aria-disabled='true'], [data-md-blank]):active > span::before,
[data-md-datepicker-year]:focus-visible::before,
[data-md-datepicker-year]:active::before,
[data-md-datepicker-option]:focus-visible::before,
[data-md-datepicker-option]:not([aria-disabled='true']):active::before {
opacity: 0.1;
}
[data-datepicker-menu-button]:focus-visible,
[data-datepicker-day]:focus-visible > span,
[data-datepicker-year]:focus-visible {
[data-md-datepicker-menu-button]:focus-visible,
[data-md-datepicker-day]:focus-visible > span,
[data-md-datepicker-year]:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: 2px;
}
[data-datepicker-option]:focus-visible {
[data-md-datepicker-option]:focus-visible {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: -3px;
}
/* ---- The days ----------------------------------------------------------------------------- */
[data-datepicker-grid] {
[data-md-datepicker-grid] {
width: calc(100% - 1.5rem);
margin-inline: 0.75rem;
border-collapse: collapse;
table-layout: fixed;
}
[data-datepicker-grid] th {
[data-md-datepicker-grid] th {
height: 3rem;
padding: 0;
color: var(--md-sys-color-on-surface);
@@ -384,7 +398,7 @@
text-align: center;
}
[data-datepicker-day] {
[data-md-datepicker-day] {
--datepicker-layer: var(--md-sys-color-on-surface-variant);
position: relative;
@@ -400,7 +414,7 @@
-webkit-tap-highlight-color: transparent;
}
[data-datepicker-day] > span {
[data-md-datepicker-day] > span {
position: relative;
display: grid;
place-items: center;
@@ -411,30 +425,30 @@
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
}
[data-datepicker-day][data-blank] {
[data-md-datepicker-day][data-md-blank] {
cursor: default;
}
/* A docked picker shows the neighbouring months' days, quieter. */
[data-datepicker-day][data-outside] {
[data-md-datepicker-day][data-md-outside] {
color: var(--md-sys-color-on-surface-variant);
}
[data-datepicker-day][data-today] {
[data-md-datepicker-day][data-md-today] {
--datepicker-layer: var(--md-sys-color-primary);
color: var(--md-sys-color-primary);
}
[data-datepicker-day][data-today] > span {
[data-md-datepicker-day][data-md-today] > span {
box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
/* A range's band: secondary-container behind the days between its ends, from the middle of each end. */
[data-datepicker-day][data-between]::before,
[data-datepicker-day][data-start]::before,
[data-datepicker-day][data-end]::before {
content: "";
[data-md-datepicker-day][data-md-between]::before,
[data-md-datepicker-day][data-md-start]::before,
[data-md-datepicker-day][data-md-end]::before {
content: '';
position: absolute;
inset-block: 0.25rem;
inset-inline: 0;
@@ -442,43 +456,43 @@
background-color: var(--md-sys-color-secondary-container);
}
[data-datepicker-day][data-start]::before {
[data-md-datepicker-day][data-md-start]::before {
inset-inline-start: 50%;
}
[data-datepicker-day][data-end]::before {
[data-md-datepicker-day][data-md-end]::before {
inset-inline-end: 50%;
}
[data-datepicker-day][data-between] {
[data-md-datepicker-day][data-md-between] {
--datepicker-layer: var(--md-sys-color-on-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
[data-datepicker-day][data-selected] {
[data-md-datepicker-day][data-md-selected] {
--datepicker-layer: var(--md-sys-color-on-primary);
color: var(--md-sys-color-on-primary);
}
[data-datepicker-day][data-selected] > span {
[data-md-datepicker-day][data-md-selected] > span {
background-color: var(--md-sys-color-primary);
box-shadow: none;
}
[data-datepicker-day][aria-disabled="true"] {
[data-md-datepicker-day][aria-disabled='true'] {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
cursor: default;
}
[data-datepicker-day][aria-disabled="true"][data-today] > span {
[data-md-datepicker-day][aria-disabled='true'][data-md-today] > span {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
/* ---- The modal year grid ----------------------------------------------------------------- */
[data-datepicker-years] {
[data-md-datepicker-years] {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-content: start;
@@ -491,7 +505,7 @@
border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
[data-datepicker-year] {
[data-md-datepicker-year] {
--datepicker-layer: var(--md-sys-color-on-surface-variant);
position: relative;
@@ -507,14 +521,14 @@
scroll-margin-block: 0.5rem;
}
[data-datepicker-year][data-current] {
[data-md-datepicker-year][data-md-current] {
--datepicker-layer: var(--md-sys-color-primary);
color: var(--md-sys-color-primary);
box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
[data-datepicker-year][aria-selected="true"] {
[data-md-datepicker-year][aria-selected='true'] {
--datepicker-layer: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
@@ -524,7 +538,7 @@
/* ---- The docked month and year lists ------------------------------------------------------ */
[data-datepicker-menu] {
[data-md-datepicker-menu] {
height: 21.5rem;
padding-block: 0.5rem;
overflow-y: auto;
@@ -532,7 +546,7 @@
border-top: 1px solid var(--md-sys-color-outline-variant);
}
[data-datepicker-option] {
[data-md-datepicker-option] {
--datepicker-layer: var(--md-sys-color-on-surface);
position: relative;
@@ -551,39 +565,54 @@
isolation: isolate;
}
[data-datepicker-option][aria-selected="true"] {
[data-md-datepicker-option][aria-selected='true'] {
background-color: var(--md-sys-color-surface-container-highest);
}
[data-datepicker-option][aria-disabled="true"] {
[data-md-datepicker-option][aria-disabled='true'] {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
cursor: default;
}
[data-datepicker-check] {
[data-md-datepicker-check] {
color: var(--md-sys-color-on-surface);
}
[data-datepicker-option]:not([aria-selected="true"]) [data-datepicker-check] {
[data-md-datepicker-option]:not([aria-selected='true']) [data-md-datepicker-check] {
visibility: hidden;
}
/* ---- The modal input ------------------------------------------------------------------------ */
[data-datepicker-entry] {
[data-md-datepicker-entry] {
padding: 0.625rem 1.5rem 1rem;
}
[data-datepicker-entry-fields][data-range] {
[data-md-datepicker-entry-fields][data-md-range] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
/* ---- The month announcement, spoken but not drawn -------------------------------------------- */
/* Same clip as the text classes' `md-visually-hidden`, kept as a hook because a package view
writes no class but the interaction classes (plan step 36). */
[data-md-datepicker-month-live] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
/* ---- Cancel and OK ---------------------------------------------------------------------------- */
[data-datepicker-actions] {
[data-md-datepicker-actions] {
display: flex;
flex: none;
flex-wrap: wrap;
resources/css/tailwind.css
-1
View File
@@ -18,7 +18,6 @@
@import './tokens/utilities.css';
/* Inputs, selection and data — leaving in step 36 */
@import './components/datepicker.css';
@import './components/timepicker.css';
/* Containment — leaving in step 36 */
resources/js/datepicker.js
+4 -4
View File
@@ -586,7 +586,7 @@ document.addEventListener('alpine:init', () => {
},
focusDay() {
this.settled(() => this.$refs.dialog.querySelector('[data-datepicker-day][tabindex="0"]')?.focus())
this.settled(() => this.$refs.dialog.querySelector('[data-md-datepicker-day][tabindex="0"]')?.focus())
},
/** Focuses a day (inside min and max) and shows its month. */
@@ -660,9 +660,9 @@ document.addEventListener('alpine:init', () => {
* picker has one of each, the modal picker a single button that opens the years.
*/
menuButton(view) {
const buttons = [...this.$refs.dialog.querySelectorAll('[data-datepicker-menu-button]')].filter((button) => button.getClientRects().length > 0)
const buttons = [...this.$refs.dialog.querySelectorAll('[data-md-datepicker-menu-button]')].filter((button) => button.getClientRects().length > 0)
return buttons.find((button) => button.dataset.datepickerMenuButton === view) ?? buttons[0] ?? null
return buttons.find((button) => button.dataset.mdDatepickerMenuButton === view) ?? buttons[0] ?? null
},
gridKey(event) {
@@ -745,7 +745,7 @@ document.addEventListener('alpine:init', () => {
}
this.settled(() => {
const list = [...this.$refs.dialog.querySelectorAll('[data-datepicker-list]')].find((each) => each.getClientRects().length > 0)
const list = [...this.$refs.dialog.querySelectorAll('[data-md-datepicker-list]')].find((each) => each.getClientRects().length > 0)
const option = list?.querySelector('[aria-selected="true"]') ?? list?.querySelector('[role="option"]')
option?.scrollIntoView({ block: 'center' })
resources/views/components/datepicker.blade.php
+70 -70
View File
@@ -155,7 +155,7 @@
@if ($model === null) x-modelable="value" @endif
x-on:focusout="leave($event)"
x-on:pointerdown.outside="open && presentation === 'docked' && cancel(false)"
data-datepicker
data-md-datepicker
>
<div style="anchor-name: {{ $anchor }}">
<x-livewire-material::field
@@ -229,7 +229,7 @@
x-on:click="open ? cancel() : show()"
@if ($mode !== 'docked') tabindex="-1" @endif
@disabled($attributes->get('disabled') || $attributes->get('readonly'))
data-datepicker-toggle
data-md-datepicker-toggle
>
<x-livewire-material::icon name="calendar_today" :size="$fieldIconSize" />
</button>
@@ -237,11 +237,11 @@
</x-livewire-material::field>
</div>
<div id="{{ $id }}-support" data-datepicker-support data-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}">
<p x-cloak x-show="fieldError !== ''" x-text="fieldError" role="alert" data-datepicker-error></p>
<div id="{{ $id }}-support" data-md-datepicker-support data-md-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}">
<p x-cloak x-show="fieldError !== ''" x-text="fieldError" role="alert" data-md-datepicker-error></p>
@if ($invalid)
<div x-show="fieldError === ''" role="alert" data-datepicker-error>
<div x-show="fieldError === ''" role="alert" data-md-datepicker-error>
@foreach ($messages as $message)
<p>{{ $message }}</p>
@endforeach
@@ -267,114 +267,114 @@
popover="manual"
aria-label="{{ $title }}"
style="position-anchor: {{ $anchor }}"
x-bind:data-presentation="presentation"
x-bind:data-md-presentation="presentation"
x-on:cancel.prevent="cancel()"
x-on:click.self="presentation === 'modal' && cancel()"
x-on:keydown.escape.prevent.stop="cancel()"
data-datepicker-picker
data-md-datepicker-picker
>
<div tabindex="-1" data-datepicker-surface>
<div tabindex="-1" data-md-datepicker-surface>
{{-- M3's full-screen range picker (compact): an app bar with a close button and Save,
then the supporting text and the range as the headline, over a divider. --}}
<div data-datepicker-full x-cloak x-show="presentation === 'full'">
<div data-datepicker-app-bar>
<x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="cancel()" data-datepicker-close />
<div data-md-datepicker-full x-cloak x-show="presentation === 'full'">
<div data-md-datepicker-app-bar>
<x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="cancel()" data-md-datepicker-close />
<span data-datepicker-app-bar-actions>
<span data-md-datepicker-app-bar-actions>
<span x-show="! typing">
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
<span x-show="typing">
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
<x-livewire-material::button :label="__('Save')" x-on:click="confirm()" data-datepicker-save />
<x-livewire-material::button :label="__('Save')" x-on:click="confirm()" data-md-datepicker-save />
</span>
</div>
<div data-datepicker-full-headline>
<p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<p data-datepicker-headline aria-live="polite" x-text="headline"></p>
<div data-md-datepicker-full-headline>
<p data-md-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<p data-md-datepicker-headline aria-live="polite" x-text="headline"></p>
</div>
</div>
<div data-datepicker-header x-show="presentation === 'modal'" @if ($range) data-range @endif>
<p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<div data-md-datepicker-header x-show="presentation === 'modal'" @if ($range) data-md-range @endif>
<p data-md-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
<div data-datepicker-headline-row>
<p data-datepicker-headline aria-live="polite" x-text="headline"></p>
<div data-md-datepicker-headline-row>
<p data-md-datepicker-headline aria-live="polite" x-text="headline"></p>
<span x-show="! typing">
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
<span x-show="typing">
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
<x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
</span>
</div>
</div>
<div x-show="! typing" x-on:scroll="extendMonths($event)" data-datepicker-calendar>
<span id="{{ $id }}-month" class="sr-only" aria-live="polite" x-text="monthYear"></span>
<div x-show="! typing" x-on:scroll="extendMonths($event)" data-md-datepicker-calendar>
<span id="{{ $id }}-month" aria-live="polite" x-text="monthYear" data-md-datepicker-month-live></span>
<div data-datepicker-nav x-show="presentation === 'modal'">
<div data-md-datepicker-nav x-show="presentation === 'modal'">
<button
type="button"
data-datepicker-menu-button="years"
data-md-datepicker-menu-button="years"
x-on:click="toggleView('years')"
x-bind:aria-expanded="(view === 'years').toString()"
x-bind:aria-label="monthYear + ', ' + @js(__('Switch to selecting a year'))"
>
<span x-text="monthYear"></span>
<x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
<x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
</button>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" data-datepicker-previous />
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" data-datepicker-next />
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" data-md-datepicker-previous />
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" data-md-datepicker-next />
</span>
</div>
<div data-datepicker-nav data-docked x-show="presentation === 'docked'">
<span data-datepicker-stepper>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<div data-md-datepicker-nav data-md-docked x-show="presentation === 'docked'">
<span data-md-datepicker-stepper>
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" />
</span>
<button
type="button"
data-datepicker-menu-button="months"
data-md-datepicker-menu-button="months"
x-on:click="toggleView('months')"
x-bind:aria-expanded="(view === 'months').toString()"
x-bind:aria-label="monthLabel + ', ' + @js(__('Switch to selecting a month'))"
>
<span x-text="monthLabel"></span>
<x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
<x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
</button>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" />
</span>
</span>
<span data-datepicker-stepper>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<span data-md-datepicker-stepper>
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_left" :tooltip="__('Previous year')" x-on:click="step(-12)" x-bind:disabled="view !== 'days' || ! canStep(-12)" />
</span>
<button
type="button"
data-datepicker-menu-button="years"
data-md-datepicker-menu-button="years"
x-on:click="toggleView('years')"
x-bind:aria-expanded="(view === 'years').toString()"
x-bind:aria-label="yearLabel + ', ' + @js(__('Switch to selecting a year'))"
>
<span x-text="yearLabel"></span>
<x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
<x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
</button>
<span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
<span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
<x-livewire-material::button icon="chevron_right" :tooltip="__('Next year')" x-on:click="step(12)" x-bind:disabled="view !== 'days' || ! canStep(12)" />
</span>
</span>
</div>
<table role="grid" aria-labelledby="{{ $id }}-month" x-show="view === 'days'" x-on:keydown="gridKey($event)" data-datepicker-grid>
<table role="grid" aria-labelledby="{{ $id }}-month" x-show="view === 'days'" x-on:keydown="gridKey($event)" data-md-datepicker-grid>
<thead>
<tr>
<template x-for="weekday in weekdays" :key="weekday.long">
@@ -387,7 +387,7 @@
<tr>
{{-- Full screen: a month's name heads its weeks, M3's month label. --}}
<template x-if="row.label">
<th colspan="7" scope="colgroup" x-text="row.label" data-datepicker-month-label></th>
<th colspan="7" scope="colgroup" x-text="row.label" data-md-datepicker-month-label></th>
</template>
<template x-for="(cell, column) in (row.cells ?? [])" :key="column">
@@ -398,16 +398,16 @@
x-bind:aria-selected="! cell.blank && (cell.selected || cell.between) ? 'true' : null"
x-bind:aria-disabled="! cell.blank && cell.disabled ? 'true' : null"
x-bind:aria-current="! cell.blank && cell.today ? 'date' : null"
x-bind:data-value="cell.blank ? null : cell.value"
x-bind:data-blank="cell.blank ? '' : null"
x-bind:data-outside="cell.outside ? '' : null"
x-bind:data-today="cell.today ? '' : null"
x-bind:data-selected="cell.selected ? '' : null"
x-bind:data-start="cell.start ? '' : null"
x-bind:data-end="cell.end ? '' : null"
x-bind:data-between="cell.between ? '' : null"
x-bind:data-md-value="cell.blank ? null : cell.value"
x-bind:data-md-blank="cell.blank ? '' : null"
x-bind:data-md-outside="cell.outside ? '' : null"
x-bind:data-md-today="cell.today ? '' : null"
x-bind:data-md-selected="cell.selected ? '' : null"
x-bind:data-md-start="cell.start ? '' : null"
x-bind:data-md-end="cell.end ? '' : null"
x-bind:data-md-between="cell.between ? '' : null"
x-on:click="choose(cell)"
data-datepicker-day
data-md-datepicker-day
><span x-text="cell.blank ? '' : cell.label"></span></td>
</template>
</tr>
@@ -415,22 +415,22 @@
</tbody>
</table>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'modal'" x-on:keydown="listKey($event, 3)" data-datepicker-list data-datepicker-years>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'modal'" x-on:keydown="listKey($event, 3)" data-md-datepicker-list data-md-datepicker-years>
<template x-for="year in years" :key="year.value">
<button
type="button"
role="option"
x-bind:aria-selected="year.selected.toString()"
x-bind:tabindex="year.selected ? 0 : -1"
x-bind:data-current="year.current ? '' : null"
x-bind:data-md-current="year.current ? '' : null"
x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
x-text="year.label"
data-datepicker-year
data-md-datepicker-year
></button>
</template>
</div>
<div role="listbox" aria-label="{{ __('Months') }}" x-show="view === 'months' && presentation === 'docked'" x-on:keydown="listKey($event)" data-datepicker-list data-datepicker-menu>
<div role="listbox" aria-label="{{ __('Months') }}" x-show="view === 'months' && presentation === 'docked'" x-on:keydown="listKey($event)" data-md-datepicker-list data-md-datepicker-menu>
<template x-for="month in months" :key="month.value">
<button
type="button"
@@ -439,15 +439,15 @@
x-bind:aria-disabled="month.disabled ? 'true' : null"
x-bind:tabindex="month.selected ? 0 : -1"
x-on:click="month.disabled || showMonthOf(+shown.slice(0, 4), month.value)"
data-datepicker-option
data-md-datepicker-option
>
<x-livewire-material::icon name="check" data-datepicker-check />
<x-livewire-material::icon name="check" data-md-datepicker-check />
<span x-text="month.label"></span>
</button>
</template>
</div>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'docked'" x-on:keydown="listKey($event)" data-datepicker-list data-datepicker-menu>
<div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'docked'" x-on:keydown="listKey($event)" data-md-datepicker-list data-md-datepicker-menu>
<template x-for="year in years" :key="year.value">
<button
type="button"
@@ -455,17 +455,17 @@
x-bind:aria-selected="year.selected.toString()"
x-bind:tabindex="year.selected ? 0 : -1"
x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
data-datepicker-option
data-md-datepicker-option
>
<x-livewire-material::icon name="check" data-datepicker-check />
<x-livewire-material::icon name="check" data-md-datepicker-check />
<span x-text="year.label"></span>
</button>
</template>
</div>
</div>
<div x-show="typing" data-datepicker-entry>
<div @if ($range) data-range @endif data-datepicker-entry-fields>
<div x-show="typing" data-md-datepicker-entry>
<div @if ($range) data-md-range @endif data-md-datepicker-entry-fields>
<x-livewire-material::field id="{{ $id }}-entry" :label="$range ? __('Start date') : __('Date')" :$variant x-bind:data-md-invalid="entryError !== '' ? '' : null">
<input
id="{{ $id }}-entry"
@@ -502,15 +502,15 @@
@endif
</div>
<div id="{{ $id }}-entry-support" data-datepicker-support>
<p x-show="entryError !== ''" x-text="entryError" role="alert" data-datepicker-error></p>
<div id="{{ $id }}-entry-support" data-md-datepicker-support>
<p x-show="entryError !== ''" x-text="entryError" role="alert" data-md-datepicker-error></p>
</div>
</div>
{{-- The full-screen picker confirms from its app bar, so it draws no action row. --}}
<div x-show="presentation !== 'full' && (view === 'days' || typing || presentation === 'modal')" data-datepicker-actions>
<x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-datepicker-cancel />
<x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-datepicker-confirm />
<div x-show="presentation !== 'full' && (view === 'days' || typing || presentation === 'modal')" data-md-datepicker-actions>
<x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-md-datepicker-cancel />
<x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-md-datepicker-confirm />
</div>
</div>
</dialog>
tests/Browser/DatepickerTest.php
+110 -33
View File
@@ -168,19 +168,19 @@ function scopedDateProbe()
/** A picker's day cell, by its ISO date. */
function day(string $picker, string $date): string
{
return "#{$picker}-picker [data-value=\"{$date}\"]";
return "#{$picker}-picker [data-md-value=\"{$date}\"]";
}
function focusedDay(string $date): string
{
return "document.activeElement.dataset.value === '{$date}'";
return "document.activeElement.dataset.mdValue === '{$date}'";
}
it('opens the docked picker under its field and walks the grid from the keyboard', function () {
$picker = "document.querySelector('#expires-field-picker')";
$page = dateProbe()
->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
->assertScript("{$picker}.matches(':popover-open') && {$picker}.dataset.presentation === 'docked'")
->assertAttribute('#expires-field', 'aria-expanded', 'true')
->assertScript("(() => { const field = document.querySelector('#expires-field').closest('[data-md-field-box]').getBoundingClientRect(); const box = {$picker}.getBoundingClientRect(); return Math.abs(box.top - field.bottom - 4) < 2 && Math.abs(box.left - field.left) < 2; })()")
@@ -205,7 +205,7 @@ it('opens the docked picker under its field and walks the grid from the keyboard
it('keeps focus and choice inside min and max', function () {
$page = dateProbe()
->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
->assertScript(focusedDay('2026-09-13'));
// Playwright will not press an aria-disabled cell, so the press is dispatched.
@@ -245,18 +245,18 @@ it('opens the modal picker, jumps through the year grid and confirms with OK', f
$page = dateProbe()
->click('#birthday-field')
->assertScript("{$dialog}.matches(':modal')")
->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 17, 2000')
->click('#birthday-field-picker [data-datepicker-nav]:not([data-docked]) [data-datepicker-menu-button]')
->assertScript("getComputedStyle(document.querySelector('#birthday-field-picker [data-datepicker-years]')).display !== 'none'")
->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 17, 2000')
->click('#birthday-field-picker [data-md-datepicker-nav]:not([data-md-docked]) [data-md-datepicker-menu-button]')
->assertScript("getComputedStyle(document.querySelector('#birthday-field-picker [data-md-datepicker-years]')).display !== 'none'")
->assertScript("document.activeElement.textContent.trim() === '2000'");
$page->click('#birthday-field-picker [data-datepicker-year]:has-text("1990")')
->assertSeeIn('#birthday-field-picker [data-datepicker-nav]', 'May 1990')
$page->click('#birthday-field-picker [data-md-datepicker-year]:has-text("1990")')
->assertSeeIn('#birthday-field-picker [data-md-datepicker-nav]', 'May 1990')
->click(day('birthday-field', '1990-05-03'))
->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 3, 1990')
->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 3, 1990')
->assertSeeIn('#birthday', '2000-05-17');
$page->click('#birthday-field-picker [data-datepicker-confirm]')
$page->click('#birthday-field-picker [data-md-datepicker-confirm]')
->assertSeeIn('#birthday', '1990-05-03')
->assertScript("! {$dialog}.open");
});
@@ -274,7 +274,7 @@ it('closes on Escape without keeping the draft and hands focus back to the field
$page->keys(':focus', 'ArrowRight')
->keys(':focus', 'Space')
->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 18, 2000');
->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 18, 2000');
$page->keys(':focus', 'Escape')
->assertScript("! {$dialog}.open")
@@ -282,7 +282,7 @@ it('closes on Escape without keeping the draft and hands focus back to the field
->assertSeeIn('#birthday', '2000-05-17');
// The docked picker too.
$page->script("document.querySelector('[aria-controls=\"expires-field-picker\"][data-datepicker-toggle]').focus()");
$page->script("document.querySelector('[aria-controls=\"expires-field-picker\"][data-md-datepicker-toggle]').focus()");
$page->keys(':focus', 'Enter')
->assertScript("document.querySelector('#expires-field-picker').matches(':popover-open')")
@@ -300,10 +300,10 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
->click('#delivery-field')
->assertScript("{$dialog}.matches(':modal')")
->assertScript("document.activeElement.id === 'delivery-field-entry'")
->assertSeeIn('#delivery-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Entered date');
->assertSeeIn('#delivery-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'Entered date');
$page->type('#delivery-field-entry', '2026-03-07')
->click('#delivery-field-picker [data-datepicker-confirm]')
->click('#delivery-field-picker [data-md-datepicker-confirm]')
->assertSeeIn('#delivery-field-entry-support', 'Date does not match expected pattern: MM/DD/YYYY')
->assertAttribute('#delivery-field-entry', 'aria-invalid', 'true')
->assertScript("{$dialog}.open");
@@ -314,7 +314,7 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
->assertScript("{$dialog}.open");
$page->type('#delivery-field-entry', '3/7/2026')
->assertSeeIn('#delivery-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Mar 7, 2026')
->assertSeeIn('#delivery-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'Mar 7, 2026')
->keys('#delivery-field-entry', 'Enter')
->assertSeeIn('#delivery', '2026-03-07')
->assertScript("! {$dialog}.open")
@@ -323,7 +323,7 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
it('picks a range: a start, an end, and the days between', function () {
$page = dateProbe()
->click('[aria-controls="trip-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
->assertAttribute(day('trip-field', '2026-09-14'), 'aria-selected', 'true');
$page->click(day('trip-field', '2026-09-20'))
@@ -331,11 +331,11 @@ it('picks a range: a start, an end, and the days between', function () {
->assertScript("! document.querySelector('".day('trip-field', '2026-09-14')."').hasAttribute('data-between')");
$page->click(day('trip-field', '2026-09-24'))
->assertScript("[...document.querySelectorAll('#trip-field-picker [data-between]')].map((cell) => cell.dataset.value).join() === '2026-09-21,2026-09-22,2026-09-23'")
->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-between]')].map((cell) => cell.dataset.mdValue).join() === '2026-09-21,2026-09-22,2026-09-23'")
->assertScript("document.querySelector('".day('trip-field', '2026-09-20')."').hasAttribute('data-start') && document.querySelector('".day('trip-field', '2026-09-24')."').hasAttribute('data-end')")
->assertSeeIn('#trip', '2026-09-15');
$page->click('#trip-field-picker [data-datepicker-confirm]')
$page->click('#trip-field-picker [data-md-datepicker-confirm]')
->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
->assertValue('#trip-field', '09/20/2026 – 09/24/2026');
});
@@ -345,7 +345,7 @@ it('follows the locale: German weeks start on Monday, American ones on Sunday',
$page = dateProbe('de')
->assertValue('#expires-field', '13.09.2026')
->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
->assertScript("{$firstWeekday} === 'Montag'")
->assertScript("document.querySelector('#expires-field-month').textContent === 'September 2026'")
->assertScript(focusedDay('2026-09-13'));
@@ -358,13 +358,13 @@ it('follows the locale: German weeks start on Monday, American ones on Sunday',
->assertAttribute('#expires-field', 'placeholder', 'DD.MM.YYYY');
dateProbe('en_US')
->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
->assertScript("{$firstWeekday} === 'Sunday'");
});
it('stays open, where it was, through a Livewire render', function () {
$page = dateProbe()
->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
->assertScript(focusedDay('2026-09-13'));
$page->keys(':focus', 'ArrowRight')->assertScript(focusedDay('2026-09-14'));
@@ -388,22 +388,22 @@ it('stays open, where it was, through a Livewire render', function () {
it('opens a docked picker as a modal one on a compact window', function () {
dateProbe()
->resize(400, 800)
->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
->assertScript("document.querySelector('#expires-field-picker').matches(':modal')")
->assertScript("getComputedStyle(document.querySelector('#expires-field-picker [data-datepicker-header]')).display !== 'none'");
->assertScript("getComputedStyle(document.querySelector('#expires-field-picker [data-md-datepicker-header]')).display !== 'none'");
});
it('empties a date, or both ends of a range, with its clear button', function () {
$page = dateProbe()
->assertScript("getComputedStyle(document.querySelector('#expires-field').closest('[data-md-field]').querySelector('[data-md-field-clear]')).display !== 'none'");
$page->click('[data-datepicker]:has(#expires-field) [data-md-field-clear]')
$page->click('[data-md-datepicker]:has(#expires-field) [data-md-field-clear]')
->assertScript("document.querySelector('#expires').textContent === ''")
->assertValue('#expires-field', '')
->assertScript("document.activeElement.id === 'expires-field'")
->assertScript("getComputedStyle(document.querySelector('[data-datepicker]:has(#expires-field) [data-md-field-clear]')).display === 'none'");
->assertScript("getComputedStyle(document.querySelector('[data-md-datepicker]:has(#expires-field) [data-md-field-clear]')).display === 'none'");
$page->click('[data-datepicker]:has(#trip-field) [data-md-field-clear]')
$page->click('[data-md-datepicker]:has(#trip-field) [data-md-field-clear]')
->assertSeeIn('#trip', '{"start":null,"end":null}')
->assertValue('#trip-field', '');
});
@@ -411,9 +411,9 @@ it('empties a date, or both ends of a range, with its clear button', function ()
it('starts the week on the day week-start names, whatever the locale says', function () {
$page = dateFormatProbe('de')
->assertValue('#sunday-field', '13.09.2026')
->click('[aria-controls="sunday-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="sunday-field-picker"][data-md-datepicker-toggle]')
->assertScript("document.querySelector('#sunday-field-picker thead th').getAttribute('abbr') === 'Sonntag'")
->assertScript("document.querySelector('#sunday-field-picker tbody td').dataset.value === '2026-08-30'")
->assertScript("document.querySelector('#sunday-field-picker tbody td').dataset.mdValue === '2026-08-30'")
->assertScript(focusedDay('2026-09-13'));
$page->keys(':focus', 'End')->assertScript(focusedDay('2026-09-19'));
@@ -436,7 +436,7 @@ it('shows and reads a year-first format and still binds Y-m-d', function () {
->assertSee('Date does not match expected pattern: YYYY-MM-DD')
->assertSeeIn('#iso', '2026-10-01');
$page->click('[aria-controls="iso-field-picker"][data-datepicker-toggle]')
$page->click('[aria-controls="iso-field-picker"][data-md-datepicker-toggle]')
->assertScript(focusedDay('2026-10-01'));
$page->keys(':focus', 'ArrowRight')->assertScript(focusedDay('2026-10-02'));
@@ -463,7 +463,7 @@ it('reads the dialog\'s text field in the given format, not the locale\'s', func
->assertScript("{$dialog}.open");
$page->type('#dotted-field-entry', '1.10.2026')
->assertSeeIn('#dotted-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Oct 1, 2026')
->assertSeeIn('#dotted-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'Oct 1, 2026')
->keys('#dotted-field-entry', 'Enter')
->assertSeeIn('#dotted', '2026-10-01')
->assertScript("! {$dialog}.open")
@@ -487,7 +487,7 @@ it('lays out and shows a range in the given first day and format', function () {
$page->click(day('span-field', '2026-09-20'))
->click(day('span-field', '2026-09-24'))
->click('#span-field-picker [data-datepicker-confirm]')
->click('#span-field-picker [data-md-datepicker-confirm]')
->assertSeeIn('#span', '{"start":"2026-09-20","end":"2026-09-24"}')
->assertValue('#span-field', '20/09/2026 – 24/09/2026');
});
@@ -496,9 +496,86 @@ it('keeps each picker\'s own settings inside a page\'s outer x-data scope', func
// Settings assigned in init() without being declared would land on the outermost scope,
// where the last picker's null min and Monday start would overwrite the first's.
$page = scopedDateProbe()
->click('[aria-controls="early-field-picker"][data-datepicker-toggle]')
->click('[aria-controls="early-field-picker"][data-md-datepicker-toggle]')
->assertScript(focusedDay('2026-09-13'));
$page->assertAttribute(day('early-field', '2026-09-09'), 'aria-disabled', 'true')
->assertScript('! (\'min\' in Alpine.$data(document.querySelector(\'[x-data="{ step: 1 }"]\')))');
});
it('opens the range picker full screen below 600px and grows its month list both ways by keyboard paging', function () {
$picker = "document.querySelector('#trip-field-picker')";
$scope = "Alpine.\$data(document.querySelector('[data-md-datepicker]:has(#trip-field)'))";
$page = dateProbe()
->resize(390, 800)
->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
->assertScript("{$picker}.dataset.mdPresentation === 'full'")
->assertScript("{$picker}.matches(':modal')")
->assertScript("document.querySelector('#trip-field-picker [data-md-datepicker-app-bar]').offsetHeight > 0")
// M3's 14-element anatomy: a close (×) icon button and Save in the app bar, not Cancel/OK.
->assertScript("document.querySelector('#trip-field-picker [data-md-datepicker-close]')")
->assertScript("document.querySelector('#trip-field-picker [data-md-datepicker-save]')")
->assertScript("getComputedStyle(document.querySelector('#trip-field-picker [data-md-datepicker-actions]')).display === 'none'")
// The window opens six months either side of the trip's start month.
->assertScript("{$scope}.monthsFrom === '2026-03-01' && {$scope}.monthsTo === '2027-03-01'")
->assertScript(focusedDay('2026-09-13'));
// Paging seven months forward crosses the window's forward edge, growing it to cover the month walked to.
foreach (range(1, 7) as $ignored) {
$page->keys(':focus', 'PageDown');
}
$page->assertScript("{$scope}.monthsTo > '2027-03-01'")
->assertScript(focusedDay('2027-04-13'))
->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-datepicker-month-label]')].some((label) => label.textContent.trim() === 'April 2027')");
// Paging fourteen months back does the same the other way, past the original start.
foreach (range(1, 14) as $ignored) {
$page->keys(':focus', 'PageUp');
}
$page->assertScript("{$scope}.monthsFrom < '2026-03-01'")
->assertScript(focusedDay('2026-02-13'))
->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-datepicker-month-label]')].some((label) => label.textContent.trim() === 'February 2026')");
// Picking a range and pressing Save commits it and closes the dialog.
$page->script("{$scope}.moveTo('2026-09-13', false)")
->click(day('trip-field', '2026-09-20'))
->click(day('trip-field', '2026-09-24'))
->click('#trip-field-picker [data-md-datepicker-save]')
->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
->assertScript("! {$picker}.open");
});
it('closes the full-screen range picker from its app bar close button without keeping the draft', function () {
$picker = "document.querySelector('#trip-field-picker')";
dateProbe()
->resize(390, 800)
->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
->click(day('trip-field', '2026-09-20'))
->click('#trip-field-picker [data-md-datepicker-close]')
->assertScript("! {$picker}.open")
->assertSeeIn('#trip', '{"start":"2026-09-13","end":"2026-09-15"}');
});
it('reaches the month and year dropdowns with Shift+M and Shift+Y', function () {
$toggle = '[aria-controls="expires-field-picker"][data-md-datepicker-toggle]';
$page = dateProbe()
->click($toggle)
->assertScript(focusedDay('2026-09-13'));
$page->keys(':focus', 'Shift+M')
->assertScript("document.activeElement.dataset.mdDatepickerMenuButton === 'months'");
$page->keys(':focus', 'Escape')
->assertScript("! document.querySelector('#expires-field-picker').matches(':popover-open')");
$page->click($toggle)
->assertScript(focusedDay('2026-09-13'));
$page->keys(':focus', 'Shift+Y')
->assertScript("document.activeElement.dataset.mdDatepickerMenuButton === 'years'");
});
tests/Feature/Components/DatepickerTest.php
+12 -12
View File
@@ -20,7 +20,7 @@ it('draws a docked date field whose combobox controls a popover picker', functio
$html = (string) $this->blade('<x-datepicker id="expires" label="Expires on" hint="Type a date or pick one" />');
expect($html)
->toContain('data-datepicker')
->toContain('data-md-datepicker')
->toContain('<label for="expires" data-md-field-label>Expires on</label>')
->toContain('role="combobox"')
->toContain('aria-haspopup="dialog"')
@@ -34,7 +34,7 @@ it('draws a docked date field whose combobox controls a popover picker', functio
->toContain('wire:ignore')
->toContain('aria-label="Select date"')
->toContain('role="grid"')
->toContain('data-datepicker-toggle')
->toContain('data-md-datepicker-toggle')
->toContain('x-modelable="value"')
->toContain('x-on:input="typeInField()"')
->not->toMatch('/<input[^>]*\sreadonly[\s>]/')
@@ -58,16 +58,16 @@ it('gives a range picker M3\'s full-screen presentation, with an app bar and Sav
$html = (string) $this->blade('<x-datepicker id="trip" label="Trip" range mode="modal" />');
expect($html)
->toContain('data-datepicker-full')
->toContain('data-md-datepicker-full')
->toContain('x-show="presentation === \'full\'"')
->toContain('data-datepicker-app-bar')
->toContain('data-datepicker-close')
->toContain('data-datepicker-save')
->toContain('data-md-datepicker-app-bar')
->toContain('data-md-datepicker-close')
->toContain('data-md-datepicker-save')
->toContain('Save')
->toContain('aria-label="Select dates"')
// The months come from one list of rows, each headed by its label.
->toContain('x-for="row in rows"')
->toContain('data-datepicker-month-label')
->toContain('data-md-datepicker-month-label')
// The action row is the modal's; the full-screen picker confirms from its app bar.
->toContain('x-show="presentation !== \'full\' && (view === \'days\' || typing || presentation === \'modal\')"')
->toContain('x-on:scroll="extendMonths($event)"');
@@ -83,9 +83,9 @@ it('leaves the docked and single-date pickers as they were', function () {
$html = (string) $this->blade('<x-datepicker id="expires" label="Expires on" />');
expect($html)
->toContain('data-datepicker-nav data-docked')
->toContain('data-md-datepicker-nav data-md-docked')
->toContain('x-show="presentation === \'docked\'"')
->toContain('data-datepicker-menu-button="months"')
->toContain('data-md-datepicker-menu-button="months"')
->toContain('x-show="presentation === \'modal\'"');
});
@@ -93,8 +93,8 @@ it('names each dropdown so Shift+M and Shift+Y can reach it', function () {
$html = (string) $this->blade('<x-datepicker label="Birthday" />');
expect($html)
->toContain('data-datepicker-menu-button="months"')
->toContain('data-datepicker-menu-button="years"');
->toContain('data-md-datepicker-menu-button="months"')
->toContain('data-md-datepicker-menu-button="years"');
});
it('falls back to the docked picker for an unknown mode', function () {
@@ -224,7 +224,7 @@ it('replaces the hint with the errors for the property and its start and end', f
->toContain('The end must follow the start.')
->not->toContain('Pick a day')
->toContain('aria-invalid="true"')
->toContain('data-datepicker-error')
->toContain('data-md-datepicker-error')
->and(substr_count($html, 'data-md-invalid=""'))->toBe(2);
});
tests/Feature/Components/InputStylesheetsTest.php
+12 -1
View File
@@ -33,6 +33,7 @@ dataset('input components', [
'search',
'table',
'sort-header',
'datepicker',
]);
/**
@@ -163,10 +164,20 @@ function assertTokensAndPxBreakpoints(ComponentStylesheet $css, string $label):
$source = str_replace('background-color 604800s, color 604800s', '', $source);
expect($source)->not->toMatch('/#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\(/i')
->not->toMatch('/\bbox-shadow:(?!\s*(?:none|var\(--md-))/')
->not->toMatch('/\bfont:(?!\s*var\(--md-sys-typescale-)/')
->not->toMatch('/\btransition[a-z-]*:[^;]*(?:\d+m?s\b|\bease\b|ease-in|ease-out|cubic-bezier)/');
// A flat elevation (`var(--md-sys-elevation-N)`, `none`) or a ring built from a colour token
// (`inset 0 0 0 1px var(--md-sys-color-…)`, a day's or a year's "current" ring) — never a
// literal length paired with a colour the first check would not otherwise catch on its own.
preg_match_all('/\bbox-shadow:\s*([^;]+);/', $source, $shadows, PREG_SET_ORDER);
foreach ($shadows as [, $value]) {
$value = trim($value);
expect($value === 'none' || str_contains($value, 'var(--md-'))->toBeTrue("{$label}: box-shadow: {$value} is not none or built from a token");
}
assertBreakpointsInPx($css, $label);
}