TimeInput
Composable Component
Time pickers help users select and set a specific time.
Common
@Composable
@ExperimentalMaterial3Api
fun TimeInput(
state: TimePickerState,
modifier: Modifier = Modifier,
colors: TimePickerColors = TimePickerDefaults.colors(),
)
Parameters
state | state for this timepicker, allows to subscribe to changes to TimePickerState.hour and TimePickerState.minute , and set the initial time for this picker. |
modifier | the Modifier to be applied to this time input |
colors | colors TimePickerColors that will be used to resolve the colors used for this time input in different states. See TimePickerDefaults.colors . |
Code Examples
TimeInputSample
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun TimeInputSample() {
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)
}
}
}
Create your own Component Library
Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled