Multiple DatePickers in same activity
I am absolutely new to the Android platform and have been building an application while learning the development process.
Currently, I am working on an activity in which i need to deploy 2 date pickers. One is a "Start Date" and the other is an "End date". I have been following the DatePicker tutorial on the android developers page here: http://developer.android.com/resources/tutorials/views/hello-datepicker.html
For one DatePicker, it works just fine.
Now my problem is, when I replicate the whole process for a second date picker, it shows up just fine on the emulator as well as on the handset. But when no matter which button I press to select the dates, only the first TextView is updated and the second TextView keeps showing the current date.
Here is the code:
package com.datepicker;
import java.util.Calendar;
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
public class datepicker extends Activity {
private TextView mDateDisplay;
private TextView endDateDisplay;
private Button mPickDate;
private Button endPickDate;
private int mYear;
private int mMonth;
private int mDay;
static final int START_DATE_DIALOG_ID = 0;
static final int END_DATE_DIALOG_ID = 0;
/** Called when the activity is first created. */
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
/* capture our View elements for the start date function */
mDateDisplay = (TextView) findViewById(R.id.startdateDisplay);
mPickDate = (Button) findViewById(R.id.startpickDate);
/* add a click listener to the button */
mPickDate.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDialog(START_DATE_DIALOG_ID);
}
});
/* get the current date */
final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
/* display the current date (this method is below) */
updateStartDisplay();
/* capture our View elements for the end date function */
endDateDisplay = (TextView) findViewById(R.id.enddateDisplay);
endPickDate = (Button) findViewById(R.id.endpickDate);
/* add a click listener to the button */
endPickDate.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDialog(END_DATE_DIALOG_ID);
}
});
/* get the current date */
final Calendar c1 = Calendar.getInstance();
mYear = c1.get(Calendar.YEAR);
mMonth = c1.get(Calendar.MONTH);
mDay = c1.get(Calendar.DAY_OF_MONTH);
/* display the current date (this method is below) */
updateEndDisplay();
}
private void updateEndDisplay() {
endDateDisplay.setText(
new StringBuilder()
// Month is 0 based so add 1
.append(mMonth + 1).append("-")
.append(mDay).append("-")
.append(mYear).append(" "));
}
private void updateStartDisplay() {
mDateDisplay.setText(
new StringBuilder()
// Month is 0 based so add 1
.append(mMonth + 1).append("-")
.append(mDay).append("-")
.append(mYear).append(" "));
}
/* the callback received when the user "sets" the date in the dialog for the start date function */
private DatePickerDialog.OnDateSetListener mDateSetListener =
new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
updateStartDisplay();
}
};
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case START_DATE_DIALOG_ID:
return new DatePickerDialog(this,
mDateSetListener,
mYear, mMonth, mDay);
}
return null;
}
/* the callback received when the user "sets" the date in the dialog for the end date function */
private DatePickerDialog.OnDateSetListener endDateSetListener =
new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
updateStartDisplay();
}
};
protected Dialog onCreateDialog1(int id) {
switch (id) {
case END_DATE_DIALOG_ID:
return new DatePickerDialog(this,
endDateSetListener,
mYear, mMonth, mDay);
}
return null;
}
}
Please advise on the changes required for the code.
Answer
I have a solution that allows for an unlimited number of date fields without adding new dialog types. When the user clicks one of the buttons, I register which TextView and Calendar is currently being modified before launching the DatePickerDialog. The dialog's OnDateSetListener then updates the registered TextView and Calendar.
import java.util.Calendar;
import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
public class MultiDatePickerActivity extends Activity {
private TextView startDateDisplay;
private TextView endDateDisplay;
private Button startPickDate;
private Button endPickDate;
private Calendar startDate;
private Calendar endDate;
static final int DATE_DIALOG_ID = 0;
private TextView activeDateDisplay;
private Calendar activeDate;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.multidatepicker);
/* capture our View elements for the start date function */
startDateDisplay = (TextView) findViewById(R.id.startDateDisplay);
startPickDate = (Button) findViewById(R.id.startPickDate);
/* get the current date */
startDate = Calendar.getInstance();
/* add a click listener to the button */
startPickDate.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDateDialog(startDateDisplay, startDate);
}
});
/* capture our View elements for the end date function */
endDateDisplay = (TextView) findViewById(R.id.endDateDisplay);
endPickDate = (Button) findViewById(R.id.endPickDate);
/* get the current date */
endDate = Calendar.getInstance();
/* add a click listener to the button */
endPickDate.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDateDialog(endDateDisplay, endDate);
}
});
/* display the current date (this method is below) */
updateDisplay(startDateDisplay, startDate);
updateDisplay(endDateDisplay, endDate);
}
private void updateDisplay(TextView dateDisplay, Calendar date) {
dateDisplay.setText(
new StringBuilder()
// Month is 0 based so add 1
.append(date.get(Calendar.MONTH) + 1).append("-")
.append(date.get(Calendar.DAY_OF_MONTH)).append("-")
.append(date.get(Calendar.YEAR)).append(" "));
}
public void showDateDialog(TextView dateDisplay, Calendar date) {
activeDateDisplay = dateDisplay;
activeDate = date;
showDialog(DATE_DIALOG_ID);
}
private OnDateSetListener dateSetListener = new OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
activeDate.set(Calendar.YEAR, year);
activeDate.set(Calendar.MONTH, monthOfYear);
activeDate.set(Calendar.DAY_OF_MONTH, dayOfMonth);
updateDisplay(activeDateDisplay, activeDate);
unregisterDateDisplay();
}
};
private void unregisterDateDisplay() {
activeDateDisplay = null;
activeDate = null;
}
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case DATE_DIALOG_ID:
return new DatePickerDialog(this, dateSetListener, activeDate.get(Calendar.YEAR), activeDate.get(Calendar.MONTH), activeDate.get(Calendar.DAY_OF_MONTH));
}
return null;
}
@Override
protected void onPrepareDialog(int id, Dialog dialog) {
super.onPrepareDialog(id, dialog);
switch (id) {
case DATE_DIALOG_ID:
((DatePickerDialog) dialog).updateDate(activeDate.get(Calendar.YEAR), activeDate.get(Calendar.MONTH), activeDate.get(Calendar.DAY_OF_MONTH));
break;
}
}
}
This kind of flexibility is useful in an application where you don't know how many date pickers you will need until runtime.