East Blue
RemoveNot Applicable
Date Picker - Group Component link

The calendar surface that hosts the Day/Month/Year picker grids.

Superseded by Date Picker - Calendar
Superseded by Date Picker - Calendar. The calendar surface was rebuilt at node 6769:105110 and is now composed from Date Picker - Cell and Date Picker - Header instances rather than redrawn. Type became Mode = Day | Year | Month, the chevrons are icon instances, and Month gained its missing chevron. Kept as a record of the assessment that drove the consolidation.
In Context

The group appears immediately below the Date Picker trigger when it enters State=Active. The three Type variants swap when the user taps the header (Date → Year → Month).

SuMTWThFSa
Live Preview
Month / Year
Su
M
T
W
Th
F
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
Properties
Type
DS Health
Reusable
Warn
The surface is shared across 3 variants but cannot be reused outside the Date Picker family — no slot, no header customization, no way to change grid dimensions. Re-implementing the same card pattern for any other calendar-like grid (e.g. event picker) means rebuilding it from scratch.
Self-contained
Warn
Carries bg, border, radius, shadow, and header tokens — but chevron glyphs are raster images referenced by URL, not vector icon instances. The Year variant also overlays a fake drawn Scrollbar rectangle instead of using a scrollable container.
Consistent
Warn
Type = Date | Year | Month is misleading — "Date" means day-grid view. Native convention is mode: day | month | year. Month variant has only a Next chevron (no Prev), asymmetric from Date and Year. Day cells use day-of-week layer names (Sunday...Saturday) as semantic roles.
Composable
Fail
Not composable into a native picker. Both SwiftUI DatePicker and Compose DatePickerDialog render their own calendar surface internally — this Figma component has no 1:1 native primitive. It also is currently nested inline inside the trigger (see Date Picker), not exposed as a standalone overlay.
Behavior
State iOS Android Figma Property Notes
Day grid Yes Yes Type=Date 6 rows × 7 cols. Weekday header (Su/M/T/W/Th/F/Sa). Today shown with 1.5px blue ring. Prev/next month days dimmed.
Year grid Yes Yes Type=Year 3-col grid with overflow-clip and a drawn "Scrollbar" decoration. Selected year shown with 1px blue ring + blue label.
Month grid Yes Yes Type=Month 3-col grid with all 12 months. Missing Prev chevron — only Next is drawn. Selected month shown with 1px blue ring.
Cell: Today / Selected Yes Yes Date Picker - Item state 1.5px blue ring on day cells; 1px blue ring on year/month cells. Native pickers fill the cell with tint instead of ringing it.
Cell: Pressed / Hover / Focus No No — Missing. Native pickers provide these automatically; a DS wrapper only needs to tint them.
In-range / Range start / Range end No No — Not defined. Both platforms support date-range selection; the DS has no tokens or visuals for it.
Disabled cell No No — No business-rule disabled state (e.g. minDate/maxDate). Only the "prev/next month" greyed variant exists.
Keyboard navigation / focus ring No No — No focus styling. Native pickers handle keyboard+TalkBack/VoiceOver by default; the DS needs to preserve that.
1.0.0 — April 2026Major
Initial Assessment · node 18431:2822
Component assessed — 3 variants (Date, Year, Month) at 360×296. Shared header, bg, border, shadow. All panel-level colors and spacing bound to tokens. Documented
Initial
Day cells named by weekday — Layers named Sunday, Monday...Saturday instead of index/role. Weekday is data, not layer identity. Open
C1 Open
Type axis misleading — "Date" means day-grid view. Rename to mode = day | month | year to match SwiftUI / Material 3 terminology. Open
C2 Open
Year variant: drawn Scrollbar decoration — Node 18414:6277 is a 4×80 pill absolutely positioned over the Year grid. Native pickers render the scroll indicator automatically; this decoration misrepresents scroll state. Open
C4 Open
Month variant: Prev chevron missing — Header has only the Next chevron. Asymmetric with Date and Year. Open
C4 Open
No native primitive for the drawn surface — SwiftUI DatePicker(.graphical) and Material 3 DatePicker own the full calendar. Recommend wrapping and tokenizing, not redrawing. Open
C4 Open
Cell states missing — No Pressed, Hover/Focus, In-range, Range-start, Range-end, or business-rule Disabled coverage. Only Today (day) and Selected (year/month) exist. Open
C5 Open
Chevrons are raster glyphs — Both Prev and Next in every variant reference shape_full image URLs. Replace with vector icon instances. Open
C6 Open
No dedicated panel token scope — Panel bg/border reuse main/date-picker/month-header/*. Add a main/date-picker/group/* scope. Open
C6 Open
Code Connect not registered — Blocked by the native-wrapper direction and by the pending Picker Cell unification. Open
C7 Open