Date range picker

Lets people pick a start and an end date on a scrolling calendar.

Category: Selection and input
API status: Stable
Compose APIs: DateRangePicker, rememberDateRangePickerState, DatePickerDialog
Interactive page: https://m3e.ljzapps.app/#components/date-range-picker

When to use

Use it for stays, trips and reports. The first tap sets the start, the second sets the end. Offer the text input mode for people who prefer to type.

Give the picker a fixed height or a weight, because the calendar scrolls inside it.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

In a dialog

var open by rememberSaveable { mutableStateOf(false) }
val state = rememberDateRangePickerState()

Button(onClick = { open = true }) { Text("Pick a range") }

if (open) {
    DatePickerDialog(
        onDismissRequest = { open = false },
        confirmButton = { TextButton(onClick = { open = false }) { Text("Save") } },
        dismissButton = { TextButton(onClick = { open = false }) { Text("Cancel") } },
    ) {
        DateRangePicker(state = state, modifier = Modifier.height(500.dp))
    }
}

Parameters

Name	Type	Default	Description
`state`	`DateRangePickerState`		Exposes selectedStartDateMillis and selectedEndDateMillis.
`selectableDates`	`SelectableDates`	`AllDates`	Restrict dates.
`showModeToggle`	`Boolean`	`true`	Switch between calendar and input.

Guidelines

Do:

Show the number of nights or days.
Block unavailable dates and say why.

Don't:

Do not use for a single date.
Do not hide the confirm button below the fold.

Accessibility

Announce the selected range, for example June 3 to June 7.
Arrow keys move the focus between days.