DatePicker

Component in Wear Material 3 Compose

Full screen [DatePicker] with day, month, year.

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

Last updated: 2025-02-05 12:19

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha32")
}

Overloads

@RequiresApi(Build.VERSION_CODES.O)
@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()
)

Parameters

name	description
initialDate	The initial value to be displayed in the DatePicker.
onDatePicked	The callback that is called when the user confirms the date selection. It provides the selected date as [LocalDate]
modifier	Modifier to be applied to the Box containing the UI elements.
minValidDate	Optional minimum date that can be selected in the DatePicker (inclusive).
maxValidDate	Optional maximum date that can be selected in the DatePicker (inclusive).
datePickerType	The different [DatePickerType] supported by this [DatePicker].
colors	[DatePickerColors] to be applied to the DatePicker.

Code Examples

DatePickerSample

@Composable
fun DatePickerSample() {
    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") },
            )
        }
    }
}

DatePickerYearMonthDaySample

@Composable
fun DatePickerYearMonthDaySample() {
    var showDatePicker by remember { mutableStateOf(true) }
    var datePickerDate by remember { mutableStateOf(LocalDate.now()) }
    val formatter = DateTimeFormatter.ofPattern("yyyy MMM d")
    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") },
            )
        }
    }
}

DatePickerFutureOnlySample

@Composable
fun DatePickerFutureOnlySample() {
    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") },
            )
        }
    }
}