Skip to content

Extra

DatePickerSheet

A FormaUI date picker presented in a modal bottom sheet — Material 3's inline DatePicker hosted in a FormaBottomSheet instead of the M3 DatePickerDialog, with hoisted M3 state, confirm/dismiss button slots, and the calendar-to-text-input mode toggle.

dev.formaui.components.datepicker

Calendar modeText-input mode (initialDisplayMode or the mode toggle)With dismiss buttonMode toggle hiddenCustom colors

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

val state = rememberDatePickerState()
if (open) {
    FormaDatePickerSheet(
        onDismissRequest = { open = false },
        state = state,
        confirmButton = {
            FormaButton(
                onClick = { onPicked(state.selectedDateMillis); open = false },
                enabled = state.selectedDateMillis != null,
            ) { Text("OK") }
        },
    )
}

FormaDatePickerSheet

Hosts M3's stable DatePicker in a FormaBottomSheet above an end-aligned button row. State is the caller's DatePickerState and the component wires nothing to the button slots — the confirm slot reads state.selectedDateMillis itself (so it can disable itself until a date is picked). The default colors make the picker's own container transparent so it sits directly on the sheet surface.

onDismissRequestrequiredType() -> UnitDefaultrequiredDescriptioncalled when the sheet is dismissed (scrim tap, back press, or swipe down) — hide the sheet by no longer composing it. There is no separate cancel callback; treat a dismiss as closed-without-confirming.
staterequiredTypeDatePickerStateDefaultrequiredDescriptionthe hoisted Material 3 state; create it with rememberDatePickerState. Read state.selectedDateMillis (UTC epoch millis, Long?) in the confirm slot's click handler. The picker's locale is captured when the state is created (Material 3 behavior).
confirmButtonrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe primary action slot (required), typically a FormaButton. The component attaches no click handling or label — the slot owns both.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the sheet.
dismissButtonType(@Composable () -> Unit)?DefaultnullDescriptionthe optional secondary/cancel action slot, shown before confirmButton.
showModeToggleTypeBooleanDefaulttrueDescriptionwhether the picker shows Material 3's calendar-to-text-input mode toggle.
skipPartiallyExpandedTypeBooleanDefaulttrueDescriptionwhether the sheet skips the half-expanded state and opens fully. Defaults to true — deliberately unlike FormaBottomSheet — because the half-expanded state clips the calendar grid.
shapeTypeShape?DefaultnullDescriptionthe sheet container shape. When null, Material 3's top-rounded default is used.
colorsTypeDatePickerColors?DefaultnullDescriptionthe DatePickerColors for the picker. When null, Material 3's defaults are used with a transparent picker container so the picker sits directly on the sheet surface (avoiding a container-on-container seam). A supplied value is passed through untouched.

Supporting API

rememberDatePickerStatefunction (Material 3)
The component defines no state type of its own — callers create and own the picker state via Material 3's rememberDatePickerState (initial date, selectableDates, yearRange, initialDisplayMode, saveability) and read selectedDateMillis from it.

Accessibility

Inherits Material 3's DatePicker semantics — day cells expose full-date content descriptions, the mode toggle has its own content description, and navigation controls are labeled — plus ModalBottomSheet's back-press and scrim dismiss handling; the button slots are caller-supplied (typically FormaButtons with M3's 48dp minimum touch target).