Time pickers help users select and set a specific time.
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun RichTimePickerScrollSample() {
var showTimePicker by remember { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
var displayMode by remember { mutableStateOf(TimePickerDisplayMode.Scroll) }
val snackScope = rememberCoroutineScope()
Box(propagateMinConstraints = false) {
Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
Text("Set Time (Switchable, Scroll)")
}
SnackbarHost(hostState = snackState)
}
if (showTimePicker) {
RichTimePickerDialog(
onDismissRequest = { showTimePicker = false },
confirmButton = {
TextButton(
enabled = state.isInputValid,
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 = {
TimePickerDialogDefaults.ScrollDisplayModeToggle(
onDisplayModeChange = {
displayMode =
if (displayMode == TimePickerDisplayMode.Scroll) {
TimePickerDisplayMode.Input
} else {
TimePickerDisplayMode.Scroll
}
},
displayMode = displayMode,
)
},
) {
if (displayMode == TimePickerDisplayMode.Input) {
TimeInput(state = state, shapes = TimePickerDefaults.shapes())
} else {
TimeScroll(state = state, shapes = TimePickerDefaults.shapes())
}
}
}
}