Android DatePicker Example

In this article, I am going to show you an example of Android’s DatePicker widget. It provides controls for selecting date (month, day, year). If you want to display the time components hour, minute, AM/PM then you need to use a TimePicker.

Android provides these controls in ready-to-use dialogs, DatePickerDialog for dates and TimePickerDialog for picking times.

We will extend DialogFragment to build the dialogs. If you are new to DialogFragment, have a look at my previous article on DialogFragment.

Main Layout

My main screen has a text field that will show you the date of the DatePicker widget. In order to set a new date, you will press ‘Set Date’ and the date picker dialog will be displayed. Pick a date and press ‘Done’. Once done the control comes back to the main screen and you will see the selected date. The text field too will be update with the new date.

To add a date picker, use DatePicker element. Note that the ‘Set Date’ button has onClick set to ‘showDatePicker’ method. We need to implement this method in the main activity to respond to the button click.

welcome.xml:

<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.DatePickerExample" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/date_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:textSize="20sp" />

    <DatePicker
        android:id="@+id/date_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="showDatePicker"
        android:text="@string/set_date" />

</LinearLayout>

Add your labels in strings.xml.

strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">JavArticles</string>
    <string name="welcome">DatePicker Example</string>
    <string name="set_date">Set Date</string>
    
</resources>

To display a DatePickerDialog using DialogFragment, you need to define a fragment class that extends DialogFragment and override onCreateDialog(). In onCreateDialog you will create and return a DatePickerDialog.

We will implement DatePickerDialog.OnDateSetListener interface to receive a callback when the user sets the time. We will make our main activity implement this interface as we want to update the text field with the changed date.

DatePickerExample:

package com.javarticles.android;


import java.util.Calendar;

import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.app.Dialog;
import android.app.DialogFragment;
import android.os.Bundle;

public class DatePickerExample extends DialogFragment {
	private OnDateSetListener 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);

		return new DatePickerDialog(getActivity(), onDateSetListener, year, month, day);
	}

    public void onAttach(Activity activity) {
        super.onAttach(activity);
        if (activity instanceof OnDateSetListener) {
        	onDateSetListener = (OnDateSetListener) activity;
        }
    }
	
}

In the main activity, we will set the current date to the text field. When ‘Set Date’ is pressed, showDatePicker is invoked. We will create our DialogFragment object and call

newFragment.show(getFragmentManager(), "datePicker")

to show the date dialog. This call will automatically add the fragment to the activity.

MainAcitivty:

package com.javarticles.android;

import java.util.Calendar;

import android.app.DatePickerDialog.OnDateSetListener;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.DatePicker;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnDateSetListener {
	private TextView dateSetText;
	private DatePicker datePicker;

	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);
		dateSetText = (TextView) findViewById(R.id.date_set);
		datePicker = (DatePicker) findViewById(R.id.date_picker);
		final Calendar c = Calendar.getInstance();
		int year = c.get(Calendar.YEAR);
		int monthOfYear = c.get(Calendar.MONTH);
		int dayOfMonth = c.get(Calendar.DAY_OF_MONTH);
		dateSetText.setText(year + "-" + (monthOfYear + 1) + "-" + dayOfMonth);
	}

	public void showDatePicker(View v) {
		DatePickerExample newFragment = new DatePickerExample();
		newFragment.show(getFragmentManager(), "datePicker");
	}

	@Override
	public void onDateSet(DatePicker view, int year, int monthOfYear,
			int dayOfMonth) {
		dateSetText.setText(year + "-" + (monthOfYear + 1) + "-" + dayOfMonth);
		datePicker.init(year, monthOfYear, dayOfMonth, null);
	}

}

Run the application

Click on ‘Set Date’ to show the date picker dialog.

Pick a date and click on ‘Done’.

Main screen after the date is picked.

Download the source code

This was an example of Android’s DatePicker widget. You can download the source code here: datePickerExample.zip