Skip to content

Dialog Time

This shows a time selector dialog. 24h mode is optional.

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

Generally following can be adjusted:

  • 12h/24h mode

Composable#

/**
 * Shows a dialog with a time input
 *
 *  
 *
 * **Basic Parameters:** all params not described here are derived from [Dialog], check it out for more details
 *
 * @param time the selected time
 * @param setup the [DialogTime.Setup] - use [DialogTimeDefaults.setup] to provide your own data
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DialogTime(
    state: DialogState,
    // Custom - Required
    time: MutableState<LocalTime>,
    // Custom - Optional
    setup: DialogTime.Setup = DialogTimeDefaults.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 time dialog
    val time = rememberDialogTime()
    // optional settings
    val setup = DialogTimeDefaults.setup(is24Hours = is24Hours)

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

Screenshots#

Screenshot Screenshot