# DatePicker

## 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/DatePicker.composable#DatePicker(java.time.LocalDate,kotlin.Function1,androidx.compose.ui.Modifier,java.time.LocalDate,java.time.LocalDate,androidx.wear.compose.material3.DatePickerType,androidx.wear.compose.material3.DatePickerColors)( initialDate: https://developer.android.com/reference/java/time/LocalDate.html, onDatePicked: (https://developer.android.com/reference/java/time/LocalDate.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, minValidDate: https://developer.android.com/reference/java/time/LocalDate.html?, maxValidDate: https://developer.android.com/reference/java/time/LocalDate.html?, datePickerType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePickerType, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePickerColors )` Full screen `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePicker.composable#DatePicker(java.time.LocalDate,kotlin.Function1,androidx.compose.ui.Modifier,java.time.LocalDate,java.time.LocalDate,androidx.wear.compose.material3.DatePickerType,androidx.wear.compose.material3.DatePickerColors)` with day, month, year. |

## Functions

### DatePicker

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/DatePicker.kt+function:DatePicker)

```
@RequiresApi(value = 26)
@Composable
fun DatePicker(
    initialDate: LocalDate,
    onDatePicked: (LocalDate) -> Unit,
    modifier: Modifier = Modifier,
    minValidDate: LocalDate? = null,
    maxValidDate: LocalDate? = null,
    datePickerType: DatePickerType = DatePickerDefaults.datePickerType,
    colors: DatePickerColors = DatePickerDefaults.datePickerColors()
): Unit
```

Full screen `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePicker.composable#DatePicker(java.time.LocalDate,kotlin.Function1,androidx.compose.ui.Modifier,java.time.LocalDate,java.time.LocalDate,androidx.wear.compose.material3.DatePickerType,androidx.wear.compose.material3.DatePickerColors)` with day, month, year.

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

For custom backgrounds like gradients or images wrap the DatePicker 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/DatePicker.composable#DatePicker(java.time.LocalDate,kotlin.Function1,androidx.compose.ui.Modifier,java.time.LocalDate,java.time.LocalDate,androidx.wear.compose.material3.DatePickerType,androidx.wear.compose.material3.DatePickerColors)`:

```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.DatePicker
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

var showDatePicker by remember { mutableStateOf(true) }
var datePickerDate by remember { mutableStateOf(LocalDate.now()) }
val formatter =
    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
        .withLocale(LocalConfiguration.current.locales[0])
if (showDatePicker) {
    DatePicker(
        initialDate = datePickerDate, // Initialize with last picked date on reopen
        onDatePicked = {
            datePickerDate = it
            showDatePicker = false
        },
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(
            onClick = { showDatePicker = true },
            label = { Text("Selected Date") },
            secondaryLabel = { Text(datePickerDate.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}
```
![DatePickerSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_DatePickerSample_CompositeImage.png)

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePicker.composable#DatePicker(java.time.LocalDate,kotlin.Function1,androidx.compose.ui.Modifier,java.time.LocalDate,java.time.LocalDate,androidx.wear.compose.material3.DatePickerType,androidx.wear.compose.material3.DatePickerColors)` shows the picker options in year-month-day order:

```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.DatePicker
import androidx.wear.compose.material3.DatePickerType
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

var showDatePicker by remember { mutableStateOf(true) }
var datePickerDate by remember { mutableStateOf(LocalDate.now()) }

val formatter =
    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
        .withLocale(LocalConfiguration.current.locales[0])

if (showDatePicker) {
    DatePicker(
        initialDate = datePickerDate, // Initialize with last picked date on reopen
        onDatePicked = {
            datePickerDate = it
            showDatePicker = false
        },
        datePickerType = DatePickerType.YearMonthDay,
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(
            onClick = { showDatePicker = true },
            label = { Text("Selected Date") },
            secondaryLabel = { Text(datePickerDate.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}
```
![DatePickerYearMonthDaySample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_DatePickerYearMonthDaySample_CompositeImage.png)

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePicker.composable#DatePicker(java.time.LocalDate,kotlin.Function1,androidx.compose.ui.Modifier,java.time.LocalDate,java.time.LocalDate,androidx.wear.compose.material3.DatePickerType,androidx.wear.compose.material3.DatePickerColors)` with a minValidDate:

```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.DatePicker
import androidx.wear.compose.material3.DatePickerType
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

val currentDate = LocalDate.now()
var showDatePicker by remember { mutableStateOf(true) }
var datePickerDate by remember { mutableStateOf(LocalDate.now()) }
val formatter =
    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
        .withLocale(LocalConfiguration.current.locales[0])
if (showDatePicker) {
    DatePicker(
        initialDate = datePickerDate, // Initialize with last picked date on reopen
        onDatePicked = {
            datePickerDate = it
            showDatePicker = false
        },
        datePickerType = DatePickerType.YearMonthDay,
        minValidDate = currentDate,
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(
            onClick = { showDatePicker = true },
            label = { Text("Selected Date") },
            secondaryLabel = { Text(datePickerDate.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}
```
![DatePickerFutureOnlySample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_DatePickerFutureOnlySample_CompositeImage.png)

| Parameters |
|---|---|
| `initialDate: https://developer.android.com/reference/java/time/LocalDate.html` | The initial value to be displayed in the DatePicker. |
| `onDatePicked: (https://developer.android.com/reference/java/time/LocalDate.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The callback that is called when the user confirms the date selection. It provides the selected date as `https://developer.android.com/reference/java/time/LocalDate.html` |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the `Box` containing the UI elements. |
| `minValidDate: https://developer.android.com/reference/java/time/LocalDate.html? = null` | Optional minimum date that can be selected in the DatePicker (inclusive). |
| `maxValidDate: https://developer.android.com/reference/java/time/LocalDate.html? = null` | Optional maximum date that can be selected in the DatePicker (inclusive). |
| `datePickerType: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePickerType = DatePickerDefaults.datePickerType` | The different `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePickerType` supported by this `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePicker.composable#DatePicker(java.time.LocalDate,kotlin.Function1,androidx.compose.ui.Modifier,java.time.LocalDate,java.time.LocalDate,androidx.wear.compose.material3.DatePickerType,androidx.wear.compose.material3.DatePickerColors)`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePickerColors = DatePickerDefaults.datePickerColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/DatePickerColors` to be applied to the DatePicker. |