Custom Material3 Jetpack Compose Date picker

Material3 has two components that are easy to use when we need to use dates.

• DatePicker
• DialogDatePicker

DatePicker

This component is straightforward to use. With just few lines you can have basic functionality

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomDatePicker() {
    val state = rememberDatePickerState()
    DatePicker(state = state)
}

DatePickerDialog

This component it is just a dialog for holding the datepicker

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomDatePicker() {
    val state = rememberDatePickerState()
    DatePickerDialog(
        onDismissRequest = {  },
        confirmButton = { }) {
      DatePicker(state = state)
    }
}

Using both components we can build a a custom datepicker acording our requeriment. In my case, I just needed a TextField that shows the Date and that shows the Dialog when it is clicked.

1. First, we put a TextField and a Button

val date = remember {…