Selectores de fechas

Los selectores de fechas permiten que los usuarios seleccionen una fecha, un período o ambas. Usan un un diálogo de calendario o una entrada de texto para permitir que los usuarios seleccionen fechas.

Tipos

Existen tres tipos de selectores de fecha:

• Asegurado: Aparece intercalado dentro del diseño. Es adecuado para los modelos compacto en los que un diálogo dedicado puede parecer intrusivo.
• Modal: Aparece como un diálogo que se superpone al contenido de la app. Esto proporciona un un enfoque claro en la selección de fechas.
• Entrada modal: Combina un campo de texto con un selector de fecha modal.

Puedes implementar estos selectores de fecha en tu app con los siguientes elementos componibles:

• DatePicker: Elemento componible general para un selector de fecha. El contenedor que usar determina si está conectado o si es un modelo.
• DatePickerDialog: Es el contenedor de los selectores de fecha de entrada modales y no modales.
• DateRangePicker: Para cualquier selector de fecha en el que el usuario puede elegir una período con una fecha de inicio y de finalización.

Nota: DatePicker, DatePickerDialog y DateRangePicker son experimentales. Informa cualquier problema en la herramienta de seguimiento de errores.

State

El parámetro clave que comparten los diferentes elementos componibles del selector de fecha es state, que toma un objeto DatePickerState o objeto DateRangePickerState. Sus propiedades capturan información sobre la selección del usuario con el selector de fecha, como la fecha seleccionada actualmente.

Para obtener más información sobre cómo puedes usar la fecha seleccionada, consulta la sección Usar la fecha seleccionada.

Selector de fecha anclado

En el siguiente ejemplo, hay un campo de texto que le solicita al usuario que ingrese su fecha de nacimiento. Cuando hacen clic en el ícono de calendario en el campo, se abre un el selector de fecha acoplado debajo del campo de entrada.

@Composable
fun DatePickerDocked() {
    var showDatePicker by remember { mutableStateOf(false) }
    val datePickerState = rememberDatePickerState()
    val selectedDate = datePickerState.selectedDateMillis?.let {
        convertMillisToDate(it)
    } ?: ""

    Box(
        modifier = Modifier.fillMaxWidth()
    ) {
        OutlinedTextField(
            value = selectedDate,
            onValueChange = { },
            label = { Text("DOB") },
            readOnly = true,
            trailingIcon = {
                IconButton(onClick = { showDatePicker = !showDatePicker }) {
                    Icon(
                        imageVector = Icons.Default.DateRange,
                        contentDescription = "Select date"
                    )
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(64.dp)
        )

        if (showDatePicker) {
            Popup(
                onDismissRequest = { showDatePicker = false },
                alignment = Alignment.TopStart
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .offset(y = 64.dp)
                        .shadow(elevation = 4.dp)
                        .background(MaterialTheme.colorScheme.surface)
                        .padding(16.dp)
                ) {
                    DatePicker(
                        state = datePickerState,
                        showModeToggle = false
                    )
                }
            }
        }
    }
}

@Composable
fun DatePickerFieldToModal(modifier: Modifier = Modifier) {
    var selectedDate by remember { mutableStateOf<Long?>(null) }
    var showModal by remember { mutableStateOf(false) }

    OutlinedTextField(
        value = selectedDate?.let { convertMillisToDate(it) } ?: "",
        onValueChange = { },
        label = { Text("DOB") },
        placeholder = { Text("MM/DD/YYYY") },
        trailingIcon = {
            Icon(Icons.Default.DateRange, contentDescription = "Select date")
        },
        modifier = modifier
            .fillMaxWidth()
            .pointerInput(selectedDate) {
                awaitEachGesture {
                    // Modifier.clickable doesn't work for text fields, so we use Modifier.pointerInput
                    // in the Initial pass to observe events before the text field consumes them
                    // in the Main pass.
                    awaitFirstDown(pass = PointerEventPass.Initial)
                    val upEvent = waitForUpOrCancellation(pass = PointerEventPass.Initial)
                    if (upEvent != null) {
                        showModal = true
                    }
                }
            }
    )

    if (showModal) {
        DatePickerModal(
            onDateSelected = { selectedDate = it },
            onDismiss = { showModal = false }
        )
    }
}

fun convertMillisToDate(millis: Long): String {
    val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
    return formatter.format(Date(millis))
}
DatePickers.kt

Nota: Este ejemplo es independiente. Cómo puedes exponer la fecha seleccionada a un elemento superior componible, consulta los otros ejemplos.

Puntos clave sobre el código

• El selector de fecha aparece cuando el usuario hace clic en la IconButton.
  • El botón de ícono funciona como argumento para el parámetro trailingIcon de OutlinedTextField.
  • La variable de estado showDatePicker controla la visibilidad de la selector de fecha acoplado.
• El contenedor del selector de fecha es un elemento componible Popup, que superpone el contenido sin afectar el diseño de otros elementos.
• selectedDate captura el valor de la fecha seleccionada desde el El objeto DatePickerState y le da formato con convertMillisToDate. .
• La fecha seleccionada aparecerá en el campo de texto.
• El selector de fecha acoplado se coloca debajo del campo de texto con un modificador offset.
• Se usa un Box como contenedor raíz para permitir la superposición adecuada del texto. y el selector de fecha.

Resultados

Después de hacer clic en el ícono de calendario, esta implementación aparece de la siguiente manera:

Figura 1: Un selector de fecha anclado

Selector de fecha modal

Un selector de fecha modal muestra un diálogo que flota sobre la pantalla. Para implementar crea una DatePickerDialog y pásale una DatePicker.

@Composable
fun DatePickerModal(
    onDateSelected: (Long?) -> Unit,
    onDismiss: () -> Unit
) {
    val datePickerState = rememberDatePickerState()

    DatePickerDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(onClick = {
                onDateSelected(datePickerState.selectedDateMillis)
                onDismiss()
            }) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        }
    ) {
        DatePicker(state = datePickerState)
    }
}
DatePickers.kt

