Style date picker on Jetpack Compose

Question

I'm using DatePickerDialog in Jetpack Compose. I wanted to customize it with colors that fit my application instead of the default colors. I know I have to use the styles and the ContextThemeWrapper, but I don't know exactly how and what I need to change. So, how can I customize my date picker with the colors I want?

Below is the code for my DatePickerDialog:

private var dateFormat = "dd/MM/yyyy"
fun showDatePickerDialog(context: Context, dateOfBirth: MutableState<TextFieldValue>, onValueChanged: () -> Unit) {
    val calendar = getCalendar(dateOfBirth.value.text)
    DatePickerDialog(
        context,
        { _, year, month, day ->
            dateOfBirth.value = TextFieldValue(getPickedDateAsString(year, month, day))
            onValueChanged.invoke()
        },
        calendar.get(Calendar.YEAR),
        calendar.get(Calendar.MONTH),
        calendar.get(Calendar.DAY_OF_MONTH)
    )
        .show()
}

private fun getCalendar(dateOfBirth: String): Calendar {
    return if (dateOfBirth.isEmpty()) {
        Calendar.getInstance()
    } else {
        getLastPickedDateCalendar(dateOfBirth)
    }
}

private fun getLastPickedDateCalendar(dateOfBirth: String): Calendar {
    val dateFormat = SimpleDateFormat(dateFormat, Locale.getDefault())
    val calendar = Calendar.getInstance()
    calendar.time = dateFormat.parse(dateOfBirth)
    return calendar
}

private fun getPickedDateAsString(year: Int, month: Int, day: Int): String {
    val calendar = Calendar.getInstance()
    calendar.set(year, month, day)
    val dateFormat = SimpleDateFormat(dateFormat, Locale.getDefault())
    return dateFormat.format(calendar.time)
}

Answer 1

You can use a library available https://github.com/vanpra/compose-material-dialogs