Android DatePickerDialog TimePickerDialog Spinner Example

The android.app.DatePickerDialog and android.app.TimePickerDialog class are widgets that can pop up a dialog for users to choose date and time. This article will show you examples of how to use them.

1. DatePickerDialog Constructor Parameters.

  1. Context context: This is the application context, it’s value commonly is ActivityClass.this.
  2. int styleResourceId: This is a style resource id. If specified, then show the date picker dialog in Spinner mode. There are some default values such as android.R.style.Theme_Holo_Dialog, you can also use your customized styles.
  3. OnDateSetListener onDateSetListener: This is a listener object which will be invoked when the user clicks the OK button in the date picker dialog.
  4. int year: The year value that is shown in the DatePickerDialog.
  5. int month: The month value that is shown in the DatePickerDialog.
  6. int day: The day value that is shown in the DatePickerDialog.

2. TimePickerDialog Constructor Parameters.

  1. Context context: This is the application context, it’s value commonly is ActivityClass.this.
  2. int styleResourceId: This is a style resource id. If specified, then show the time picker dialog in Spinner mode. There are some default values such as android.R.style.Theme_Holo_Dialog, you can also use your customized styles.
  3. OnTimeSetListener onTimeSetListener: This is a listener object which will be invoked when the user clicks the OK button in the time picker dialog.
  4. int hour: The hour value that is shown in the TimePickerDialog.
  5. int minute: The minute value that is shown in the TimePickerDialog.
  6. boolean is24Hour: True means show time in 24-hour format. False means show time in 12-hour format.

3. DatePickerDialog TimePickerDialog Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/c9yWISr_3-0

3.1 Layout XML File.

  1. activity_date_time_picker_dialog.xml
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/datePickerDialogButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Open DatePicker Dialog"
                android:layout_weight="1"/>
    
            <Button
                android:id="@+id/timePickerDialogButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Open TimePicker Dialog"
                android:layout_weight="1"/>
        </LinearLayout>
    
        <TextView
            android:id="@+id/datePickerValue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <TextView
            android:id="@+id/timePickerValue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

3.2 Activity Java File.

  1. DateTimePickerDialogActivity.java
    package com.dev2qa.example;
    
    import android.app.DatePickerDialog;
    import android.app.TimePickerDialog;
    import android.icu.util.Calendar;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.Button;
    import android.widget.DatePicker;
    import android.widget.TextView;
    import android.widget.TimePicker;
    
    public class DateTimePickerDialogActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_date_time_picker_dialog);
    
            setTitle("dev2qa.com --- DatePicker TimePicker Dialog Example");
    
            this.showDatePickerDialog();
    
            this.showTimePickerDialog();
    
        }
    
        // Create and show a DatePickerDialog when click button.
        private void showDatePickerDialog()
        {
            // Get open DatePickerDialog button.
            Button datePickerDialogButton = (Button)findViewById(R.id.datePickerDialogButton);
            datePickerDialogButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    // Create a new OnDateSetListener instance. This listener will be invoked when user click ok button in DatePickerDialog.
                    DatePickerDialog.OnDateSetListener onDateSetListener = new DatePickerDialog.OnDateSetListener() {
                        @Override
                        public void onDateSet(DatePicker datePicker, int year, int month, int dayOfMonth) {
                            StringBuffer strBuf = new StringBuffer();
                            strBuf.append("You select date is ");
                            strBuf.append(year);
                            strBuf.append("-");
                            strBuf.append(month+1);
                            strBuf.append("-");
                            strBuf.append(dayOfMonth);
    
                            TextView datePickerValueTextView = (TextView)findViewById(R.id.datePickerValue);
                            datePickerValueTextView.setText(strBuf.toString());
                        }
                    };
    
                    // Get current year, month and day.
                    Calendar now = Calendar.getInstance();
                    int year = now.get(java.util.Calendar.YEAR);
                    int month = now.get(java.util.Calendar.MONTH);
                    int day = now.get(java.util.Calendar.DAY_OF_MONTH);
    
                    // Create the new DatePickerDialog instance.
                    DatePickerDialog datePickerDialog = new DatePickerDialog(DateTimePickerDialogActivity.this, onDateSetListener, year, month, day);
    
                    // Set dialog icon and title.
                    datePickerDialog.setIcon(R.drawable.if_snowman);
                    datePickerDialog.setTitle("Please select date.");
    
                    // Popup the dialog.
                    datePickerDialog.show();
                }
            });
        }
    
        // Create and show a TimePickerDialog when click button.
        private void showTimePickerDialog()
        {
            // Get open TimePickerDialog button.
            Button timePickerDialogButton = (Button)findViewById(R.id.timePickerDialogButton);
            timePickerDialogButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    // Create a new OnTimeSetListener instance. This listener will be invoked when user click ok button in TimePickerDialog.
                    TimePickerDialog.OnTimeSetListener onTimeSetListener = new TimePickerDialog.OnTimeSetListener() {
                        @Override
                        public void onTimeSet(TimePicker timePicker, int hour, int minute) {
                            StringBuffer strBuf = new StringBuffer();
                            strBuf.append("You select time is ");
                            strBuf.append(hour);
                            strBuf.append(":");
                            strBuf.append(minute);
    
                            TextView timePickerValueTextView = (TextView)findViewById(R.id.timePickerValue);
                            timePickerValueTextView.setText(strBuf.toString());
                        }
                    };
    
                    Calendar now = Calendar.getInstance();
                    int hour = now.get(java.util.Calendar.HOUR_OF_DAY);
                    int minute = now.get(java.util.Calendar.MINUTE);
    
                    // Whether show time in 24 hour format or not.
                    boolean is24Hour = true;
    
                    TimePickerDialog timePickerDialog = new TimePickerDialog(DateTimePickerDialogActivity.this, onTimeSetListener, hour, minute, is24Hour);
    
                    timePickerDialog.setIcon(R.drawable.if_snowman);
                    timePickerDialog.setTitle("Please select time.");
    
                    timePickerDialog.show();
                }
            });
        }
    }

4. How To Use Spinner In DatePickerDialog TimePickerDialog.

  1. If you want to use a Spinner instead of a calendar or clock in DatePickerDialog or TimePickerDialog, you can do as following.
  2. Just use a build-in style or customized theme style when creating the DatePickerDialog or TimePickerDialog instance.
  3. Below is the DatePickerDialog with the android build-in theme style ( android.R.style.Theme_Holo_Dialog ) source code.
    // Create the new DatePickerDialog instance.
    DatePickerDialog datePickerDialog = new DatePickerDialog(DateTimePickerDialogActivity.this, android.R.style.Theme_Holo_Dialog, onDateSetListener, year, month, day);
  4. Below is the DatePickerDialog example image.
    datepickerdialog-spinner
  5. Below is the TimePickerDialog with the android build-in theme style ( android.R.style.Theme_Holo_Light_Dialog ) source code.
    TimePickerDialog timePickerDialog = new TimePickerDialog(DateTimePickerDialogActivity.this, android.R.style.Theme_Holo_Light_Dialog, onTimeSetListener, hour, minute, is24Hour);
  6. Below is the TimePickerDialog example image.
    timepickerdialog-spinner
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Deep Bhatt
Deep Bhatt

how to use this when we are using API level 23

Rem
Rem

Really cool thanks 🙂
I’ve added this too, to remove the ‘box in a box’ effect.

Rem
Rem
Reply to  Rem

this.timePickerDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);

Lindrid
Lindrid

Good example, thank u man!

Clicky
4
0
Would love your thoughts, please comment.x
()
x