/ 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

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más