Una interfaz intuitiva y bonita a la hora de programar en Android es el DatePicker, el cual es un elemento que permite que el usuario seleccione una fecha en un calendario.
En este tutorial vas a aprender a mostrar un DatePicker en Android (funciona desde Android 4) y a leer la fecha que el usuario seleccione; todo eso en pocas líneas de código usando DatePickerDialog.
Al final tendremos una aplicación de Android que permite al usuario seleccionar una fecha con un DatePicker como se ve en la imagen:
Puedes explorar el código fuente en GitHub, lo más importante es el MainActivity. Para descargar la app y probarla por ti mismo, visita la página de releases.
Veamos la explicación. Para mostrar un DatePicker primero hay que declarar un listener para escuchar cuando el usuario selecciona la fecha.
El listener debe ser de tipo DatePickerDialog.OnDateSetListener; hay que sobrescribir al método onDateSet para escuchar cuando el usuario selecciona la fecha.
// Crear un listener del datepicker;
private DatePickerDialog.OnDateSetListener listenerDeDatePicker = new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int anio, int mes, int diaDelMes) {
// Esto se llama cuando seleccionan una fecha. Nos pasa la vista, pero más importante, nos pasa:
// El año, el mes y el día del mes. Es lo que necesitamos para saber la fecha completa
}
};
Cuando se llama al listener dentro de la interfaz, nos pasa la vista pero también el año, mes y día del mes que fueron seleccionados. Con eso ya podemos saber la fecha completa.
Nota: el mes es dado comenzando en 0, por lo tanto enero es 0 y diciembre es 11.
Cuando ya hemos declarado el listener, podemos mostrar el DatePicker. Para ello tenemos que pasarle los siguientes argumentos en el orden que sigue:
Los tres últimos argumentos son la fecha que se va a mostrar por defecto. Si quieres mostrar la fecha actual pudes obtenerla así:
// Recuerda importar al inicio
import java.util.Calendar;
// Y luego ya podrás obtener la fecha
final Calendar calendario = Calendar.getInstance();
int anio = calendario.get(Calendar.YEAR);
int mes = calendario.get(Calendar.MONTH);
int diaDelMes = calendario.get(Calendar.DAY_OF_MONTH);
Sabiendo eso, ahora sí vamos a mostrar el DatePicker:
// Le pasamos lo que haya en las globales
DatePickerDialog dialogoFecha = new DatePickerDialog(MainActivity.this, listenerDeDatePicker, ultimoAnio, ultimoMes, ultimoDiaDelMes);
//Mostrar
dialogoFecha.show();
En mi caso le mando el contexto de MainActivity.this, dependiendo de tu actividad eso va a cambiar; te invito a leer este post sobre algunos errores al pasar el contexto en Android.
Las 3 últimas variables son unas globales, si analizas el código verás que se obtienen con Calendar.
Esto no es estrictamente necesario pero en este caso puse la fecha en el EditText. También escuchamos el click del mismo y justo ahí mostramos el DatePicker.
Para que el usuario no escriba directamente en el EditText pero sí pueda tocarlo, hay que declarar en el XML la propiedad clickable
en true
, focusable
en false
y el inputType
hay que ponerlo en none
.
Cuando se selecciona la fecha se refresca el valor usando String.format
y setText
como se ve en el ejemplo:
public void refrescarFechaEnEditText() {
// Formateamos la fecha pero podríamos hacer cualquier otra cosa ;)
String fecha = String.format(Locale.getDefault(), "%02d-%02d-%02d", ultimoAnio, ultimoMes+1, ultimoDiaDelMes);
// La ponemos en el editText
etFecha.setText(fecha);
}
De esta manera podemos mostrar un DatePicker cuando el usuario toca el EditText, mostrando la fecha en el mismo.
Por cierto, al mostrar la fecha le agrego 1 al mes, esto es porque, como ya lo dije antes, el número de mes se cuenta desde el 0.
Aprende más sobre Java o Android.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.