29.3.12

Tutorial Android parte 15: Widget DatePicker en Android

Este tutorial está basado en los tutoriales de la documentación de Android SDK.

http://developer.android.com/resources/tutorials/views/hello-datepicker.html

Ya hemos visto todos los layouts, así que ahora vamos a aprender a utilizar los Widgets para mejorar nuestras aplicaciones Android.

En este ejemplo, crearemos una aplicación que contendrá un widget DatePicker.

Este widget permite seleccionar una fecha (día, mes y año) de una forma cómoda y con un interfaz con el que los usuarios ya están familiarizados.



Cuando la fecha se ha seleccionado, se mostrará en un Textview.



Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloDatePicker
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, DatePicker!
Package name: com.example.hellodatepicker
Create Activity: HelloDatePicker

- Hacer click en Finish.

Abrimos el fichero res/layout/main.xml e insertamos el siguiente código:



En un LinearLayout, colocaremos un TextView que mostrará la fecha y un botón para abrir el DatePickerDialog.

Ahora deberemos agregar las siguientes librerías para poder hacer el siguiente cambio:

import android.widget.Button;
import android.widget.TextView;

A continuación, abrimos el fichero HelloDatePicker.java e insertamos los siguientes atributos a la clase:

private TextView mDateDisplay;
private Button mPickDate;
private int mYear;
private int mMonth;
private int mDay;
static final int DATE_DIALOG_ID = 0;

Las primeras variables son para definir los controles y los campos de la fecha.
El DATE_DIALOG_ID se utiliza para identificar el datePickerDialog.

Ahora vamos a añadir el siguiente código al método OnCreate():



En el método OnCreate, primero establecemos main.xml como el layout de la actividad. Luego enlazamos las variables a los controles TextView y Button. Creamos un nuevo OnClickListener para el botón. Y por último, guardamos la fecha actual en las variables de la clase y llamamos a updateDisplay() (este método pondrá la fecha en el TextView).

Ahora vamos a añadir la lógica del método updateDisplay():



Este método convierte una fecha a formato cadena de texto con el formato “mm-dd-yyyy” (mes-día-año) y lo guarda en el control TextView.

Nota: Si queréis ponerlo en formato español podéis poner las instrucciones en el siguiente orden:

.append(mDay).append("-")
.append(mMonth + 1).append("-")
.append(mYear).append(" "));

Vamos a insertar la definición de un DatePickerDialog.OnDateSetListener como miembro de la clase HelloDatePicker:



El DatePickerDialog.OnDateSetListener escucha si el usuario ha pulsado en el botón Set del widget DatePicker. Si es así, llama a onDateSet() que actualiza las variables que contienen la fecha (mYear, mMonth, mDay) y después llama a updateDisplay() para que se actualice el TextView con la fecha seleccionada por el usuario.

Ahora añadimos la llamada al método onCreateDialog(int) en la clase HelloDatePicker:



Este método se ejecuta cuando se llama al showDialog(DATE_DIALOG_ID) dentro del OnClickListener. Si recordáis, esta llamada se hacía cuando hacemos click en el botón.
Si el ID coincide, se lanza el DatePickerDialog.


Pues solo queda ver como ha quedado. Podéis ejecutar la aplicación en el menú Run -> opción Run:



Cuando pulsamos en el botón "Change the date" se abre el widget DatePicker para que seleccionemos una fecha.



Dentro del widget, seleccionamos la fecha que queramos y pulsamos en "Set". Al hacerlo se actualizará el TextView con la nueva fecha.



Como veis es bastante sencillo y la experiencia de usuario es notablemente mejor.


El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 15.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina).

14 comments:

  1. Muy bueno, me ha sido de mucha ayuda.

    Ahora voy a intentar entenderlo mejor.

    Muchas gracias ;)

    ReplyDelete
  2. Hola, cuando me aparece el DatePicker comienza en el 01/01/1900. ¿Me puedes decir cómo debería de definir una fecha mínima para mostrar?

    Gracias!

    ReplyDelete
    Replies
    1. mPickDate.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
      showDialog(DATE_DIALOG_ID);
      }
      });

      final Calendar c = Calendar.getInstance();
      mYear = c.get(Calendar.YEAR);
      mMonth = c.get(Calendar.MONTH);
      mDay = c.get(Calendar.DAY_OF_MONTH);
      updateDisplay();

      Delete
  3. y si quisiera guardar la fecha en una base de datos como haria

    ReplyDelete
  4. Excelente tutorial. Mis felicitaciones.
    Pero me ha surgido un problemilla al probarlo y es que me dice el siguiente mensaje de error:
    "This method was deprecated in API level 13."
    con esta línea de código: "showDialog(DATE_DIALOG_ID);"

    Entiendo que en versiones más recientes de la API no es emplea ya el método showDialog(), pero...¿entonces como lo implemento?
    Muchas gracias.

    ReplyDelete
  5. Hola, gracias por el comentario.

    En las últimas versiones, han cambiado el widget DatePicker y en vez de utilizar el showDialog() utilizan DialogFragment.

    DialogFragment newFragment = new DatePickerFragment();
    newFragment.show(getSupportFragmentManager(), "datePicker");

    El cambio no es simple, así que te paso el enlace a la página dónde explican cómo se utiliza el DaePicker en las últimas versiones:

    http://developer.android.com/guide/topics/ui/controls/pickers.html

    ReplyDelete
  6. Serías tan amable de ponerme el mismo ejemplo de arriba de mostrar el DatePicker y la fecha seleccionada en un TextView, pero usando el DialogFragment.
    Es que al intentar adaptar los nuevos métodos de DialogFragment a tu ejemplo consultando la url que me dices me estoy liando, y no consigo obtener el mismo resultado de tu ejemplo.

    Muchas gracias.

    ReplyDelete
  7. Siento mucho decirte esto, pero me has pillado en una época muy complicada porque entre mi trabajo y los exámenes que tengo que hacer no tengo apenas tiempo.

    Te paso este enlace a un tutorial en el que explican cómo hacerlo:

    http://androidtrainningcenter.blogspot.com.es/2012/10/creating-datepicker-using.html

    Lamento de verás no poder ayudarte más. Espero que entiendas que es por estas circunstancias especiales que te he comentado por las que no te puedo ser de más ayuda. Un saludo.

    ReplyDelete
  8. Exelente tutorial. Mi Consulta es la siguiente como puedo usar mas de dos datapincker en un activity. Por ejemplo para filtar por fechas de inicio y fin.
    Saludos,gracias.

    ReplyDelete
  9. Puedes ver cómo usar más de un datepicker en el siguietne artículo:

    http://stackoverflow.com/questions/3734981/multiple-datepickers-in-same-activity

    Un saludo

    ReplyDelete
  10. Muy buenos dias, tengo una consulta, como puedo obtener los dias de la semana (lunes, martes, miercoles,etc) a partir de una fecha seleccionada en un DatePicker.

    Agradezco de antemano por su tiempo

    ReplyDelete
  11. buenas tardes quiero saber por que en la hora cuando mar por ejmplo quiero 12:05 no aparece el cero y en la fecha es igual 0 del mes no se alguna orientacion

    ReplyDelete
  12. Hola, me gustaría saber como mostrar la fecha, sin necesidad de ponerla, solo que se muestre, abra una forma de que se haga asi

    ReplyDelete