TimeInput

Functions summary

Unit
@Composable
@ExperimentalMaterial3Api
TimeInput(
    state: TimePickerState,
    modifier: Modifier,
    colors: TimePickerColors
)

Time pickers help users select and set a specific time.

Cmn

Functions

TimeInput

@Composable
@ExperimentalMaterial3Api
fun TimeInput(
    state: TimePickerState,
    modifier: Modifier = Modifier,
    colors: TimePickerColors = TimePickerDefaults.colors()
): Unit

Time pickers help users select and set a specific time.

Shows a time input that allows the user to enter the time via two text fields, one for minutes and one for hours Subscribe to updates through TimePickerState

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Button
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.TimePickerDialogDefaults
import androidx.compose.material3.TimePickerDisplayMode
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

var showTimePicker by remember { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
val snackScope = rememberCoroutineScope()

Box(propagateMinConstraints = false) {
    Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
        Text("Set Time")
    }
    SnackbarHost(hostState = snackState)
}

if (showTimePicker) {
    TimePickerDialog(
        title = { TimePickerDialogDefaults.Title(displayMode = TimePickerDisplayMode.Input) },
        onDismissRequest = { showTimePicker = false },
        confirmButton = {
            TextButton(
                onClick = {
                    val cal = Calendar.getInstance()
                    cal.set(Calendar.HOUR_OF_DAY, state.hour)
                    cal.set(Calendar.MINUTE, state.minute)
                    cal.isLenient = false
                    snackScope.launch {
                        snackState.showSnackbar("Entered time: ${formatter.format(cal.time)}")
                    }
                    showTimePicker = false
                }
            ) {
                Text("Ok")
            }
        },
        dismissButton = { TextButton(onClick = { showTimePicker = false }) { Text("Cancel") } },
        modeToggleButton = {},
    ) {
        TimeInput(state = state)
    }
}
Parameters
state: TimePickerState

state for this timepicker, allows to subscribe to changes to TimePickerState.hour and TimePickerState.minute, and set the initial time for this picker.

modifier: Modifier = Modifier

the Modifier to be applied to this time input

colors: TimePickerColors = TimePickerDefaults.colors()

colors TimePickerColors that will be used to resolve the colors used for this time input in different states. See TimePickerDefaults.colors.