# TimePicker

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePicker.composable#TimePicker(androidx.compose.material3.TimePickerState,androidx.compose.ui.Modifier,androidx.compose.material3.TimePickerColors,androidx.compose.material3.TimePickerLayoutType)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerColors, layoutType: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerLayoutType )` [Material Design time picker](https://m3.material.io/components/time-pickers/overview) | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePicker.composable#TimePicker(androidx.compose.material3.TimePickerState,androidx.compose.material3.TimePickerShapes,androidx.compose.ui.Modifier,androidx.compose.material3.TimePickerColors,androidx.compose.material3.TimePickerLayoutType)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerShapes, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerColors, layoutType: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerLayoutType )` [Material Design time picker](https://m3.material.io/components/time-pickers/overview) | Cmn |

## Functions

### TimePicker

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/TimePicker.kt+function:TimePicker)

```
@Composable
fun TimePicker(
    state: TimePickerState,
    modifier: Modifier = Modifier,
    colors: TimePickerColors = TimePickerDefaults.colors(),
    layoutType: TimePickerLayoutType = TimePickerDefaults.layoutType()
): Unit
```

[Material Design time picker](https://m3.material.io/components/time-pickers/overview)

Time pickers help users select and set a specific time.

Shows a picker that allows the user to select time. Subscribe to updates through `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState`

![Time picker
image](https://developer.android.com/images/reference/androidx/compose/material3/time-picker.png)

```kotlin
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.TimePicker
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.TimePickerDialogDefaults
import androidx.compose.material3.TimePickerDisplayMode
import androidx.compose.material3.isHourInputValid
import androidx.compose.material3.isInputValid
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

var showTimePicker by rememberSaveable { 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.Picker) },
        onDismissRequest = { showTimePicker = false },
        confirmButton = {
            TextButton(
                enabled = state.isInputValid,
                onClick = {
                    state.isHourInputValid
                    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 = {},
    ) {
        TimePicker(state = state)
    }
}
```

```kotlin
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.TimePickerDialogDefaults.MinHeightForTimePicker
import androidx.compose.material3.TimePickerDisplayMode
import androidx.compose.material3.isInputValid
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp

var showTimePicker by rememberSaveable { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
var isPickerMode by rememberSaveable { mutableStateOf(true) }
val displayMode =
    if (isPickerMode) {
        TimePickerDisplayMode.Picker
    } else {
        TimePickerDisplayMode.Input
    }
val snackScope = rememberCoroutineScope()
val configuration = LocalConfiguration.current

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 = displayMode) },
        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 = {
            if (configuration.screenHeightDp.dp > MinHeightForTimePicker) {
                TimePickerDialogDefaults.DisplayModeToggle(
                    onDisplayModeChange = { isPickerMode = !isPickerMode },
                    displayMode = displayMode,
                )
            }
        },
    ) {
        if (
            displayMode == TimePickerDisplayMode.Picker &&
                configuration.screenHeightDp.dp > MinHeightForTimePicker
        ) {
            TimePicker(state = state)
        } else {
            TimeInput(state = state)
        }
    }
}
```

```kotlin
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.TimePicker
import androidx.compose.material3.TimePickerDefaults
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.VibrantTimePickerDialog
import androidx.compose.material3.isInputValid
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

var showTimePicker by rememberSaveable { 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) {
    VibrantTimePickerDialog(
        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") } },
    ) {
        TimePicker(state = state, shapes = TimePickerDefaults.shapes())
    }
}
```

```kotlin
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.TimePickerDefaults
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.TimePickerDialogDefaults
import androidx.compose.material3.TimePickerDialogDefaults.MinHeightForTimePicker
import androidx.compose.material3.TimePickerDisplayMode
import androidx.compose.material3.VibrantTimePickerDialog
import androidx.compose.material3.isInputValid
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp

var showTimePicker by rememberSaveable { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
var isPickerMode by rememberSaveable { mutableStateOf(true) }
val displayMode =
    if (isPickerMode) {
        TimePickerDisplayMode.Picker
    } else {
        TimePickerDisplayMode.Input
    }
val snackScope = rememberCoroutineScope()
val configuration = LocalConfiguration.current
Box(propagateMinConstraints = false) {
    Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
        Text("Set Time (Switchable)")
    }
    SnackbarHost(hostState = snackState)
}
if (showTimePicker) {
    VibrantTimePickerDialog(
        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 = {
            if (configuration.screenHeightDp.dp > MinHeightForTimePicker) {
                TimePickerDialogDefaults.DisplayModeToggle(
                    onDisplayModeChange = { isPickerMode = !isPickerMode },
                    displayMode = displayMode,
                )
            }
        },
    ) {
        if (
            displayMode == TimePickerDisplayMode.Picker &&
                configuration.screenHeightDp.dp > MinHeightForTimePicker
        ) {
            TimePicker(state = state, shapes = TimePickerDefaults.shapes())
        } else {
            TimeInput(state = state, shapes = TimePickerDefaults.shapes())
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState` | state for this time picker, allows to subscribe to changes to `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState#hour()` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState#minute()`, and set the initial time for this picker |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this time picker |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerColors = TimePickerDefaults.colors()` | colors `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerColors` that will be used to resolve the colors used for this time picker in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerDefaults#colors()`. |
| `layoutType: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerLayoutType = TimePickerDefaults.layoutType()` | the different `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerLayoutType` supported by this time picker, it will change the position and sizing of different components of the time picker |

### TimePicker

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/TimePicker.kt+function:TimePicker)

```
@Composable
fun TimePicker(
    state: TimePickerState,
    shapes: TimePickerShapes,
    modifier: Modifier = Modifier,
    colors: TimePickerColors = TimePickerDefaults.vibrantColors(),
    layoutType: TimePickerLayoutType = TimePickerDefaults.layoutType()
): Unit
```

[Material Design time picker](https://m3.material.io/components/time-pickers/overview)

Time pickers help users select and set a specific time.

Vibrant time pickers have a more prominent layout and are suitable for larger screens or situations where the time picker is the main focus of the UI.

```kotlin
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.TimePicker
import androidx.compose.material3.TimePickerDefaults
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.VibrantTimePickerDialog
import androidx.compose.material3.isInputValid
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

var showTimePicker by rememberSaveable { 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) {
    VibrantTimePickerDialog(
        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") } },
    ) {
        TimePicker(state = state, shapes = TimePickerDefaults.shapes())
    }
}
```

```kotlin
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.TimePickerDefaults
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.TimePickerDialogDefaults
import androidx.compose.material3.TimePickerDialogDefaults.MinHeightForTimePicker
import androidx.compose.material3.TimePickerDisplayMode
import androidx.compose.material3.VibrantTimePickerDialog
import androidx.compose.material3.isInputValid
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp

var showTimePicker by rememberSaveable { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
var isPickerMode by rememberSaveable { mutableStateOf(true) }
val displayMode =
    if (isPickerMode) {
        TimePickerDisplayMode.Picker
    } else {
        TimePickerDisplayMode.Input
    }
val snackScope = rememberCoroutineScope()
val configuration = LocalConfiguration.current
Box(propagateMinConstraints = false) {
    Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
        Text("Set Time (Switchable)")
    }
    SnackbarHost(hostState = snackState)
}
if (showTimePicker) {
    VibrantTimePickerDialog(
        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 = {
            if (configuration.screenHeightDp.dp > MinHeightForTimePicker) {
                TimePickerDialogDefaults.DisplayModeToggle(
                    onDisplayModeChange = { isPickerMode = !isPickerMode },
                    displayMode = displayMode,
                )
            }
        },
    ) {
        if (
            displayMode == TimePickerDisplayMode.Picker &&
                configuration.screenHeightDp.dp > MinHeightForTimePicker
        ) {
            TimePicker(state = state, shapes = TimePickerDefaults.shapes())
        } else {
            TimeInput(state = state, shapes = TimePickerDefaults.shapes())
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState` | state for this time picker, allows to subscribe to changes to `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState#hour()` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState#minute()`, and set the initial time for this picker |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerShapes` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerShapes` that will be used to resolve the shapes used for this time picker in different states |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this time picker |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerColors = TimePickerDefaults.vibrantColors()` | colors `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerColors` that will be used to resolve the colors used for this time picker in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerDefaults#vibrantColors()`. |
| `layoutType: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerLayoutType = TimePickerDefaults.layoutType()` | the different `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerLayoutType` supported by this time picker, it will change the position and sizing of different components of the time picker |