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