Compose Multiplatform Material3/androidx.compose.material3/DateRangePicker

DateRangePicker

@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() })

Material Design date range picker

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

Date range picker image

A simple DateRangePicker looks like:

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.

Samples

androidx.compose.material3.samples.DateRangePickerSampleandroidx.compose.material3.samples.DateRangePickerApi26Sample