# TimePicker

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/annotation/RequiresApi(value = 26) @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePicker.composable#TimePicker(java.time.LocalTime,kotlin.Function1,androidx.compose.ui.Modifier,androidx.wear.compose.material3.TimePickerType,androidx.wear.compose.material3.TimePickerColors,androidx.wear.compose.material3.TimePickerSelection)( initialTime: https://developer.android.com/reference/java/time/LocalTime.html, onTimePicked: (https://developer.android.com/reference/java/time/LocalTime.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, timePickerType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerType, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerColors, initialSelection: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerSelection )` A full screen TimePicker with configurable columns that allows users to select a time. |

## Functions

### TimePicker

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

```
@RequiresApi(value = 26)
@Composable
fun TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier = Modifier,
    timePickerType: TimePickerType = TimePickerDefaults.timePickerType,
    colors: TimePickerColors = TimePickerDefaults.timePickerColors(),
    initialSelection: TimePickerSelection = TimePickerDefaults.timePickerSelection(timePickerType)
): Unit
```

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

This component is designed to take most/all of the screen and utilizes large fonts.

For custom backgrounds like gradients or images wrap the TimePicker in a MaterialTheme with the colorScheme background set to `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Unspecified()`.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePicker.composable#TimePicker(java.time.LocalTime,kotlin.Function1,androidx.compose.ui.Modifier,androidx.wear.compose.material3.TimePickerType,androidx.wear.compose.material3.TimePickerColors,androidx.wear.compose.material3.TimePickerSelection)`:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
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) {
        val formatter =
            DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
                .withLocale(LocalConfiguration.current.locales[0])

        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}
```

![TimePickerSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_TimePickerSample_CompositeImage.png)

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePicker.composable#TimePicker(java.time.LocalTime,kotlin.Function1,androidx.compose.ui.Modifier,androidx.wear.compose.material3.TimePickerType,androidx.wear.compose.material3.TimePickerColors,androidx.wear.compose.material3.TimePickerSelection)` with seconds:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
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) {
        val formatter = DateTimeFormatter.ofPattern("HH:mm:ss")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}
```

![TimePickerWithSecondsSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_TimePickerWithSecondsSample_CompositeImage.png)

Example of a 12 hour clock `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePicker.composable#TimePicker(java.time.LocalTime,kotlin.Function1,androidx.compose.ui.Modifier,androidx.wear.compose.material3.TimePickerType,androidx.wear.compose.material3.TimePickerColors,androidx.wear.compose.material3.TimePickerSelection)`:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
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) {
        val formatter = DateTimeFormatter.ofPattern("hh:mm a")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}
```

![TimePickerWith12HourClockSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_TimePickerWith12HourClockSample_CompositeImage.png)

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePicker.composable#TimePicker(java.time.LocalTime,kotlin.Function1,androidx.compose.ui.Modifier,androidx.wear.compose.material3.TimePickerType,androidx.wear.compose.material3.TimePickerColors,androidx.wear.compose.material3.TimePickerSelection)` with just minutes and seconds:

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

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

![TimePickerWithMinutesAndSecondsSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_TimePickerWithMinutesAndSecondsSample_CompositeImage.png)

| Parameters |
|---|---|
| `initialTime: https://developer.android.com/reference/java/time/LocalTime.html` | The initial time to be displayed in the TimePicker. |
| `onTimePicked: (https://developer.android.com/reference/java/time/LocalTime.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The callback that is called when the user confirms the time selection. It provides the selected time as `https://developer.android.com/reference/java/time/LocalTime.html`. Note that any time components not displayed in the picker (e.g. the hour for `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerType#MinutesSeconds()`, or the second for `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerType#HoursMinutes24H()`) will have a default value of 0 in the returned `https://developer.android.com/reference/java/time/LocalTime.html`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the `Box` containing the UI elements. |
| `timePickerType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerType = TimePickerDefaults.timePickerType` | The different `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerType` supported by this time picker. It indicates whether to show seconds or AM/PM selector as well as hours and minutes. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerColors = TimePickerDefaults.timePickerColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerColors` to be applied to the TimePicker. |
| `initialSelection: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerSelection = TimePickerDefaults.timePickerSelection(timePickerType)` | The initial time component to be selected when the `TimePicker` is first displayed. By default, this is the first available time component based on the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TimePicker(java.time.LocalTime,kotlin.Function1,androidx.compose.ui.Modifier,androidx.wear.compose.material3.TimePickerType,androidx.wear.compose.material3.TimePickerColors,androidx.wear.compose.material3.TimePickerSelection)` and the device's locale (e.g., the hour component for a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerType#HoursMinutes24H()` picker). If a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimePickerSelection` is provided that is not applicable to the current `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#TimePicker(java.time.LocalTime,kotlin.Function1,androidx.compose.ui.Modifier,androidx.wear.compose.material3.TimePickerType,androidx.wear.compose.material3.TimePickerColors,androidx.wear.compose.material3.TimePickerSelection)` (such as providing `TimePickerSelection.Second` for a picker that does not display seconds), the selection will fall back to the first available time component. |