Anas Shahid Android Development: Date and Time picker dialog in Android

Sunday, July 14, 2013

Date and Time picker dialog in Android

Android Provides us with the option of picking date and time using built-in date and time pickers. In this post I will explain how to use these dialogs and how to set them with current date and time on default view.
First let me clear that it is NOT the date and time picker that is in the xml layout, instead we will work on the java code to display the dialog. So lets start with the date.
First off create a new project, with one layout having two buttons and two textviews. Get the reference to these views and name them bttn_date, bttn_time, text_date and text_time respectively. The xml goes something like this:
After setting the xml get references to these buttons and labels in JAVA file(as shown above).
Now for Date:
First we will override the onclick() event of the bttn_date.As we want to set the current date on default when the dialog shows up, we need to get instance of the calander class.
Calander class returns the instance of the time and date and we can extract each separately'
following is the code:
First you will have to declare some global variables
        private int myYear, myMonth, myDay; 
static final int ID_DATEPICKER = 0;
String myDate;

Now in the onclick() event of date button:

bttn_date.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
final Calendar c = Calendar.getInstance();
myYear = c.get(Calendar.YEAR);
   myMonth = c.get(Calendar.MONTH);
   myDay = c.get(Calendar.DAY_OF_MONTH);
   showDialog(ID_DATEPICKER);
}
});
Plus we will have to define a function of datepickerdialog that defines ondateset() function, in this we will set the date to the text_date textbox . it looks something like this:


private DatePickerDialog.OnDateSetListener myDateSetListener
 = new DatePickerDialog.OnDateSetListener(){
  @Override
  public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) 
  {
    //get date in text form
   myDate =  String.valueOf(monthOfYear+1) +"/"+  String.valueOf(dayOfMonth)+"/"+String.valueOf(year);
   text_date.setText(myDate);
  
    }

};

Now for time picker dialog:
we will follow similar steps, first, declare some global variables:

private int myhour, myminute; 
static final int ID_TIMEPICKER = 1;
String myTime;

In the onclick() event of bttn_time:

bttn_time.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {

final Calendar c = Calendar.getInstance();
myhour = c.get(Calendar.HOUR_OF_DAY);
   myminute = c.get(Calendar.MINUTE);
   showDialog(ID_TIMEPICKER);

}

});

Define the settime() finction of the time picker:
 private TimePickerDialog.OnTimeSetListener TimePickerListener =
           new TimePickerDialog.OnTimeSetListener() {
               // while dialog box is closed, below method is called.
               public void onTimeSet(TimePicker view, int hour, int minute)
                        {
                myTime =  String.valueOf(myhour) +" : "+ String.valueOf(myminute);
                text_time.setText(myTime);
               }
           };


We are done with the dialogs.. But it wont show up until we override onCreate() function of the dialog box which identifies the dialog to show up on respective clicks(remember we initialized and called ID_TIMEPICKER and ID_DATEPICKER).
here's the code
@Override
protected Dialog onCreateDialog(int id) 
{
 
 switch(id)
 {
 case ID_DATEPICKER:
   return new DatePickerDialog(this, myDateSetListener,myYear, myMonth, myDay);
  //returns datepicker dialog
 case ID_TIMEPICKER:
 return new TimePickerDialog(this, TimePickerListener,myhour, myminute, true);
                      //returns new time picker dialog
                      //true in the end specifies we are using 24hour clock(for 12-hour set it to false)
default:
   return null;
 }
}
We are done this will give the following output:








View Anas Shahid's profile on LinkedIn

No comments:

Post a Comment