# TimeInput

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/TimeInput.composable#TimeInput(androidx.compose.material3.TimePickerState,androidx.compose.ui.Modifier,androidx.compose.material3.TimeInputColors)( 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/TimeInputColors )` Time pickers help users select and set a specific time. | 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/TimeInput.composable#TimeInput(androidx.compose.material3.TimePickerState,androidx.compose.material3.TimePickerShapes,androidx.compose.ui.Modifier,androidx.compose.material3.TimeInputColors)( 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/TimeInputColors )` Time pickers help users select and set a specific time. | 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/TimeInput.composable#TimeInput(androidx.compose.material3.TimePickerState,androidx.compose.material3.TimePickerShapes,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.TimeInputColors)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerShapes, toggle: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputColors )` Time pickers help users select and set a specific time. | Cmn |

## Functions

### TimeInput

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:TimeInput)

```
@Composable
fun TimeInput(
    state: TimePickerState,
    modifier: Modifier = Modifier,
    colors: TimeInputColors = TimeInputDefaults.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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState`

```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.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

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.Input) },
        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 = {},
    ) {
        TimeInput(state = state)
    }
}
```

| 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 input |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputColors = TimeInputDefaults.colors()` | colors `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputColors` that will be used to resolve the colors used for this time input in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputDefaults#colors()`. |

### TimeInput

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:TimeInput)

```
@Composable
fun TimeInput(
    state: TimePickerState,
    shapes: TimePickerShapes,
    modifier: Modifier = Modifier,
    colors: TimeInputColors = TimeInputDefaults.vibrantColors()
): Unit
```

Time pickers help users select and set a specific time.

Shows a vibrant 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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState`

```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.TimeInputDefaults
import androidx.compose.material3.TimePicker
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 Input")
    }
    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") } },
    ) {
        TimeInput(state = state, shapes = TimeInputDefaults.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 input 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 input |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputColors = TimeInputDefaults.vibrantColors()` | colors `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputColors` that will be used to resolve the colors used for this time input in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputDefaults#vibrantColors()`. |

### TimeInput

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:TimeInput)

```
@Composable
fun TimeInput(
    state: TimePickerState,
    shapes: TimePickerShapes,
    toggle: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    colors: TimeInputColors = TimeInputDefaults.vibrantColors()
): Unit
```

Time pickers help users select and set a specific time.

Shows an uncontained vibrant 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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState`. Use this variant to implement time input with an input mode toggle, otherwise use the variant without toggle parameter.

```kotlin
import androidx.compose.foundation.layout.Box
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.TimePickerDisplayMode
import androidx.compose.material3.TimeScroll
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val state = rememberTimePickerState()
var displayMode by remember { mutableStateOf(TimePickerDisplayMode.Scroll) }

val toggle =
    @Composable {
        TimePickerDialogDefaults.ScrollDisplayModeToggle(
            onDisplayModeChange = {
                displayMode =
                    if (displayMode == TimePickerDisplayMode.Scroll) {
                        TimePickerDisplayMode.Input
                    } else {
                        TimePickerDisplayMode.Scroll
                    }
            },
            displayMode = displayMode,
        )
    }

Box {
    if (displayMode == TimePickerDisplayMode.Input) {
        TimeInput(state = state, shapes = TimePickerDefaults.shapes(), toggle = toggle)
    } else {
        TimeScroll(state = state, shapes = TimePickerDefaults.shapes(), toggle = toggle)
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimePickerState` | state for this timepicker, 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 input in different states. |
| `toggle: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | toggle to switch between different picker modes, e.g., switching between `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInput.composable#TimeInput(androidx.compose.material3.TimePickerState,androidx.compose.material3.TimePickerShapes,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.TimeInputColors)` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeScroll.composable#TimeScroll(androidx.compose.material3.TimePickerState,androidx.compose.material3.TimePickerShapes,androidx.compose.ui.Modifier,androidx.compose.material3.TimePickerColors)`. |
| `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 input |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputColors = TimeInputDefaults.vibrantColors()` | colors `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputColors` that will be used to resolve the colors used for this time input in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/TimeInputDefaults#vibrantColors()`. |