Compose Multiplatform Material3/androidx.compose.material3/DatePicker

DatePicker

@Composable
fun DatePicker(state: DatePickerState, modifier: Modifier = Modifier, dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, title: @Composable () -> Unit? = { DatePickerDefaults.DatePickerTitle( displayMode = state.displayMode, modifier = Modifier.padding(DatePickerTitlePadding) ) }, headline: @Composable () -> Unit? = { DatePickerDefaults.DatePickerHeadline( selectedDateMillis = state.selectedDateMillis, displayMode = state.displayMode, dateFormatter = dateFormatter, modifier = Modifier.padding(DatePickerHeadlinePadding) ) }, showModeToggle: Boolean = true, colors: DatePickerColors = DatePickerDefaults.colors())

Material Design date picker.

Date pickers let people select a date and preferably should be embedded into Dialogs. See DatePickerDialog.

By default, a date picker lets you pick a date via a calendar UI. However, it also allows switching into a date input mode for a manual entry of dates using the numbers on a keyboard.

Date picker image

A simple DatePicker looks like:

Parameters

state

state of the date picker. See rememberDatePickerState.

modifier

the Modifier to be applied to this date picker

dateFormatter

a DatePickerFormatter that provides formatting skeletons for dates display

title

the title to be displayed in the date picker

headline

the headline to be displayed in the date picker

showModeToggle

indicates if this DatePicker should show a mode toggle action that transforms it into a date input

colors

DatePickerColors that will be used to resolve the colors used for this date picker in different states. See DatePickerDefaults.colors.

Samples

androidx.compose.material3.samples.DatePickerSampleandroidx.compose.material3.samples.DateInputSampleandroidx.compose.material3.samples.DatePickerWithDateSelectableDatesSample