---
title: "DatePicker"
description: "Full screen `DatePicker` with day, month, year."
type: "component"
---

<div class='type'>Composable Component</div>



Full screen `DatePicker` with day, month, year.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


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

| | |
| --- | --- |
| 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
### DatePickerFutureOnlySample
```kotlin
@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") },
            )
        }
    }
}
```
### DatePickerSample
```kotlin
@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
```kotlin
@Composable
fun DatePickerYearMonthDaySample() {
    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") },
            )
        }
    }
}
```