How to create Date Picker dialog for selecting a date in Android

Shashwat Srivastava -

Whenever the user has to input a date, its always a good idea to assist him/her with a widget which allows the user to select a particular day, month and year.

By default Android provides a widget named DatePicker which can be incoported in your application to provide this functionality to the end users. It has an elegant look and design. So, we will use this widget here.

Note: We will be using Android Platform 3.2 for developing our application.

To demonstrate how to use DatePicker widget we will create a layout which will have a textview and button. The button will be used to choose a new date and once chosen the updated date will be displayed in the textview. Create a new Android project with the following properties:

  • Project Name – Date Picker
  • Name of the Application – Date Picker
  • Package name – com.botskool.DatePicker
  • Activity Name – DatePickerActivity

Create a new XML file in res/layout/ and name it as main.xml and copy the following code to it:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/displayDate" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Date will appear here after being selected" android:textSize="30sp"/> <Button android:id="@+id/pickDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Pick a date"/> </LinearLayout>

Our application consists of a textview and a button. The textview displays the date picked up by the user. When the application loads initially it will display the cuurent date. The button displays the Date Picker dialog to the user. Finally, add the following code to DatePickerActivity.java:

package com.botskool.DatePicker; import java.util.Calendar; import android.app.Activity; import android.app.DatePickerDialog; import android.app.Dialog; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.DatePicker; import android.widget.TextView; import android.widget.Toast; public class DatePickerActivity extends Activity { /** Private members of the class */ private TextView pDisplayDate; private Button pPickDate; private int pYear; private int pMonth; private int pDay; /** This integer will uniquely define the dialog to be used for displaying date picker.*/ static final int DATE_DIALOG_ID = 0; /** Callback received when the user "picks" a date in the dialog */ private DatePickerDialog.OnDateSetListener pDateSetListener = new DatePickerDialog.OnDateSetListener() { public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) { pYear = year; pMonth = monthOfYear; pDay = dayOfMonth; updateDisplay(); displayToast(); } }; /** Updates the date in the TextView */ private void updateDisplay() { pDisplayDate.setText( new StringBuilder() // Month is 0 based so add 1 .append(pMonth + 1).append("/") .append(pDay).append("/") .append(pYear).append(" ")); } /** Displays a notification when the date is updated */ private void displayToast() { Toast.makeText(this, new StringBuilder().append("Date choosen is ").append(pDisplayDate.getText()),  Toast.LENGTH_SHORT).show(); } /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); /** Capture our View elements */ pDisplayDate = (TextView) findViewById(R.id.displayDate); pPickDate = (Button) findViewById(R.id.pickDate); /** Listener for click event of the button */ pPickDate.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { showDialog(DATE_DIALOG_ID); } }); /** Get the current date */ final Calendar cal = Calendar.getInstance(); pYear = cal.get(Calendar.YEAR); pMonth = cal.get(Calendar.MONTH); pDay = cal.get(Calendar.DAY_OF_MONTH); /** Display the current date in the TextView */ updateDisplay(); } /** Create a new dialog for date picker */ @Override protected Dialog onCreateDialog(int id) { switch (id) { case DATE_DIALOG_ID: return new DatePickerDialog(this, pDateSetListener, pYear, pMonth, pDay); } return null; } }

Here, in the beginning we have defined members of the class. In onCreate() function, we map these members to the corresponding variables in the layout. In this function, we also register to OnClickListener event of the button. When a user clicks on the button, the showDialog() function is called. A call to onCreateDialog() function is made the first time showDialog() function executes. This leads to the creation of a new dialog DatePickerDialog. After that the same dialog is used again whenever user clicks on the button for picking a date. Along with registering for on-click listener event, we retreive the current date and call updateDisplay() function inside onCreate() function.

The updateDisplay() function updates the layout's TextView, pDisplayDate, by using the values of the private date members of the class.

Additionally, the DatePickerDialog.OnDateSetListener listens for when the user has set the date (by clicking on the button). When this happens, the onDateSet() callback method is called, which is defined to update the pYear, pMonth, and pDay member fields with the new date chosen by the user. After this the private updateDisplay() method is called to update the TextView and displayToast() method is called to show a notification informing about the date change.

Thats it! Now compile and run the Android application. If you click on the button the date picker widget will be displayed as shown below:

After choosing a specific date the textview gets updated and a notification is also displayed as shown below: