Android pick date time from EditText OnClick event - Truiton
Skip to content

Android pick date time from EditText OnClick event

Android DatePickerDialog TimePickerDialog EditText

 

In this tutorial I would teach you how to pick date and time in Android on single event, for this case I am using the OnClick event of an EditText. Being a mobile app consultant at Truiton I have come across many situations where both date and time are taken as an input from user, and rarely there’s a case where only one of the value is required. So here goes the tutorial.

I am assuming who ever is reading this tutorial has a basic understanding of how to create an android project, therefore lets continue to next step by creating a layout for your activity.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#FFFFFF" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Pick Date Time" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView1"
        android:layout_alignParentRight="true"
        android:ems="10"
        android:inputType="date" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/truiton" />

</RelativeLayout>

It should look something like this :

Android Date Time Picker EditText

Now next step would be to create a class TimePickerFragment in our MainActivity which extends DialogFragment, remember we are using DatePicker and TimePicker as dialogs. Also we are maintaining backward compatibility with previous versions of android APIs – to do this we are using android support v4 libraries.

	public static class TimePickerFragment extends DialogFragment implements
			TimePickerDialog.OnTimeSetListener {

		@Override
		public Dialog onCreateDialog(Bundle savedInstanceState) {
			// Use the current time as the default values for the picker
			final Calendar c = Calendar.getInstance();
			int hour = c.get(Calendar.HOUR_OF_DAY);
			int minute = c.get(Calendar.MINUTE);

			// Create a new instance of TimePickerDialog and return it
			return new TimePickerDialog(getActivity(), this, hour, minute,
					DateFormat.is24HourFormat(getActivity()));
		}

		public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
			// Do something with the time chosen by the user
			DateEdit.setText(DateEdit.getText() + " -" + hourOfDay + ":"	+ minute);
		}
	}

Next step would be to create a class to implement DatePickerDialog. Again I would like to remind that only import android.support.v4.app.DialogFragment package as we want to maintain backward compatibility.

public static class DatePickerFragment extends DialogFragment implements
			DatePickerDialog.OnDateSetListener {

		@Override
		public Dialog onCreateDialog(Bundle savedInstanceState) {
			// Use the current date as the default date in the picker
			final Calendar c = Calendar.getInstance();
			int year = c.get(Calendar.YEAR);
			int month = c.get(Calendar.MONTH);
			int day = c.get(Calendar.DAY_OF_MONTH);

			// Create a new instance of DatePickerDialog and return it
			return new DatePickerDialog(getActivity(), this, year, month, day);
		}

		public void onDateSet(DatePicker view, int year, int month, int day) {
			// Do something with the date chosen by the user
			DateEdit.setText(day + "/" + (month + 1) + "/" + year);
		}
	}

Now lets create methods to call these classes

public void showTruitonTimePickerDialog(View v) {
		DialogFragment newFragment = new TimePickerFragment();
		newFragment.show(getSupportFragmentManager(), "timePicker");
	}

public void showTruitonDatePickerDialog(View v) {
		DialogFragment newFragment = new DatePickerFragment();
		newFragment.show(getSupportFragmentManager(), "datePicker");
	}

Now we have achieved the functionality to call the Android DatePicker and TimePicker Dialogs in same class, we just have to write an onCreate method to call these date and time picker dialogs at OnClick event of an EditText.

package com.truiton.datetime;

import java.util.Calendar;
import android.os.Bundle;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.support.v4.app.DialogFragment;
import android.support.v4.app.FragmentActivity;
import android.text.format.DateFormat;
import android.view.View;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;

public class MainActivity extends FragmentActivity {
	static EditText DateEdit;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		DateEdit = (EditText) findViewById(R.id.editText1);
		DateEdit.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				showTruitonTimePickerDialog(v);
				showTruitonDatePickerDialog(v);
			}
		});
	}

	public void showTruitonDatePickerDialog(View v) {
		DialogFragment newFragment = new DatePickerFragment();
		newFragment.show(getSupportFragmentManager(), "datePicker");
	}

	public static class DatePickerFragment extends DialogFragment implements
			DatePickerDialog.OnDateSetListener {

		@Override
		public Dialog onCreateDialog(Bundle savedInstanceState) {
			// Use the current date as the default date in the picker
			final Calendar c = Calendar.getInstance();
			int year = c.get(Calendar.YEAR);
			int month = c.get(Calendar.MONTH);
			int day = c.get(Calendar.DAY_OF_MONTH);

			// Create a new instance of DatePickerDialog and return it
			return new DatePickerDialog(getActivity(), this, year, month, day);
		}

		public void onDateSet(DatePicker view, int year, int month, int day) {
			// Do something with the date chosen by the user
			DateEdit.setText(day + "/" + (month + 1) + "/" + year);
		}
	}

	public void showTruitonTimePickerDialog(View v) {
		DialogFragment newFragment = new TimePickerFragment();
		newFragment.show(getSupportFragmentManager(), "timePicker");
	}

	public static class TimePickerFragment extends DialogFragment implements
			TimePickerDialog.OnTimeSetListener {

		@Override
		public Dialog onCreateDialog(Bundle savedInstanceState) {
			// Use the current time as the default values for the picker
			final Calendar c = Calendar.getInstance();
			int hour = c.get(Calendar.HOUR_OF_DAY);
			int minute = c.get(Calendar.MINUTE);

			// Create a new instance of TimePickerDialog and return it
			return new TimePickerDialog(getActivity(), this, hour, minute,
					DateFormat.is24HourFormat(getActivity()));
		}

		public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
			// Do something with the time chosen by the user
			DateEdit.setText(DateEdit.getText() + " -" + hourOfDay + ":"	+ minute);
		}
	}
}

After creating onCreate method and completing the class we would get something like this

 

Although the code is self explanatory, what we are doing in this last step is just calling two methods which create date and time picker dialogs at setOnClickListener of EditText. Here first DatePickerDialog is called, its value is returned to the EditText, next TimePickerDialog is called and its value is appended to the EditText value, and Voila here we have date and time input from a single click/tap. If you like this post please like our page or share this with your friends.

11 thoughts on “Android pick date time from EditText OnClick event”

  1. I’ve followed the guide and it actually works. The dialogs shown in my Android device are different from the description images. Does it depend from Android version ?

    Thanks.

  2. Hello
    im implementing your solution and it display date / time time for some reason

    It would be great if you could provide us an example of 2 editexts that both get date and time

    thank you in advance

Leave a Reply

Your email address will not be published. Required fields are marked *