A month as a grid you can click or move through with the keyboard, and the date range picker built on it: the list's date filter (D37). It came out of the date range picker research: presets first, a calendar for the rest, and typing always possible. Drawn for 8 Oct 2026, the concept's today, with a span picked from 8 Sep to 3 Oct.
The date range picker
Ten presets in a rail, short spans to long, All time first; they apply at once and close. Custom is everything else: From and To take typing, two months take clicks, and the span waits for Apply. A span that matches a preset is that preset. Days after today are off for a date that can only be in the past, and the foot says which date it filters by.
September 2026
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
October 2026
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
By created date · 26 days · Eastern time
The button says which date
All time at rest; once set, the date it filters by and then the preset or the dates, with the month as a word so 9/10 can't be read two ways. On phones only the value shows, and it gives way before the search field.
A month, and its days
October 2026
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| Day | How it shows | Markup |
|---|---|---|
| Today | An outline | td[data-today] |
| Picked, one day | Filled, inverse | td[data-range="single"][aria-selected] |
| A span's ends | Filled; the band reaches in from the inside | td[data-range="start|end"] |
| Inside a span | The selected band, joined across the week, rounded where it starts or stops | td[data-range="in"][data-cap] |
| After today | Muted, can't be picked | button:disabled |
| Focus | The ring, on one day at a time | tabindex 0 on that day |
On phones
The same bottom sheet as every other menu. The presets are the list (All time, Today, Last 7 days, Last 30 days, This month, Last month), then Custom…, which drills in to From and To, the last twelve months and this one in a column that scrolls, and Apply pinned to the bottom. Try it on the List page's phone frame.
Keyboard (I14)
| Keys | What they do |
|---|---|
| Tab | Presets, From, To, the month arrows, the calendar (one stop, on the focus day), Cancel, Apply |
| ↑ ↓ in the presets | The previous or next preset; Enter applies it |
| ← → ↑ ↓ | A day back or on, a week back or on; the months follow |
| Home, End | The week's first or last day |
| Page Up, Page Down | A month back or on; with Shift, a year |
| Enter, Space | Picks the day: the first pick starts a span, the second ends it |
| Enter in From or To | Reads the typed date: Sep 8, 2026 · 8 Sep 2026 · Sep 8 · 9/8/2026 · 2026-09-08 |
| Escape | Closes without applying, back on the button |
Rules
- Presets apply at once; a span built by hand waits for Apply.
- Typing is always possible; a date that isn't one, or is after today for a past date, is flagged and Apply waits.
- Weeks start on Monday, the weekend together at their end (D76); days are the company's days, and the foot says so.
- A saved view or a page description can hold a span relative to today: “..-91” is more than 90 days ago.