Android Date Picker Tutorial

Udemy Generic 728x90

Objective

In this tutorial, we will learn how to implement DatePicker in Android application through a simple example.

 



 
calendar view

 

Date Picker allows to select consisting of day, month and year in user interface. In this tutorial, we will learn how to implement Date Picker in Android Application. To display DatePickerDialog, we will define DatePickerFragment class that extends DialogFragment and return a DatePickerDialog from the fragment onCreateDialog() method.

 

Step 2

Create Layout

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.

 

Step 3

Create Layout

We will display DatePicker dialog on click button and display date on TextView. So, we need to use TextView and Button Widget.

<Button
    android:id="@+id/picDate"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Pic Date"
    android:onClick="datePicker"/>
<TextView
    android:layout_below="@+id/picDate"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/showDate"
    android:textSize="18dp"/>

button

 

Step 4

Create DatePickerFragment class

To display Date picker dialog, we will create a DatePickerFragment class that extends DialogFragment. Define the onCreateDialog() method to return an instance of DatePickerDialog.

/**
 * Create a DatePickerFragment class that extends DialogFragment. 
 * Define the onCreateDialog() method to return an instance of DatePickerDialog
 */
public static class DatePickerFragment extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        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(), 
                    (DatePickerDialog.OnDateSetListener) 
                            getActivity(), year, month, day);
     }

 }

calendar view

 

Step 5

Implement DatePickerDialog.OnDateSetListener

We need to implement DatePickerDialog.OnDateSetListener interface to receive a callback when the user sets the date. Add onDateSet() method to sets the date by user.

public class MainActivity extends AppCompatActivity 
               implements DatePickerDialog.OnDateSetListener  {
   /**
    * To receive a callback when the user sets the date.
    * @param view
    * @param year
    * @param month
    * @param day
    */
    @Override
    public void onDateSet(DatePicker view, int year, int month, int day) {
       Calendar cal = new GregorianCalendar(year, month, day);
       setDate(cal);
   }
}

 

Step 6

Set Picked Date on TextView

We will display picked date on TextView. So, we need to create a setDate() method. Within this method, get picked date by using getTime() method of Calendar class and set date on textview.

    /**
     * To set date on TextView
     * @param calendar
     */
    private void setDate(final Calendar calendar) {
        final DateFormat dateFormat = DateFormat.getDateInstance(DateFormat.MEDIUM);
        ((TextView) findViewById(R.id.showDate)).setText(dateFormat.format(calendar.getTime()));

    }

set text

 

Step 6

Call DatePickerFragment class

We will display Date picker on click button. hence, we need to create a callback datePicker() method. Within this method, initialize DatePickerFragment object and call show() method.

/**
 * This callback method, call DatePickerFragment class,
 * DatePickerFragment class returns calendar view.
 * @param view
 */
 public void datePicker(View view){

    DatePickerFragment fragment = new DatePickerFragment();
    fragment.show(getSupportFragmentManager(), &quot;date&quot;);
 }

 

Step 6

Final Code

Here is the final code:

public class MainActivity extends AppCompatActivity 
           implements DatePickerDialog.OnDateSetListener  {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /**
     * This callback method, call DatePickerFragment class,
     * DatePickerFragment class returns calendar view.
     * @param view
     */
    public void datePicker(View view){

        DatePickerFragment fragment = new DatePickerFragment();
        fragment.show(getSupportFragmentManager(), &quot;date&quot;);
    }

    /**
     * To set date on TextView
     * @param calendar
     */
    private void setDate(final Calendar calendar) {
        final DateFormat dateFormat = DateFormat.getDateInstance(DateFormat.MEDIUM);

        ((TextView) findViewById(R.id.showDate))
                  .setText(dateFormat.format(calendar.getTime()));

    }

    /**
     * To receive a callback when the user sets the date.
     * @param view
     * @param year
     * @param month
     * @param day
     */
    @Override
    public void onDateSet(DatePicker view, int year, int month, int day) {
        Calendar cal = new GregorianCalendar(year, month, day);
        setDate(cal);
    }

    /**
     * Create a DatePickerFragment class that extends DialogFragment.
     * Define the onCreateDialog() method to return an instance of DatePickerDialog
     */
    public static class DatePickerFragment extends DialogFragment {

        @Override
        public Dialog onCreateDialog(Bundle savedInstanceState) {
            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(),
                    (DatePickerDialog.OnDateSetListener)
                            getActivity(), year, month, day);
        }

    }
}

 



 

Udemy Generic 728x90

Spread the word. Share this post!