# 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

```kotlin
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.

## Related components

- [Date picker](https://m3e.ljzapps.app/docs/components/date-picker.md)
- [Time picker](https://m3e.ljzapps.app/docs/components/time-picker.md)
- [Dialog](https://m3e.ljzapps.app/docs/components/dialog.md)