Inline date picker
Embed a DatePicker directly in the layout.
val state = rememberDatePickerState()
DatePicker(state = state)Date & Time Pickers
Inline date picker, date dialog, and time picker
Pickers let people choose a date or time. Material 3 provides an inline DatePicker, a DatePickerDialog for modal selection, and a TimePicker with a clock face.
Examples
Date picker dialog
A Button opens a modal dialog and shows the picked date.
val state = rememberDatePickerState()
var open by remember { mutableStateOf(false) }
Button(onClick = { open = true }) { Text("Pick a date") }
Text(formatDate(state.selectedDateMillis))
if (open) {
DatePickerDialog(
onDismissRequest = { open = false },
confirmButton = { TextButton(onClick = { open = false }) { Text("OK") } }
) { DatePicker(state = state) }
}Time picker
A TimePicker with a clock face reflects the chosen time.
val state = rememberTimePickerState(initialHour = 9, initialMinute = 30)
TimePicker(state = state)
Text(String.format(Locale.US, "%02d:%02d", state.hour, state.minute))