/ Android

Implementar Time Picker y Date Picker - Android

En este articulo vamos a implementar un par de widgets de Android que sirve para mostrar, obtener los valores de la fecha y hora.

He visto varios tutoriales pero la mayoría lo implementan de forma distinta, en este articulo aprenderemos como obtener las fechas y horas de nuestro sistema para almacenarlo o simplemente mostrarlo al usuario.

Documentación oficial de los Pickers

XML

Este es el código XML con el que trabajaremos, los Pickers.

Si deseas descargar los iconos te recomiendo Material Icons.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.a01luisrene.pickers.PickersActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/titlulo_pickers"
        android:textSize="24sp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.025" />


    <EditText
        android:id="@+id/et_mostrar_fecha_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="date"
        android:hint="@string/formato_fecha"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/et_mostrar_hora_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="time"
        android:hint="@string/formato_hora"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/et_mostrar_fecha_picker"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <ImageButton
        android:id="@+id/ib_obtener_fecha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_event_white_24dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/et_mostrar_fecha_picker"
        android:layout_marginLeft="8dp"
        app:layout_constraintHorizontal_bias="0.505"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        tools:ignore="ContentDescription" />

    <ImageButton
        android:id="@+id/ib_obtener_hora"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_access_time_white_24dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/et_mostrar_fecha_picker"
        android:layout_marginEnd="8dp"
        app:layout_constraintLeft_toRightOf="@+id/et_mostrar_hora_picker"
        android:layout_marginStart="8dp"
        app:layout_constraintHorizontal_bias="0.504"
        tools:ignore="ContentDescription" />

</android.support.constraint.ConstraintLayout>

Strings

Agrega estas lineas de código en el archivo strings.xml, el cual se encuentra en la carpeta values > strings.xml, ver aquí

<resources>
    <!--Copiar-->
    <string name="titlulo_pickers">Obtener fecha y hora</string>

    <string name="formato_fecha">dd/mm/yyyy</string>
    <string name="formato_hora">hh:mm</string>
   <!--Fin copiar-->
</resources>

DatePickerDialog - obtener la fecha

El widget Date Picker se inicializa obteniendo los valores iniciales que usted configure, DatePickerDialog nos permite elegir y obtener la fecha con suma facilidad gracias a su interfaz gráfica.

Código

//Cambiar esta linea de código
package com.a01luisrene.pickers;

import android.app.DatePickerDialog;;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.ImageButton;

import java.util.Calendar;

public class PickersActivity extends AppCompatActivity implements View.OnClickListener {
    private static final String CERO = "0";
    private static final String BARRA = "/";

    //Calendario para obtener fecha & hora
    public final Calendar c = Calendar.getInstance();

    //Variables para obtener la fecha
    final int mes = c.get(Calendar.MONTH);
    final int dia = c.get(Calendar.DAY_OF_MONTH);
    final int anio = c.get(Calendar.YEAR);

    //Widgets
    EditText etFecha;
    ImageButton ibObtenerFecha;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pickers);
        //Widget EditText donde se mostrara la fecha obtenida
        etFecha = (EditText) findViewById(R.id.et_mostrar_fecha_picker);
        //Widget ImageButton del cual usaremos el evento clic para obtener la fecha
        ibObtenerFecha = (ImageButton) findViewById(R.id.ib_obtener_fecha);
        //Evento setOnClickListener - clic
        ibObtenerFecha.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.ib_obtener_fecha:
                obtenerFecha();
                break;
        }
    }

    private void obtenerFecha(){
        DatePickerDialog recogerFecha = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
                //Esta variable lo que realiza es aumentar en uno el mes ya que comienza desde 0 = enero
                final int mesActual = month + 1;
                //Formateo el día obtenido: antepone el 0 si son menores de 10
                String diaFormateado = (dayOfMonth < 10)? CERO + String.valueOf(dayOfMonth):String.valueOf(dayOfMonth);
                //Formateo el mes obtenido: antepone el 0 si son menores de 10
                String mesFormateado = (mesActual < 10)? CERO + String.valueOf(mesActual):String.valueOf(mesActual);
                //Muestro la fecha con el formato deseado
                etFecha.setText(diaFormateado + BARRA + mesFormateado + BARRA + year);


            }
        //Estos valores deben ir en ese orden, de lo contrario no mostrara la fecha actual
        /**
        *También puede cargar los valores que usted desee
        */
        },anio, mes, dia);
        //Muestro el widget
        recogerFecha.show();

    }
}

TimePickerDialog - obtener la hora

El widget Time Picker se inicializa obteniendo los valores iniciales que usted configure, TimePickerDialog nos permite elegir y obtener la hora con suma facilidad gracias a su interfaz gráfica.

Código

//Cambiar esta linea de código
package com.a01luisrene.pickers;

import android.app.TimePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TimePicker;

import java.util.Calendar;

public class PickersActivity extends AppCompatActivity implements View.OnClickListener {
    private static final String CERO = "0";
    private static final String DOS_PUNTOS = ":";

    //Calendario para obtener fecha & hora
    public final Calendar c = Calendar.getInstance();

    //Variables para obtener la hora hora
    final int hora = c.get(Calendar.HOUR_OF_DAY);
    final int minuto = c.get(Calendar.MINUTE);

    //Widgets
    EditText etHora;
    ImageButton ibObtenerHora;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pickers);
        //Widget EditText donde se mostrara la hora obtenida
        etHora = (EditText) findViewById(R.id.et_mostrar_hora_picker);
        //Widget ImageButton del cual usaremos el evento clic para obtener la hora
        ibObtenerHora = (ImageButton) findViewById(R.id.ib_obtener_hora);
        //Evento setOnClickListener - clic
        ibObtenerHora.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.ib_obtener_hora:
                obtenerHora();
                break;
        }
    }
   
    private void obtenerHora(){
        TimePickerDialog recogerHora = new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {
            @Override
            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                //Formateo el hora obtenido: antepone el 0 si son menores de 10
                String horaFormateada =  (hourOfDay < 10)? String.valueOf(CERO + hourOfDay) : String.valueOf(hourOfDay);
                //Formateo el minuto obtenido: antepone el 0 si son menores de 10
                String minutoFormateado = (minute < 10)? String.valueOf(CERO + minute):String.valueOf(minute);
                //Obtengo el valor a.m. o p.m., dependiendo de la selección del usuario
                String AM_PM;
                if(hourOfDay < 12) {
                    AM_PM = "a.m.";
                } else {
                    AM_PM = "p.m.";
                }
                //Muestro la hora con el formato deseado
                etHora.setText(horaFormateada + DOS_PUNTOS + minutoFormateado + " " + AM_PM);
            }
        //Estos valores deben ir en ese orden
        //Al colocar en false se muestra en formato 12 horas y true en formato 24 horas
        //Pero el sistema devuelve la hora en formato 24 horas
        }, hora, minuto, false);

        recogerHora.show();
    }
     
}

Demo

Demostración pickers

Descargar

Proyecto alojado en BitBucket.

Proyecto Android Studio

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más