Date and time picker dialog

52
votes

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.

enter image description here

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:

enter image description here

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:

enter image description here

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

4
androiddatepickerdatetimepickertimepicker
how you get the above image, can you please share code here ? – Jayesh
@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. – Bharat Dodeja
i updated my answer . check in the bottom you can download the code i used – haythem souissi
Can you push the code to github? That site freaks me out. Also, the link does not work. – okysabeni
source code link is not working... Please fix link, i also need the same control. – Krishan

4 Answers

77
votes

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.

2
votes

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

0
votes

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

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

enter image description here enter image description here

Hope it helps. Happy coding!!!