CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-stylesandroid-datepicker
R0ck
R0ck

Reputation: 499

Style date picker on Jetpack Compose

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)
}

Upvotes: 1

Views: 4681

Answers (2)

Liz Veck
Liz Veck

Reputation: 21

The new composable DatePickerDialog for Materials3 has a property of color with all the different defaults listed so you can set each to a theme:

DatePickerDialog(
    colors = DatePickerDefaults.colors(
        containerColor = ,
        titleContentColor = ,
        headlineContentColor = ,
        weekdayContentColor = ,
        subheadContentColor = ,
        yearContentColor = ,
        currentYearContentColor = ,
        selectedYearContentColor = ,
        selectedYearContainerColor = ,
        dayContentColor = ,
        disabledDayContentColor = ,
        selectedDayContentColor = ,
        disabledSelectedDayContentColor =,
        selectedDayContainerColor = ,
        disabledSelectedDayContainerColor = ,
        todayContentColor = ,
        todayDateBorderColor =)
 ){
        DatePicker()
 }

Here is the link to the Dialog - https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#DatePickerDialog(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.material3.DatePickerColors,androidx.compose.ui.window.DialogProperties,kotlin.Function1)

Upvotes: 2

pushpull
pushpull

Reputation: 144

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

Upvotes: 1

Related Questions