Android Date Time picker are used a lot in android apps. In this tutorial we’ll demonstrate the use of a Date Picker and Timer Picker Dialog in our android application. These components are used to select date and time in a customised user interface. We will use DatePickerDialog
and TimePickerDialog
classes with Calendar
class in our android application code to achieve this.
Though a Date Picker and Time Picker can be used as independent widgets but they occupy more space on the screen. Hence using them inside a Dialog is a better choice. Fortunately android provides use with its own DatePickerDialog and TimePickerDialog classes. DatePickerDialog and TimePickerDialog classes have onDateSetListener()
and onTimeSetListener()
callback methods respectively. These callback methods are invoked when the user is done with filling the date and time respectively. The DatePickerDialog class consists of a 5 argument constructor with the parameters listed below.
onDateSet()
is invoked when the user sets the date with the following parameters:The TimePickerDialog class consists of a 5 argument constructor with the parameters listed below.
onTimeSet()
is invoked when the user sets the time with the following parameters:The activity_main.xml
consists of two buttons to invoke the Date and Time Picker Dialogs and set the user selected time in the two EditText views. The xml code is given below. activity_main.xml
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/in_date"
android:layout_marginTop="82dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SELECT DATE"
android:id="@+id/btn_date"
android:layout_alignBottom="@+id/in_date"
android:layout_toRightOf="@+id/in_date"
android:layout_toEndOf="@+id/in_date" />
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/in_time"
android:layout_below="@+id/in_date"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SELECT TIME"
android:id="@+id/btn_time"
android:layout_below="@+id/btn_date"
android:layout_alignLeft="@+id/btn_date"
android:layout_alignStart="@+id/btn_date" />
</RelativeLayout>
The MainActivity.java
class is given below:
package com.journaldev.datetimepickerdialog;
import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;
import java.util.Calendar;
public class MainActivity extends AppCompatActivity implements
View.OnClickListener {
Button btnDatePicker, btnTimePicker;
EditText txtDate, txtTime;
private int mYear, mMonth, mDay, mHour, mMinute;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnDatePicker=(Button)findViewById(R.id.btn_date);
btnTimePicker=(Button)findViewById(R.id.btn_time);
txtDate=(EditText)findViewById(R.id.in_date);
txtTime=(EditText)findViewById(R.id.in_time);
btnDatePicker.setOnClickListener(this);
btnTimePicker.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (v == btnDatePicker) {
// Get Current Date
final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
DatePickerDialog datePickerDialog = new DatePickerDialog(this,
new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
txtDate.setText(dayOfMonth + "-" + (monthOfYear + 1) + "-" + year);
}
}, mYear, mMonth, mDay);
datePickerDialog.show();
}
if (v == btnTimePicker) {
// Get Current Time
final Calendar c = Calendar.getInstance();
mHour = c.get(Calendar.HOUR_OF_DAY);
mMinute = c.get(Calendar.MINUTE);
// Launch Time Picker Dialog
TimePickerDialog timePickerDialog = new TimePickerDialog(this,
new TimePickerDialog.OnTimeSetListener() {
@Override
public void onTimeSet(TimePicker view, int hourOfDay,
int minute) {
txtTime.setText(hourOfDay + ":" + minute);
}
}, mHour, mMinute, false);
timePickerDialog.show();
}
}
}
In the above code we’ve created a Calendar object using Calendar.getInstance()
to display the current date and time using the respective static fields. Note: The display calendar and clock are the default UI themes as provided in the AppCompat Theme. Below is the output produced by our android date time picker example application. This brings an end to android date time picker dialog example tutorial. You can download the final Android DateTimePickerDialog Project from the below link.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Thank you! I was looking at the so-called Clock UI. I hope you could fix the code that was wrap in lines. It’s a bit confusing to read.
- Mohsen
Thank you for sharing this code. My project went smooth because of yours…
- Anom Harya
Thank you so much, date picker code fragment was helpful to me, i cant display a datepicker dialog in my dialog form, that code is very simple and understandable, so you are a genius.
- Pedro Avellaneda
great code is simple and understandable
- nagaraj
hello How can i set By default PM Option from AM PM Selection…
- priyanka patel
This tutorial is good thanks, but I have a little problem, when I click on the button my datapicker OK and CANCEL does not show for me to click on after I have picked the date. Please can any help me with that?
- Henry
when am changing time then time not changing in terminal but required when change the time then it should be change system time
- aakib
Amazing, super thanks!
- Joseph Ali
Thank you SO MUCH, You R the best
- Amal
Hello can anyone help me where i would like to add two “Time Picker” in one activity not date only two time picker . This is my set onClickonListner Pickup.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { DialogFragment timePicker = new Timepicker(); timePicker.show(getSupportFragmentManager(), “Pickup Time”); } }); Dropoff.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { DialogFragment timePicker1 = new Timepicker(); timePicker1.show(getSupportFragmentManager(), “Drop off”); } }); and Display @Override public void onTimeSet(TimePicker view, int hourOfDay, int minute) { EditText Pickup = (EditText) findViewById(R.id.PUDT); Pickup.setText(hourOfDay + ": " + minute); }
- Karan Patel