1 page.title=Date Picker 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>To provide a widget for selecting a date, use the {@link android.widget.DatePicker} 7 widget, which allows the user to select the month, day, and year, in a familiar interface.</p> 8 9 <p>In this tutorial, you'll create a {@link android.app.DatePickerDialog}, which presents the 10 date picker in a floating dialog box at the press of a button. When the date is set by 11 the user, a {@link android.widget.TextView} will update with the new date.</p> 12 13 <ol> 14 <li>Start a new project named <em>HelloDatePicker</em>.</li> 15 <li>Open the <code>res/layout/main.xml</code> file and insert the following: 16 <pre> 17 <?xml version="1.0" encoding="utf-8"?> 18 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:orientation="vertical"> 22 <TextView android:id="@+id/dateDisplay" 23 android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:text=""/> 26 <Button android:id="@+id/pickDate" 27 android:layout_width="wrap_content" 28 android:layout_height="wrap_content" 29 android:text="Change the date"/> 30 </LinearLayout> 31 </pre> 32 <p>This creates a basic {@link android.widget.LinearLayout} with a {@link android.widget.TextView} 33 that will display the date and a {@link android.widget.Button} that will open the {@link 34 android.app.DatePickerDialog}.</p> 35 </li> 36 37 <li>Open <code>HelloDatePicker.java</code> and add the following members to the class: 38 <pre> 39 private TextView mDateDisplay; 40 private Button mPickDate; 41 private int mYear; 42 private int mMonth; 43 private int mDay; 44 45 static final int DATE_DIALOG_ID = 0; 46 </pre> 47 <p>The first group of members define variables for the layout {@link android.view.View}s and the 48 date items. The <code>DATE_DIALOG_ID</code> is a static integer that uniquely identifies the {@link 49 android.app.Dialog} that will display the date picker.</p> 50 </li> 51 52 <li>Now add the following code for the {@link android.app.Activity#onCreate(Bundle) onCreate()} 53 method: 54 <pre> 55 protected void onCreate(Bundle savedInstanceState) { 56 super.onCreate(savedInstanceState); 57 setContentView(R.layout.main); 58 59 // capture our View elements 60 mDateDisplay = (TextView) findViewById(R.id.dateDisplay); 61 mPickDate = (Button) findViewById(R.id.pickDate); 62 63 // add a click listener to the button 64 mPickDate.setOnClickListener(new View.OnClickListener() { 65 public void onClick(View v) { 66 showDialog(DATE_DIALOG_ID); 67 } 68 }); 69 70 // get the current date 71 final Calendar c = Calendar.getInstance(); 72 mYear = c.get(Calendar.YEAR); 73 mMonth = c.get(Calendar.MONTH); 74 mDay = c.get(Calendar.DAY_OF_MONTH); 75 76 // display the current date (this method is below) 77 updateDisplay(); 78 } 79 </pre> 80 81 <p>First, the content is set to the <code>main.xml</code> layout. Then the {@link 82 android.widget.TextView} and {@link android.widget.Button} elements are captured from the layout 83 with {@link android.app.Activity#findViewById(int)}. A 84 new {@link android.view.View.OnClickListener} is created for the 85 {@link android.widget.Button}, so that when it is clicked, it 86 will call {@link android.app.Activity#showDialog(int)}, passing the unique integer ID for 87 the date picker dialog. Using {@link android.app.Activity#showDialog(int)} allows the {@link 88 android.app.Activity} to manage the life-cycle of the dialog and will call the {@link 89 android.app.Activity#onCreateDialog(int)} callback method to request the {@link android.app.Dialog} 90 that should be displayed (which you'll 91 define later). After the on-click listener is set, a new {@link java.util.Calendar} is created 92 and the current year, month and day are acquired. Finally, the private 93 <code>updateDisplay()</code> method is called in order to fill the {@link android.widget.TextView} 94 with the current date.</p> 95 </li> 96 97 <li>Add the <code>updateDisplay()</code> method: 98 <pre> 99 // updates the date in the TextView 100 private void updateDisplay() { 101 mDateDisplay.setText( 102 new StringBuilder() 103 // Month is 0 based so add 1 104 .append(mMonth + 1).append("-") 105 .append(mDay).append("-") 106 .append(mYear).append(" ")); 107 } 108 </pre> 109 <p>This method uses the member date values declared for the class to write the date to the layout's 110 {@link android.widget.TextView}, {@code mDateDisplay}, which was also declared and initialized 111 above.</p> 112 </li> 113 114 <li>Initialize a new {@link android.app.DatePickerDialog.OnDateSetListener} as a member of the 115 <code>HelloDatePicker</code> class: 116 <pre> 117 // the callback received when the user "sets" the date in the dialog 118 private DatePickerDialog.OnDateSetListener mDateSetListener = 119 new DatePickerDialog.OnDateSetListener() { 120 121 public void onDateSet(DatePicker view, int year, 122 int monthOfYear, int dayOfMonth) { 123 mYear = year; 124 mMonth = monthOfYear; 125 mDay = dayOfMonth; 126 updateDisplay(); 127 } 128 }; 129 </pre> 130 <p>The {@link android.app.DatePickerDialog.OnDateSetListener} listens for when the user 131 has set the date (by clicking the "Set" button). At that time, the {@link 132 android.app.DatePickerDialog.OnDateSetListener#onDateSet(DatePicker,int,int,int) onDateSet()} 133 callback method is called, which is defined to update the {@code mYear}, {@code mMonth}, and 134 {@code mDay} member fields with the new date then call the private <code>updateDisplay()</code> 135 method to update the {@link android.widget.TextView}.</p> 136 </li> 137 138 <li>Now add the {@link android.app.Activity#onCreateDialog(int)} callback method to the {@code 139 HelloDatePicker} class: 140 <pre> 141 @Override 142 protected Dialog onCreateDialog(int id) { 143 switch (id) { 144 case DATE_DIALOG_ID: 145 return new DatePickerDialog(this, 146 mDateSetListener, 147 mYear, mMonth, mDay); 148 } 149 return null; 150 } 151 </pre> 152 <p>This is an {@link android.app.Activity} callback method that is passed the integer ID given to 153 {@link android.app.Activity#showDialog(int)} (which is called by the button's {@link 154 android.view.View.OnClickListener}). When the ID matches the switch case defined here, a {@link 155 android.app.DatePickerDialog} is instantiated with the {@link 156 android.app.DatePickerDialog.OnDateSetListener} created in the previous 157 step, along with the date variables to initialize the widget date.</p> 158 </li> 159 160 <li>Run the application.</li> 161 </ol> 162 <p>When you press the "Change the date" button, you should see the following:</p> 163 <img src="images/hello-datepicker.png" width="150px" /> 164 165 <h3>References</h3> 166 <ul> 167 <li>{@link android.app.DatePickerDialog}</li> 168 <li>{@link android.app.DatePickerDialog.OnDateSetListener}</li> 169 <li>{@link android.widget.Button}</li> 170 <li>{@link android.widget.TextView}</li> 171 <li>{@link java.util.Calendar}</li> 172 </ul> 173 174
