DatePicker

Component in Wear Material 3 Compose

Full screen date picker with day, month, year.

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

Last updated: 2024-10-22 13:47

Installation

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

Overloads

@RequiresApi(Build.VERSION_CODES.O)
@Composable
fun DatePicker(
    initialDate: LocalDate,
    onDatePicked: (LocalDate) -> Unit,
    modifier: Modifier = Modifier,
    minDate: LocalDate? = null,
    maxDate: 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.
minDate	Optional minimum date that can be selected in the DatePicker (inclusive).
maxDate	Optional maximum date that can be selected in the DatePicker (inclusive).
datePickerType	The different [DatePickerType] supported by this date picker.
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") },
            )
        }
    }
}

DatePickerFromDateToDateSample

@Composable
fun DatePickerFromDateToDateSample() {
    var showDatePicker by remember { mutableStateOf(false) }
    var datePickerDate by remember { mutableStateOf(LocalDate.of(2024, 9, 2)) }
    val formatter =
        DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
            .withLocale(LocalConfiguration.current.locales[0])
    val minDate = LocalDate.of(2022, 10, 15)
    val maxDate = LocalDate.of(2025, 2, 4)
    if (showDatePicker) {
        DatePicker(
            initialDate = datePickerDate, // Initialize with last picked date on reopen
            onDatePicked = {
                datePickerDate = it
                showDatePicker = false
            },
            minDate = minDate,
            maxDate = maxDate,
            datePickerType = DatePickerType.YearMonthDay
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Text(text = "${minDate.format(formatter)} ~ ${maxDate.format(formatter)}")
            Spacer(modifier = Modifier.height(6.dp))
            Button(
                onClick = { showDatePicker = true },
                label = { Text("Selected Date") },
                secondaryLabel = { Text(datePickerDate.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}