Skip to content

Date picker dialog

A date picker in a dialog; here limited to adults' birth dates, with a year grid behind the title.

Date picker dialog Date picker dialog

var open by remember {
    mutableStateOf(
        value = false,
    )
}
JengaButton(
    text = "Pick a date",
    onClick = { open = true },
    variant = JengaButtonVariant.Outline,
)
if (open) {
    JengaDatePickerDialog(
        onDismissRequest = { open = false },
        onConfirm = { open = false },
        dateRange = LocalDate(
            year = 1906,
            month = 1,
            day = 1,
        )..LocalDate(
            year = 2008,
            month = 10,
            day = 28,
        ),
        yearPickerLabel = { "Choose year, ${it.year}" },
        confirmLabel = "OK",
        dismissLabel = "Cancel",
        monthTitle = { yearMonth ->
            val monthName = yearMonth.month.name.lowercase().replaceFirstChar(
                transform = Char::uppercase,
            )
            "$monthName ${yearMonth.year}"
        },
        dayOfWeekLabel = {
            it.name.take(
                n = 2,
            ).lowercase().replaceFirstChar(
                transform = Char::uppercase,
            )
        },
        previousMonthContentDescription = "Previous month",
        nextMonthContentDescription = "Next month",
    )
}