Customise DatePicker and TimePicker Dialog in Android

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 click on the EditText box. When the date is set by the user, a EditText will update with the new date.

Also you can set TimePickerDialog similarly DatePickerDialog.


TimePickerDialog.java

public class TimeDialog extends Activity {
   
    private int mYear;
    private int mMonth;
    private int mDay;
    private EditText mPickTime,mPickDate;
    private int mhour,mminute;
   
    static final int TIME_DIALOG_ID = 1;
    static final int DATE_DIALOG_ID = 0;
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        mPickDate = (EditText) findViewById(R.id.datepicker);
        mPickTime=(EditText) findViewById(R.id.timepicker);
        mPickTime.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v) {
                // TODO Auto-generated method stub
                showDialog(TIME_DIALOG_ID);
            }
        });

        //PickDate's click event listener
        mPickDate.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                showDialog(DATE_DIALOG_ID);

            }
        });

        final Calendar c = Calendar.getInstance();
        mYear = c.get(Calendar.YEAR);
        mMonth = c.get(Calendar.MONTH);
        mDay = c.get(Calendar.DAY_OF_MONTH);
        mhour = c.get(Calendar.HOUR_OF_DAY);
        mminute = c.get(Calendar.MINUTE);
    }       

private void updateDate() {

    mPickDate.setText(
        new StringBuilder()
                // Month is 0 based so add 1
                .append(mDay).append("/")
                .append(mMonth + 1).append("/")
                .append(mYear).append(" "));
    showDialog(DATE_DIALOG_ID);

     }

  //-------------------------------------------update time----------------------------------------//   
public void updatetime()
{
    mPickTime.setText(
            new StringBuilder()
                    .append(pad(mhour)).append(":")
                    .append(pad(mminute)));
}
private static String pad(int c)
{
    if (c >= 10)
           return String.valueOf(c);
    else
           return "0" + String.valueOf(c);
}
//Datepicker dialog generation 

private DatePickerDialog.OnDateSetListener mDateSetListener =
    new DatePickerDialog.OnDateSetListener() {
        public void onDateSet(DatePicker view, int year,
                              int monthOfYear, int dayOfMonth) {
            mYear = year;
            mMonth = monthOfYear;
            mDay = dayOfMonth;
           updateDate();
        }
};
 // Timepicker dialog generation
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
        new TimePickerDialog.OnTimeSetListener() {
            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                mhour = hourOfDay;
                mminute = minute;
                updatetime();
            }
        };
    @Override
    protected Dialog onCreateDialog(int id) {
        switch (id) {
        case DATE_DIALOG_ID:
            return new DatePickerDialog(this,
                    mDateSetListener, mYear, mMonth,mDay);
        case TIME_DIALOG_ID:
            return new TimePickerDialog(this,
                    mTimeSetListener, mhour, mminute, false);
        }
        return null;
    }
}

The output of this program is as follows: