Dialog Date

This shows a date selector dialog. First day of week, labels, and style can be adjusted to your needs.

Check out the composable and it's documentation in the code snipplet below.

Generally following can be adjusted:

custom texts
custom first day of week
cel height of the calendar
optional next/previous month buttons

Composable#

/**
 * Shows a dialog with an input field
 *
 * &nbsp;
 *
 * **Basic Parameters:** all params not described here are derived from [Dialog], check it out for more details
 *
 * @param date the selected date state
 * @param dateRange the supported [DialogDate.Range] - use [DialogDateDefaults.dateRange] to provide your own data
 * @param setup the [DialogDate.Setup] - use [DialogDateDefaults.setup] to provide your own data
 */
@Composable
fun DialogDate(
    state: DialogState,
    // Custom - Required
    date: MutableState<LocalDate>,
    // Custom - Optional
    dateRange: DialogDate.Range = DialogDateDefaults.dateRange(),
    setup: DialogDate.Setup = DialogDateDefaults.setup(),
    // Base Dialog - Optional
    title: (@Composable () -> Unit)? = null,
    icon: (@Composable () -> Unit)? = null,
    style: ComposeDialogStyle = DialogDefaults.defaultDialogStyle(),
    buttons: DialogButtons = DialogDefaults.buttons(),
    options: Options = Options(),
    onEvent: (event: DialogEvent) -> Unit = {}
)

Example#

if (state.visible) {

    // special state for date dialog
    val date = rememberDialogDate()
    // optional settings
    var setup = DialogDateDefaults.setup(
        dateCellHeight = 32.dp
    )
    if (customSetup) {
        setup = DialogDateDefaults.setup(
            buttonToday = { enabled, onClick ->
                FilledIconButton(onClick = onClick, enabled = enabled) {
                    Icon(Icons.Default.Today, null)
                }
            },
            firstDayOfWeek = DayOfWeek.SUNDAY,
            dateCellHeight = 32.dp,
            showNextPreviousMonthButtons = false,
            showNextPreviousYearButtons = false,
            // formats are just defined as they are already by default, but you
            // see how you could simply change them...
            formatterWeekDayLabel = { it.getDisplayName(TextStyle.SHORT, Locale.getDefault()) },
            formatterSelectedDate = {
                it.toJavaLocalDate().format(DateTimeFormatter.ofLocalizedDate(FormatStyle.LONG))
            },
            formatterSelectedMonth = {
                it.getDisplayName(
                    TextStyle.SHORT,
                    Locale.getDefault()
                )
            },
            formatterSelectedYear = { it.toString() },
            formatterMonthSelectorList = {
                it.getDisplayName(
                    TextStyle.FULL,
                    Locale.getDefault()
                )
            },
            formatterYearSelectorList = { it.toString() }
        )
    }
    val dateRange = DialogDateDefaults.dateRange()

    DialogDate(
        state = state,
        date = date,
        setup = setup,
        dateRange = dateRange,
        icon = icon,
        title = { Text("Select Date") },
        style = style,
        onEvent = {
            if (it is DialogEvent.Button && it.button == DialogButtonType.Positive) {
                context.showToast("Selected Date: ${date.value}")
            } else {
                context.showToast("Event $it")
            }
        }
    )
}

Screenshots#