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.

Proline

how you get the above image, can you please share code here ? – Virginavirginal

@haythem I am using my custom theme for the activity and want to use Holo.Light theme for the DateTimePicker. I tried all the possible ways but couldn't get it. Please help. – Whippletree

i updated my answer . check in the bottom you can download the code i used – Proline

Can you push the code to github? That site freaks me out. Also, the link does not work. – Ela

source code link is not working... Please fix link, i also need the same control. – Fisherman

File not available. Do you have it in Github? – Parenthesize

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.

Illusory

what is the "custom_dialog" here ? – Virginavirginal

@Jayesh: "custom_dialog" is xml file that i have shown above. – Illusory

but it display picker buttons as first image from above image, i see that in android 2.3.3 and in android 4.0.3 it display only two horizontal lines and PM button... can you please post demo code here – Virginavirginal

developer.android.com/guide/topics/ui/dialogs.html says avoid instantiating Dialog directly. Instead, use one of the following subclasses – Walkabout

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

Rileyrilievo

it doesn't work :( where can i found the default devider image so i can change it? May be the image i use is not good – Proline

<resources xmlns:android="schemas.android.com/apk/res/android">; <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" /> <style name="mytheme" parent="@android:style/Theme.Black" > <item name="android:_DEFAULT_BASE_COLOR_1">#FFFFFF</item> <item name="android:windowNoTitle">true</item> </style> </resources> you can write this resources drawable folder and try. keep this name as MyDevider. – Rileyrilievo

Answer 3

Date Picker and Time Picker both in a single dialog. Check this simple and easy library. CustomDateTimePicker

Hope it helps. Happy coding!!!

Knobkerrie

Answer 4

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();
}

Resee