Android DatePickerDialog TimePickerDialog Spinner Example

android.app.DatePickerDialog and android.app.TimePickerDialog are widgets that can popup a dialog for user to choose date and time. This article will show you examples about how to use them.

1. DatePickerDialog Constructor Parameters.

  1. Context context: This is the application context, it’s values 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 user click OK button in date picker dialog.
  4. int year : The year value shown in the DatePickerDialog.
  5. int month : The month value shown in the DatePickerDialog.
  6. int day : The day value shown in the DatePickerDialog.

2. TimePickerDialog Constructor Parameters.

  1. Context context: This is the application context, it’s values 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 user click OK button in time picker dialog.
  4. int hour : The hour value shown in the TimePickerDialog.
  5. int minute : The minute value 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.

android datepickerdialog timepickerdialog spinner example

3.1 Layout Xml File.

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.

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.

If you want to use a Spinner instead of calendar or clock in DatePickerDialog or TimePickerDialog, you can do as following.

READ :   Android Popup Window Animation Example

Just use a build-in style or customized theme style when create the DatePickerDialog or TimePickerDialog instance. Following example use android build-in theme style.

// Create the new DatePickerDialog instance.
DatePickerDialog datePickerDialog = new DatePickerDialog(DateTimePickerDialogActivity.this, android.R.style.Theme_Holo_Dialog, onDateSetListener, year, month, day);

datepickerdialog spinner

TimePickerDialog timePickerDialog = new TimePickerDialog(DateTimePickerDialogActivity.this, android.R.style.Theme_Holo_Light_Dialog, onTimeSetListener, hour, minute, is24Hour);

timepickerdialog spinner

(Visited 11,401 times, 4 visits today)

4 Comments


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

    Reply

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

      Reply

  2. how to use this when we are using API level 23

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

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