README.md

Date picker

A highly customizable date picker for Jetpack Compose. Material3 theme-compatible.

Contents

• Usage
• Customization

Usage

Minimal working example of a datepicker dialog usage (see below for parameter descriptions):

var isDialogShown: Boolean by rememberSaveable {
    mutableStateOf(false)
}
var date: LocalDate? by remember {
    mutableStateOf(null)
}
if (isDialogShown) {
    DatePickerDialog(
        onDismissRequest = { isDialogShown = false },
        onDateChange = {
            date = it
            isDialogShown = false
        },
        // Optional but recommended parameter to provide the title for the dialog
        title = { Text(text = "Select date") }
    )
}

DatePickerDialog with all parameters:

@Composable
fun DatePickerDialog(
    onDismissRequest: () -> Unit,
    onDateChange: (LocalDate) -> Unit,
    modifier: Modifier = Modifier,
    initialDate: LocalDate? = null,
    locale: Locale = LocalConfiguration.current.getDefaultLocale(),
    today: LocalDate = LocalDate.now(),
    showDaysAbbreviations: Boolean = true,
    highlightToday: Boolean = true,
    colors: DatePickerColors = DatePickerDefaults.colors(),
    shapes: DatePickerShapes = DatePickerDefaults.shapes(),
    typography: DatePickerTypography = DatePickerDefaults.typography(),
    title: @Composable (() -> Unit)? = null,
    buttonColors: ButtonColors = ButtonDefaults.textButtonColors(),
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
    properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false),
)

• onDismissRequest - called when the dialog should be dismissed without user selecting a value
• onDateChange - called when user selected a value, passing it as a parameter
• modifier - a Modifier for the root @Composable
• initialDate - an initially-selected LocalDate or null
• locale - java.util.Locale used to display user-visible strings, such as names of days and months
• today - LocalDate representing today
• showDaysAbbreviations - whether or not show row with days abbreviations above the day grid
• highlightToday - whether or not highlight today in the day grid
• colors - an instance of DatePickerColors used to theme the component (see below for more info)
• shapes - an instance of DatePickerShapes used to theme the component (see below for more info)
• typography - an instance of DatePickerTypography used to theme the component (see below for more info)
• title - a @Composable slot for the dialog title - usually { Text("Select date") } or similar
• buttonColors - an instance of Material's ButtonColors to customize the appearance of dialog buttons
• shape - the shape of the AlertDialog
• containerColor - the container color of the AlertDialog
• tonalElevation - the tonal elevation of the AlertDialog
• properties - DialogProperties of the AlertDialog

Customization

Datepicker dialog provides several ways of customizing its looks. From small details controlled by showDaysAbbreviations and highlightToday to the more complex combination of different Color, Shape and Typography.

Datepicker dialog offers out-of-the-box support for light/dark theming and Material You dynamic colors, as long as your MaterialTheme is defined correctly.

The components use the design tokens that reference attributes from the MaterialTheme.

For example, passing

DatePickerDialog(
    // ...
    shapes = DatePickerDefaults.shapes(
        currentMonthDaySelected = CutCornerShape(percent = 40),
        currentMonthDayToday = RoundedCornerShape(4.dp),
    ),
)

produces

In the similar way you can customize colors, typography, and even the looks of the AlertDialog itself.

For default values see DatePickerDefaults.

Dialog button colors

Newly, there is a possibility to alter dialog buttons' colors using the buttonColors parameter. Simply pass an instance of ButtonColors:

DatePickerDialog(
    //...,
    buttonColors = ButtonDefaults.textButtonColors(
        contentColor = yourDesiredColor,
    ),
    //...,
)