compose-preview Material 3 Design Kit

Date & time pickers

6 of 96 components implemented · Open in Figma

Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets
Type=Today, State=Disabled — no code behind this Type=Default, State=Disabled — no code behind this Type=Selected (Middle), State=Pressed — no code behind this Type=Selected, State=Pressed — no code behind this Type=Today, State=Pressed — no code behind this Type=Default, State=Pressed — no code behind this Type=Selected (Middle), State=Focused — no code behind this Type=Selected, State=Focused — no code behind this Type=Today, State=Focused — no code behind this Type=Default, State=Focused — no code behind this Type=Selected (Middle), State=Hovered — no code behind this Type=Selected, State=Hovered — no code behind this Type=Today, State=Hovered — no code behind this Type=Default, State=Hovered — no code behind this Type=Null, State=Enabled — no code behind this Type=Prev/Next, State=Enabled — no code behind this Type=Prev/Next, State=Hovere — no code behind this Type=Prev/Next, State=Focused — no code behind this Type=Selected (Middle), State=Enabled — no code behind this Type=Selected, State=Enabled — no code behind this Type=Today, State=Enabled — no code behind this Type=Default, State=Enabled — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Pressed — no code behind this Selected=False, State=Pressed — no code behind this Selected=True, State=Focused — no code behind this Selected=False, State=Focused — no code behind this Selected=True, State=Hovered — no code behind this Selected=False, State=Hovered — no code behind this Selected=True, State=Enabled — no code behind this Selected=False, State=Enabled — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Disabled — no code behind this Type=Year — no code behind this Type=Month — no code behind this Type=Day — no code behind this Type=Range — no code behind this Type=Single input — no code behind this Type=Full-screen (range) — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/DatePickers.kt#DateRangePickerSticker Type=Year — no code behind this Type=Day — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/DatePickers.kt#DatePickerModalSticker Selected=True, State=Focused — no code behind this Selected=True, State=Hovered — no code behind this Selected=True, State=Enabled — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Enabled — no code behind this Selected=True — no code behind this Selected=False — no code behind this Selected=True — no code behind this Selected=False — no code behind this AM/PM=True, State=Focused — no code behind this AM/PM=True, State=Hovered — no code behind this AM/PM=True, State=Enabled — no code behind this AM/PM=False, State=Focused — no code behind this AM/PM=False, State=Hovered — no code behind this AM/PM=False, State=Enabled — no code behind this AM/PM=False, State=Enabled — no code behind this AM/PM=False, State=Hovered — no code behind this AM/PM=False, State=Focused — no code behind this AM/PM=True, State=Enabled — no code behind this AM/PM=True, State=Hovered — no code behind this AM/PM=True, State=Focused — no code behind this Line-angle=13 — no code behind this Line-angle=14 — no code behind this Line-angle=15 — no code behind this Line-angle=16 — no code behind this Line-angle=17 — no code behind this Line-angle=18 — no code behind this Line-angle=19 — no code behind this Line-angle=20 — no code behind this Line-angle=21 — no code behind this Line-angle=22 — no code behind this Line-angle=23 — no code behind this Line-angle=24 — no code behind this Line-angle=1 — no code behind this Line-angle=2 — no code behind this Line-angle=3 — no code behind this Line-angle=4 — no code behind this Line-angle=5 — no code behind this Line-angle=6 — no code behind this Line-angle=7 — no code behind this Line-angle=8 — no code behind this Line-angle=9 — no code behind this Line-angle=10 — no code behind this Line-angle=11 — no code behind this Line-angle=12 — no code behind this Format=24 hour, Orientation=Horizontal — no code behind this Format=24 hour, Orientation=Vertical — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimePickerSticker Format=12 hour, Orientation=Horizontal — no code behind this Format=12 hour, Orientation=Vertical — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimePickerSticker Format=24 hour — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimeInputSticker Format=12 hour — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimeInputSticker
6 of 96 components implemented
Type=Today, State=Disabledno code behind this Type=Default, State=Disabledno code behind this Type=Selected (Middle), State=Pressedno code behind this Type=Selected, State=Pressedno code behind this Type=Today, State=Pressedno code behind this Type=Default, State=Pressedno code behind this Type=Selected (Middle), State=Focusedno code behind this Type=Selected, State=Focusedno code behind this Type=Today, State=Focusedno code behind this Type=Default, State=Focusedno code behind this Type=Selected (Middle), State=Hoveredno code behind this Type=Selected, State=Hoveredno code behind this Type=Today, State=Hoveredno code behind this Type=Default, State=Hoveredno code behind this Type=Null, State=Enabledno code behind this Type=Prev/Next, State=Enabledno code behind this Type=Prev/Next, State=Hovereno code behind this Type=Prev/Next, State=Focusedno code behind this Type=Selected (Middle), State=Enabledno code behind this Type=Selected, State=Enabledno code behind this Type=Today, State=Enabledno code behind this Type=Default, State=Enabledno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Pressedno code behind this Selected=False, State=Pressedno code behind this Selected=True, State=Focusedno code behind this Selected=False, State=Focusedno code behind this Selected=True, State=Hoveredno code behind this Selected=False, State=Hoveredno code behind this Selected=True, State=Enabledno code behind this Selected=False, State=Enabledno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Disabledno code behind this Type=Yearno code behind this Type=Monthno code behind this Type=Dayno code behind this Type=Rangeno code behind this Type=Single inputno code behind this Type=Full-screen (range)catalog/src/main/kotlin/ee/schimke/m3catalog/sections/DatePickers.kt#DateRangePickerSticker Type=Yearno code behind this Type=Daycatalog/src/main/kotlin/ee/schimke/m3catalog/sections/DatePickers.kt#DatePickerModalSticker Selected=True, State=Focusedno code behind this Selected=True, State=Hoveredno code behind this Selected=True, State=Enabledno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Enabledno code behind this Selected=Trueno code behind this Selected=Falseno code behind this Selected=Trueno code behind this Selected=Falseno code behind this AM/PM=True, State=Focusedno code behind this AM/PM=True, State=Hoveredno code behind this AM/PM=True, State=Enabledno code behind this AM/PM=False, State=Focusedno code behind this AM/PM=False, State=Hoveredno code behind this AM/PM=False, State=Enabledno code behind this AM/PM=False, State=Enabledno code behind this AM/PM=False, State=Hoveredno code behind this AM/PM=False, State=Focusedno code behind this AM/PM=True, State=Enabledno code behind this AM/PM=True, State=Hoveredno code behind this AM/PM=True, State=Focusedno code behind this Line-angle=13no code behind this Line-angle=14no code behind this Line-angle=15no code behind this Line-angle=16no code behind this Line-angle=17no code behind this Line-angle=18no code behind this Line-angle=19no code behind this Line-angle=20no code behind this Line-angle=21no code behind this Line-angle=22no code behind this Line-angle=23no code behind this Line-angle=24no code behind this Line-angle=1no code behind this Line-angle=2no code behind this Line-angle=3no code behind this Line-angle=4no code behind this Line-angle=5no code behind this Line-angle=6no code behind this Line-angle=7no code behind this Line-angle=8no code behind this Line-angle=9no code behind this Line-angle=10no code behind this Line-angle=11no code behind this Line-angle=12no code behind this Format=24 hour, Orientation=Horizontalno code behind this Format=24 hour, Orientation=Verticalcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimePickerSticker Format=12 hour, Orientation=Horizontalno code behind this Format=12 hour, Orientation=Verticalcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimePickerSticker Format=24 hourcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimeInputSticker Format=12 hourcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TimePickers.kt#TimeInputSticker