1 page.title=Hello, DatePicker 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>A {@link android.widget.DatePicker} is a widget that allows the user to select a month, day and year.</p> 7 8 9 <ol> 10 <li>Start a new project/Activity called HelloDatePicker.</li> 11 <li>Open the layout file and make it like so: 12 <pre> 13 <?xml version="1.0" encoding="utf-8"?> 14 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 15 android:layout_width="wrap_content" 16 android:layout_height="wrap_content" 17 android:orientation="vertical"> 18 19 <TextView android:id="@+id/dateDisplay" 20 android:layout_width="wrap_content" 21 android:layout_height="wrap_content" 22 android:text=""/> 23 24 <Button android:id="@+id/pickDate" 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 android:text="Change the date"/> 28 29 </LinearLayout> 30 </pre> 31 <p>For the layout, we're using a vertical LinearLayout, with a {@link android.widget.TextView} that 32 will display the date and a {@link android.widget.Button} that will initiate the DatePicker dialog. 33 With this layout, the TextView will sit above the Button. 34 The text value in the TextView is set empty, as it will be filled 35 with the current date when our Activity runs.</p> 36 </li> 37 38 <li>Open HelloDatePicker.java. Insert the following to the HelloDatePicker class: 39 <pre> 40 private TextView mDateDisplay; 41 private Button mPickDate; 42 43 private int mYear; 44 private int mMonth; 45 private int mDay; 46 47 static final int DATE_DIALOG_ID = 0; 48 49 @Override 50 protected void onCreate(Bundle savedInstanceState) { 51 super.onCreate(savedInstanceState); 52 setContentView(R.layout.main); 53 54 // capture our View elements 55 mDateDisplay = (TextView) findViewById(R.id.dateDisplay); 56 mPickDate = (Button) findViewById(R.id.pickDate); 57 58 // add a click listener to the button 59 mPickDate.setOnClickListener(new View.OnClickListener() { 60 public void onClick(View v) { 61 showDialog(DATE_DIALOG_ID); 62 } 63 }); 64 65 // get the current date 66 final Calendar c = Calendar.getInstance(); 67 mYear = c.get(Calendar.YEAR); 68 mMonth = c.get(Calendar.MONTH); 69 mDay = c.get(Calendar.DAY_OF_MONTH); 70 71 // display the current date 72 updateDisplay(); 73 } 74 </pre> 75 <p class="note"><strong>Tip:</strong> Press Ctrl(or Cmd) + Shift + O to import all needed packages.</p> 76 <p>We start by instantiating variables for our Views and date fields. 77 The <code>DATE_DIALOG_ID</code> is a static integer that uniquely identifies the Dialog. In the 78 <code>onCreate()</code> method, we get prepared by setting the layout and capturing the View elements. 79 Then we create an on-click listener for the Button, so that when it is clicked it will 80 show our DatePicker dialog. The <code>showDialog()</code> method will pop-up the date picker dialog 81 by calling the <code>onCreateDialog()</code> callback method 82 (which we'll define in the next section). We then create an 83 instance of {@link java.util.Calendar} and get the current year, month and day. Finally, we call 84 <code>updateDisplay()</code>—our own method (defined later) that will fill the TextView.</p> 85 </li> 86 87 <li>After the <code>onCreate()</code> method, add the <code>onCreateDialog()</code> callback method 88 (which is called by <code>showDialog()</code>) 89 <pre> 90 @Override 91 protected Dialog onCreateDialog(int id) { 92 switch (id) { 93 case DATE_DIALOG_ID: 94 return new DatePickerDialog(this, 95 mDateSetListener, 96 mYear, mMonth, mDay); 97 } 98 return null; 99 } 100 </pre> 101 <p>This method is passed the identifier we gave <code>showDialog()</code> and initializes 102 the DatePicker to the date we retrieved from our Calendar instance.</p> 103 </li> 104 105 <li>Following that, add the <code>updateDisplay()</code> method: 106 <pre> 107 // updates the date we display in the TextView 108 private void updateDisplay() { 109 mDateDisplay.setText( 110 new StringBuilder() 111 // Month is 0 based so add 1 112 .append(mMonth + 1).append("-") 113 .append(mDay).append("-") 114 .append(mYear).append(" ")); 115 } 116 </pre> 117 <p>This uses the member date values to write the date to our TextView.</p> 118 </li> 119 <li>Finally, add a listener that will be called when the user sets a new date: 120 <pre> 121 // the callback received when the user "sets" the date in the dialog 122 private DatePickerDialog.OnDateSetListener mDateSetListener = 123 new DatePickerDialog.OnDateSetListener() { 124 125 public void onDateSet(DatePicker view, int year, 126 int monthOfYear, int dayOfMonth) { 127 mYear = year; 128 mMonth = monthOfYear; 129 mDay = dayOfMonth; 130 updateDisplay(); 131 } 132 }; 133 </pre> 134 <p>This <code>OnDateSetListener</code> method listens for when the user is done setting the date 135 (clicks the "Set" button). At that time, this fires and we update our member fields with 136 the new date defined by the user and update our TextView by calling <code>updateDisplay()</code>.</p> 137 </li> 138 139 <li>Now run it.</li> 140 </ol> 141 <p>When you press the "Change the date" button, you should see the following:</p> 142 <img src="images/hello-datepicker.png" width="150px" /> 143 144 <h3>References</h3> 145 <ul> 146 <li>{@link android.widget.DatePicker}</li> 147 <li>{@link android.widget.Button}</li> 148 <li>{@link android.widget.TextView}</li> 149 <li>{@link java.util.Calendar}</li> 150 </ul> 151 152
