Date and time picker dialog

Question

I want to create a dialog which can select the time and the date at the same time.
I know that there is not a default widget that can do that on Android. I also know that there are open source projects on how do similar staff. The problem in this project is that in the dialog we have two buttons: datePicker and timePicker.

And that's not what I want to do - I want that the date and time picker appear at the same time.
So I think the two main problem will be:

1. First make the time and date picker appear in the same dialog.
2. And the second problem will be to change the appearance of time and date picker (the orange color).

The first problem was resolved by Bhavesh. Here is what I get:

The problem now is that I want to change all blue bar color to orange color.
I added android:calendarViewShown="false" to remove the calendar in the right :) Thanks Bhavesh and I changed the theme to HOLO
Here is what I get:

You can download the code (that's the best I can do). You can download from here.

Answer 1

First make the time and date picker appear in the same dialog

Here i can help you some what: you can create a layout consisting of a DatePicker and a TimePicker in a LinearLayout with the orientation set to vertical.

custom_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

    <DatePicker
         android:id="@+id/datePicker1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" >
    </DatePicker>

    <TimePicker
        android:id="@+id/timePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TimePicker>

</LinearLayout>

Then use this layout to create your dialog.

Dialog dialog = new Dialog(mContext);

dialog.setContentView(R.layout.custom_dialog);
dialog.setTitle("Custom Dialog");

To react to the user interacting with your TimePicker, do something like this:

TimePicker tp = (TimePicker)dialog.findViewById(R.id.timepicker1);
tp.setOnTimeChangedListener(myOnTimechangedListener);

To get the values from the Date- and TimePicker when the user has finished setting them, add an OK button in your dialog, and then read the date and time values from the Date- and TimePicker when the user presses OK.

To make something that looks exactly as in your screen shots I recommend you to make all things custom with your own logic.

Answer 2

To change Blue bar colors try the below.

Define your own theme as follows,which extends THEME_HOLO_DARK

Try as follows:-

<style name="testo" parent="@android:style/Widget.DeviceDefault.DatePicker">
    <item name="android:divider">@drawable/MyDivider</item>
</style>

Check the following change-basic-theme-color-of-android-application

Answer 3

There are many solutions available there is one of them, I like this simple method:

String mDateTime;
void getDateTime(){
    final Calendar c = Calendar.getInstance();
    int year = c.get(Calendar.YEAR);
    int month = c.get(Calendar.MONTH);
    int day = c.get(Calendar.DAY_OF_MONTH);
    final int hour = c.get(Calendar.HOUR_OF_DAY);
    final int minute = c.get(Calendar.MINUTE);
    mDateTime = "";
    new DatePickerDialog(
            mContext, new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
            mDateTime =  year +"-"+  month +"-"+ dayOfMonth;
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    new TimePickerDialog(mContext, new TimePickerDialog.OnTimeSetListener() {
                        @Override
                        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                            mDateTime+=" "+hourOfDay+":"+minute;
                        }
                    }, hour, minute, false).show();
                }
            },500);
        }
    }, year, month, day).show();
}