DateRangePicker

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

Common

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

Parameters


state	state of the date range picker. See `rememberDateRangePickerState`.
modifier	the `Modifier` to be applied to this date range picker
dateFormatter	a `DatePickerFormatter` that provides formatting skeletons for dates display
colors	`DatePickerColors` that will be used to resolve the colors used for this date range picker in different states. See `DatePickerDefaults.colors`.
title	the title to be displayed in the date range picker
headline	the headline to be displayed in the date range picker
showModeToggle	indicates if this DateRangePicker should show a mode toggle action that transforms it into a date range input
focusRequester	a focus requester that will be used to focus the text field when the date picker is in an input mode. Pass `null` to not focus the text field if that's the desired behavior.