State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

DateRangePicker

Component
in
Material 3
. Since 1.1.0

Overview

Code Examples

<a href="https://m3.material.io/components/date-pickers/overview" class="external" target="_blank">Material Design date range picker</a>.

Date range pickers let people select a range of dates and can be embedded into Dialogs.

!Date range picker image(https://developer.android.com/images/reference/androidx/compose/material3/range-picker.png)

A simple DateRangePicker looks like:

Overloads

DateRangePicker

@ExperimentalMaterial3Api
@Composable
fun DateRangePicker(
    state: DateRangePickerState,
    modifier: Modifier = Modifier,
    dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() },
    title: (@Composable () -> Unit)? = {
        DateRangePickerDefaults.DateRangePickerTitle(
            displayMode = state.displayMode,
            modifier = Modifier.padding(DateRangePickerTitlePadding)
        )
    },
    headline: (@Composable () -> Unit)? = {
        DateRangePickerDefaults.DateRangePickerHeadline(
            selectedStartDateMillis = state.selectedStartDateMillis,
            selectedEndDateMillis = state.selectedEndDateMillis,
            displayMode = state.displayMode,
            dateFormatter,
            modifier = Modifier.padding(DateRangePickerHeadlinePadding)
        )
    },
    showModeToggle: Boolean = true,
    colors: DatePickerColors = DatePickerDefaults.colors()
)

Parameters

NameDescription
statestate of the date range picker. See rememberDateRangePickerState.
modifierthe Modifier to be applied to this date range picker
dateFormattera DatePickerFormatter that provides formatting skeletons for dates display
titlethe title to be displayed in the date range picker
headlinethe headline to be displayed in the date range picker
showModeToggleindicates if this DateRangePicker should show a mode toggle action that transforms it into a date range input
colorsDatePickerColors that will be used to resolve the colors used for this date range picker in different states. See DatePickerDefaults.colors