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.

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.

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.

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

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!

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