← Back to Compose Multiplatform
DateRangePicker
Component
in
Compose Multiplatform
. Since 1.4.0-rc01
Overview
Examples
Community Notes
<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
| Name | Description |
|---|---|
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 |
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 |
colors | DatePickerColors that will be used to resolve the colors used for this date range picker in different states. See DatePickerDefaults.colors |
Previous Component← DatePicker
Next ComponentDateRangePickerTitle →