TimePicker

Composable Component

A full screen TimePicker with configurable columns that allows users to select a time.

Android

@RequiresApi(Build.VERSION_CODES.O)
@Composable
public fun TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier = Modifier,
    timePickerType: TimePickerType = TimePickerDefaults.timePickerType,
    colors: TimePickerColors = TimePickerDefaults.timePickerColors(),
)

Parameters


initialTime	The initial time to be displayed in the TimePicker.
onTimePicked	The callback that is called when the user confirms the time selection. It provides the selected time as `LocalTime`.
modifier	Modifier to be applied to the `Box` containing the UI elements.
timePickerType	The different `TimePickerType` supported by this time picker. It indicates whether to show seconds or AM/PM selector as well as hours and minutes.
colors	`TimePickerColors` be applied to the TimePicker.

Code Examples

TimePickerSample

@Composable
fun TimePickerSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    val formatter =
        DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
            .withLocale(LocalConfiguration.current.locales[0])
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            initialTime = timePickerTime, // Initialize with last picked time on reopen
        )
    } else {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Button(
                onClick = { showTimePicker = true },
                label = { Text("Selected Time") },
                secondaryLabel = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}

TimePickerWith12HourClockSample

@Composable
fun TimePickerWith12HourClockSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    val formatter = DateTimeFormatter.ofPattern("hh:mm a")
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            timePickerType = TimePickerType.HoursMinutesAmPm12H,
            initialTime = timePickerTime, // Initialize with last picked time on reopen
        )
    } else {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Button(
                onClick = { showTimePicker = true },
                label = { Text("Selected Time") },
                secondaryLabel = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}

TimePickerWithSecondsSample

@Composable
fun TimePickerWithSecondsSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    val formatter = DateTimeFormatter.ofPattern("HH:mm:ss")
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            timePickerType = TimePickerType.HoursMinutesSeconds24H,
            initialTime = timePickerTime, // Initialize with last picked time on reopen
        )
    } else {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Button(
                onClick = { showTimePicker = true },
                label = { Text("Selected Time") },
                secondaryLabel = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}

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