Cross Platform
Android
iOS
Mac

Date Picker

To provide a widget for selecting a date, use the DatePicker widget, which allows the user to select the month, day, and year, in a familiar interface.

In this tutorial, you'll create a DatePickerDialog, which presents the date picker in a floating dialog box at the press of a button. When the date is set by the user, a TextView will update with the new date.

  1. Start a new project named HelloDatePicker.
  2. Open the Resources/Layout/Main.axml file and insert the following:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView android:id="@+id/dateDisplay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""/>
        <Button android:id="@+id/pickDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Change the date"/>
    </LinearLayout>
    

    This creates a basic LinearLayout with a TextView that will display the date and a Button that will open the DatePickerDialog.

  3. Open HelloDatePicker.cs and add the following members to the class:
    private TextView dateDisplay;
    private Button pickDate;
    private DateTime date;
    
    const int DATE_DIALOG_ID = 0;
    

    The first group of members define variables for the layout Views and the date items. The DATE_DIALOG_ID is a constant integer that uniquely identifies the Dialog that will display the date picker.

  4. Now add the following code for the OnCreate() method:
    protected override void OnCreate (Bundle savedInstanceState)
    {
        base.OnCreate (savedInstanceState);
        SetContentView (Resource.Layout.Main);
    
        // capture our View elements
        dateDisplay = FindViewById<TextView> (Resource.Id.dateDisplay);
        pickDate = FindViewById<Button> (Resource.Id.pickDate);
    
        // add a click event handler to the button
        pickDate.Click += delegate { ShowDialog (DATE_DIALOG_ID); };
    
        // get the current date
        date = DateTime.Today;
    
        // display the current date (this method is below)
        UpdateDisplay ();
    }
    

    First, the content is set to the Main.axml layout. Then the TextView and Button elements are captured from the layout with FindViewById(int). A click event handler delegate is subscribed to the Button, so that when it is clicked, it will call ShowDialog(int), passing the unique integer ID for the date picker dialog. Using ShowDialog(int) allows the Activity to manage the life-cycle of the dialog and will call the OnCreateDialog(int) callback method to request the Dialog that should be displayed (which you'll define later). After the on-click listener is set, the current date is acquired. Finally, the private UpdateDisplay() method is called in order to fill the TextView with the current date.

  5. Add the UpdateDisplay() method:
    // updates the date in the TextView
    private void UpdateDisplay ()
    {
        dateDisplay.Text = date.ToString ("d");
    }
    

    This method uses the date value declared for the class to write the date to the layout's TextView, dateDisplay, which was also declared and initialized above.

  6. Implement the DateSet handler required by the DatePickerDialog constructor on the HelloDatePicker class:

    // the event received when the user "sets" the date in the dialog
    void OnDateSet (object sender, DatePickerDialog.DateSetEventArgs e)
    {
        this.date = e.Date;
        UpdateDisplay ();
    }
    

    The listener can be passed to the the dialog's constructor, and then this method will be called when the date in the dialog is set. It updates the date member field with the new values then calls the private UpdateDisplay() method to update the TextView. Note that Android uses 0-based month numbering, so we add 1 to the month.

  7. Now override the OnCreateDialog(int) callback method on the HelloDatePicker class:
    protected override Dialog OnCreateDialog (int id)
    {
        switch (id) {
        case DATE_DIALOG_ID:
            return new DatePickerDialog (this, OnDateSet, date.Year, date.Month - 1, date.Day); 
        }
        return null;
    }
    

    This is an Activity callback method that is passed the integer ID given to ShowDialog(int) (which is called by the button's click handler delegate). When the ID matches the switch case defined here, a DatePickerDialog is instantiated with the HelloDatePicker class (since we made it implement DatePickerDialog.IOnDateSetListener in the previous step) along with the date variables to initialize the widget date.

  8. Run the application.

When you press the "Change the date" button, you should see the following:



References

 

Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. This tutorial is based on the Android Date Picker tutorial.