Puntos clave sobre el código

• La función de componibilidad DatePickerModal muestra un selector de fecha modal.
• La expresión lambda onDateSelected se ejecuta cuando el usuario selecciona una fecha.
  • Expone la fecha seleccionada en el elemento componible superior.
• La expresión lambda onDismiss se ejecuta cuando el usuario descarta el .

Resultados

Esta implementación aparece de la siguiente manera:

Figura 2: Un selector de fecha modal.

Selector de fecha del cuadro de diálogo de entrada

Un selector de fecha modal con entrada muestra un diálogo que flota sobre la pantalla y permite que el usuario ingrese una fecha.

@Composable
fun DatePickerModalInput(
    onDateSelected: (Long?) -> Unit,
    onDismiss: () -> Unit
) {
    val datePickerState = rememberDatePickerState(initialDisplayMode = DisplayMode.Input)

    DatePickerDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(onClick = {
                onDateSelected(datePickerState.selectedDateMillis)
                onDismiss()
            }) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        }
    ) {
        DatePicker(state = datePickerState)
    }
}
DatePickers.kt

Puntos clave sobre el código

Esto es muy similar al ejemplo de selector de fecha modal. El principal la siguiente es la diferencia:

• El parámetro initialDisplayMode establece el modo de visualización inicial en DisplayMode.Input

Figura 3: Un selector de fecha modal con entrada.

Selector de fecha con período

Puedes crear un selector de fecha que permita al usuario seleccionar un período entre la fecha de inicio y la fecha de finalización. Para hacerlo, usa DateRangePicker.

El uso de DateRangePicker es, en esencia, el mismo que el de DatePicker. Puedes usarlo para un selector acoplado como elemento secundario de PopUp, o bien puedes usarlo como un selector modal y pasarlo a DatePickerDialog. La principal diferencia es que uses DateRangePickerState en lugar de DatePickerState.

El siguiente fragmento demuestra cómo crear un selector de fecha modal con una rango:

@Composable
fun DateRangePickerModal(
    onDateRangeSelected: (Pair<Long?, Long?>) -> Unit,
    onDismiss: () -> Unit
) {
    val dateRangePickerState = rememberDateRangePickerState()

    DatePickerDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(
                onClick = {
                    onDateRangeSelected(
                        Pair(
                            dateRangePickerState.selectedStartDateMillis,
                            dateRangePickerState.selectedEndDateMillis
                        )
                    )
                    onDismiss()
                }
            ) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        }
    ) {
        DateRangePicker(
            state = dateRangePickerState,
            title = {
                Text(
                    text = "Select date range"
                )
            },
            showModeToggle = false,
            modifier = Modifier
                .fillMaxWidth()
                .height(500.dp)
                .padding(16.dp)
        )
    }
}
DatePickers.kt

Puntos clave sobre el código

• El parámetro onDateRangeSelected es una devolución de llamada que recibe un Pair<Long?, Long?> que representa las fechas de inicio y finalización seleccionadas. Esto le otorga al elemento componible superior acceso al rango seleccionado.
• rememberDateRangePickerState() crea el estado para el selector de rango de fechas.
• DatePickerDialog crea un contenedor de diálogo modal.
• En el controlador onClick del botón de confirmación, onDateRangeSelected pasa el rango seleccionado al elemento componible superior.
• El elemento DateRangePicker componible funciona como contenido del diálogo.

Resultados

Esta implementación aparece de la siguiente manera:

Figura 4: Un selector de fecha modal con un período seleccionado.

Usar la fecha seleccionada

Para capturar la fecha seleccionada, haz un seguimiento en el elemento componible superior como Long. pasa el valor a DatePicker en onDateSelected. El siguiente fragmento lo demuestra, aunque puedes ver la implementación completa en la página aplicación de fragmentos de código.

// ...
    var selectedDate by remember { mutableStateOf<Long?>(null) }
// ...
        if (selectedDate != null) {
            val date = Date(selectedDate!!)
            val formattedDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(date)
            Text("Selected date: $formattedDate")
        } else {
            Text("No date selected")
        }
// ...
        DatePickerModal(
            onDateSelected = {
                selectedDate = it
                showModal = false
            },
            onDismiss = { showModal = false }
        )
    }
// ...
DatePickers.kt

Lo mismo se aplica a los selectores de fechas, aunque debes usa un Pair<Long?, Long?> o una clase de datos para capturar los valores de inicio y finalización.

Importante: En lugar de usar un Long para la fecha seleccionada, puedes pasar el objeto de estado desde el elemento componible superior al secundario. De esta manera, podrías capturar el estado completo en el elemento superior.

Consulta también

• Selectores de fecha de Material Design
• Selectores de hora