DatePicker

Functions summary

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

Full screen DatePicker with day, month, year.

Functions

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 DatePicker 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 Color.Unspecified.

Example of a DatePicker:

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") },
        )
    }
}

Example of a DatePicker shows the picker options in year-month-day order:

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") },
        )
    }
}

Example of a DatePicker with a minValidDate:

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") },
        )
    }
}
Parameters
initialDate: LocalDate

The initial value to be displayed in the DatePicker.
onDatePicked: (LocalDate) -> Unit

The callback that is called when the user confirms the date selection. It provides the selected date as LocalDate
modifier: Modifier = Modifier

Modifier to be applied to the Box containing the UI elements.
minValidDate: LocalDate? = null

Optional minimum date that can be selected in the DatePicker (inclusive).
maxValidDate: LocalDate? = null

Optional maximum date that can be selected in the DatePicker (inclusive).
datePickerType: DatePickerType = DatePickerDefaults.datePickerType

The different DatePickerType supported by this DatePicker.
colors: DatePickerColors = DatePickerDefaults.datePickerColors()

DatePickerColors to be applied to the DatePicker.