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.
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)) }
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
deOutlinedTextField
. - La variable de estado
showDatePicker
controla la visibilidad de la selector de fecha acoplado.
- El botón de ícono funciona como argumento para el parámetro
- 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 objetoDatePickerState
y le da formato conconvertMillisToDate
. .- 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:

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) } }
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:

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) } }
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 enDisplayMode.Input

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) ) } }
Puntos clave sobre el código
- El parámetro
onDateRangeSelected
es una devolución de llamada que recibe unPair<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:

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 } ) } // ...
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.