Android Date Time picker in one dialog

Question

I am using material Date Time picker for my Android app. But I want to combine the Date and Time picker in one dialog.

<

Answer 1

This answer is basically an improvement in answer given by @Mayur Patel: https://stackoverflow.com/a/38604615/3994127

CustomDateTimePicker.java

import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.support.v7.widget.AppCompatButton;
import android.view.View;
import android.view.Window;
import android.widget.DatePicker;
import android.widget.TimePicker;
import android.widget.ViewSwitcher;

import com.gotrack.gotrack.R;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Locale;

public class CustomDateTimePicker implements View.OnClickListener {
    private Calendar calendar_date = null;
    private ViewSwitcher viewSwitcher;
    private DatePicker datePicker;
    private TimePicker timePicker;
    private AppCompatButton btnDate, btnTime;

    private ICustomDateTimeListener iCustomDateTimeListener = null;

    private Dialog dialog;

    private boolean is24HourView = true, isAutoDismiss = true;

    private int selectedHour, selectedMinute;

    public CustomDateTimePicker(Context context,
                                ICustomDateTimeListener customDateTimeListener) {
        iCustomDateTimeListener = customDateTimeListener;

        dialog = new Dialog(context);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.date_time_picker);
        dialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dialog) {
                resetData();
            }
        });
    }

    private void setView() {
        btnDate = dialog.findViewById(R.id.btn_date);
        btnTime = dialog.findViewById(R.id.btn_time);
        dialog.findViewById(R.id.btn_set).setOnClickListener(this);
        dialog.findViewById(R.id.btn_cancel).setOnClickListener(this);
        viewSwitcher = dialog.findViewById(R.id.view_switcher);
        datePicker = dialog.findViewById(R.id.date_picker);
        timePicker = dialog.findViewById(R.id.time_picker);

        btnDate.setOnClickListener(this);
        btnTime.setOnClickListener(this);

        timePicker.setIs24HourView(is24HourView);
        timePicker.setCurrentHour(selectedHour);
        timePicker.setCurrentMinute(selectedMinute);

        datePicker.updateDate(calendar_date.get(Calendar.YEAR),
                calendar_date.get(Calendar.MONTH),
                calendar_date.get(Calendar.DATE));

        btnDate.performClick();
    }

    public void showDialog() {
        if (!dialog.isShowing()) {
            if (calendar_date == null)
                calendar_date = Calendar.getInstance();

            selectedHour = calendar_date.get(Calendar.HOUR_OF_DAY);
            selectedMinute = calendar_date.get(Calendar.MINUTE);

            dialog.show();

            setView();
        }
    }

    public CustomDateTimePicker setAutoDismiss(boolean isAutoDismiss) {
        this.isAutoDismiss = isAutoDismiss;
        return this;
    }

    public CustomDateTimePicker dismissDialog() {
        if (!dialog.isShowing())
            dialog.dismiss();

        return this;
    }

    public CustomDateTimePicker setDate(Calendar calendar) {
        if (calendar != null)
            calendar_date = calendar;
        return this;
    }

    public CustomDateTimePicker setDate(Date date) {
        if (date != null) {
            calendar_date = Calendar.getInstance();
            calendar_date.setTime(date);
        }
        return this;
    }

    public CustomDateTimePicker setDate(int year, int month, int day) {
        if (month < 12 && month >= 0 && day < 32 && day >= 0 && year > 100
                && year < 3000) {
            calendar_date = Calendar.getInstance();
            calendar_date.set(year, month, day);
        }
        return this;
    }

    public CustomDateTimePicker setTimeIn24HourFormat(int hourIn24Format, int minute) {
        if (hourIn24Format < 24 && hourIn24Format >= 0 && minute >= 0
                && minute < 60) {
            if (calendar_date == null)
                calendar_date = Calendar.getInstance();

            calendar_date.set(calendar_date.get(Calendar.YEAR),
                    calendar_date.get(Calendar.MONTH),
                    calendar_date.get(Calendar.DAY_OF_MONTH), hourIn24Format,
                    minute);

            is24HourView = true;
        }
        return this;
    }

    public CustomDateTimePicker setTimeIn12HourFormat(int hourIn12Format, int minute,
                                                      boolean isAM) {
        if (hourIn12Format < 13 && hourIn12Format > 0 && minute >= 0
                && minute < 60) {
            if (hourIn12Format == 12)
                hourIn12Format = 0;

            int hourIn24Format = hourIn12Format;

            if (!isAM)
                hourIn24Format += 12;

            if (calendar_date == null)
                calendar_date = Calendar.getInstance();

            calendar_date.set(calendar_date.get(Calendar.YEAR),
                    calendar_date.get(Calendar.MONTH),
                    calendar_date.get(Calendar.DAY_OF_MONTH), hourIn24Format,
                    minute);

            is24HourView = false;
        }
        return this;
    }

    public CustomDateTimePicker set24HourFormat(boolean is24HourFormat) {
        is24HourView = is24HourFormat;
        return this;
    }

    public interface ICustomDateTimeListener {
        void onSet(Dialog dialog, Calendar calendarSelected,
                   Date dateSelected, int year, String monthFullName,
                   String monthShortName, int monthNumber, int day,
                   String weekDayFullName, String weekDayShortName, int hour24,
                   int hour12, int min, int sec, String AM_PM);

        void onCancel();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_date:
                btnTime.setEnabled(true);
                btnDate.setEnabled(false);

                if (viewSwitcher.getCurrentView() != datePicker) {
                    viewSwitcher.showPrevious();
                }
                break;

            case R.id.btn_time:
                btnTime.setEnabled(false);
                btnDate.setEnabled(true);
                if (viewSwitcher.getCurrentView() == datePicker) {
                    viewSwitcher.showNext();
                }
                break;


            case R.id.btn_set:
                if (iCustomDateTimeListener != null) {
                    int month = datePicker.getMonth();
                    int year = datePicker.getYear();
                    int day = datePicker.getDayOfMonth();
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                    selectedHour = timePicker.getHour();
                    selectedMinute = timePicker.getMinute();
                } else {
                    selectedHour = timePicker.getCurrentHour();
                    selectedMinute = timePicker.getCurrentMinute();
                }

                    calendar_date.set(year, month, day, selectedHour,
                            selectedMinute);

                    iCustomDateTimeListener.onSet(dialog, calendar_date,
                            calendar_date.getTime(), calendar_date
                                    .get(Calendar.YEAR),
                            getMonthFullName(calendar_date.get(Calendar.MONTH)),
                            getMonthShortName(calendar_date.get(Calendar.MONTH)),
                            calendar_date.get(Calendar.MONTH), calendar_date
                                    .get(Calendar.DAY_OF_MONTH),
                            getWeekDayFullName(calendar_date
                                    .get(Calendar.DAY_OF_WEEK)),
                            getWeekDayShortName(calendar_date
                                    .get(Calendar.DAY_OF_WEEK)), calendar_date
                                    .get(Calendar.HOUR_OF_DAY),
                            getHourIn12Format(calendar_date
                                    .get(Calendar.HOUR_OF_DAY)), calendar_date
                                    .get(Calendar.MINUTE), calendar_date
                                    .get(Calendar.SECOND), getAMPM(calendar_date));
                }
                if (dialog.isShowing() && isAutoDismiss)
                    dialog.dismiss();
                break;

            case R.id.btn_cancel:
                if (iCustomDateTimeListener != null)
                    iCustomDateTimeListener.onCancel();
                if (dialog.isShowing())
                    dialog.dismiss();
                break;
        }
    }

    /**
     * @param date       date in String
     * @param fromFormat format of your <b>date</b> eg: if your date is 2011-07-07
     *                   09:09:09 then your format will be <b>yyyy-MM-dd hh:mm:ss</b>
     * @param toFormat   format to which you want to convert your <b>date</b> eg: if
     *                   required format is 31 July 2011 then the toFormat should be
     *                   <b>d MMMM yyyy</b>
     * @return formatted date
     */
    public static String convertDate(String date, String fromFormat,
                                     String toFormat) {
        try {
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat(fromFormat, Locale.getDefault());
            Date d = simpleDateFormat.parse(date);
            Calendar calendar = Calendar.getInstance();
            calendar.setTime(d);

            simpleDateFormat = new SimpleDateFormat(toFormat, Locale.getDefault());
            simpleDateFormat.setCalendar(calendar);
            date = simpleDateFormat.format(calendar.getTime());

        } catch (Exception e) {
            e.printStackTrace();
        }

        return date;
    }

    private String getMonthFullName(int monthNumber) {
        Calendar calendar = Calendar.getInstance();
        calendar.set(Calendar.MONTH, monthNumber);

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("MMMM", Locale.getDefault());
        simpleDateFormat.setCalendar(calendar);

        return simpleDateFormat.format(calendar.getTime());
    }

    private String getMonthShortName(int monthNumber) {
        Calendar calendar = Calendar.getInstance();
        calendar.set(Calendar.MONTH, monthNumber);

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("MMM", Locale.getDefault());
        simpleDateFormat.setCalendar(calendar);

        return simpleDateFormat.format(calendar.getTime());
    }

    private String getWeekDayFullName(int weekDayNumber) {
        Calendar calendar = Calendar.getInstance();
        calendar.set(Calendar.DAY_OF_WEEK, weekDayNumber);

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("EEEE", Locale.getDefault());
        simpleDateFormat.setCalendar(calendar);

        return simpleDateFormat.format(calendar.getTime());
    }

    private String getWeekDayShortName(int weekDayNumber) {
        Calendar calendar = Calendar.getInstance();
        calendar.set(Calendar.DAY_OF_WEEK, weekDayNumber);

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("EE", Locale.getDefault());
        simpleDateFormat.setCalendar(calendar);

        return simpleDateFormat.format(calendar.getTime());
    }

    private int getHourIn12Format(int hour24) {
        int hourIn12Format = 0;

        if (hour24 == 0)
            hourIn12Format = 12;
        else if (hour24 <= 12)
            hourIn12Format = hour24;
        else
            hourIn12Format = hour24 - 12;

        return hourIn12Format;
    }

    private String getAMPM(Calendar calendar) {
        return (calendar.get(Calendar.AM_PM) == (Calendar.AM)) ? "AM"
                : "PM";
    }

    private CustomDateTimePicker resetData() {
        calendar_date = null;
        is24HourView = true;
        return this;
    }

    public static String pad(int integerToPad) {
        if (integerToPad >= 10 || integerToPad < 0)
            return String.valueOf(integerToPad);
        else
            return "0" + String.valueOf(integerToPad);
    }
}

date_time_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp">

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:text="@string/set_date"
            app:backgroundTint="@color/colorPrimary"
            app:layout_constraintEnd_toStartOf="@+id/btn_time"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_time"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:text="@string/set_time"
            app:backgroundTint="@color/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/btn_date"
            app:layout_constraintTop_toTopOf="parent" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_set"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:text="@string/set"
            app:backgroundTint="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/btn_cancel"
            app:layout_constraintStart_toStartOf="parent" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:text="@string/cancel"
            app:backgroundTint="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/btn_set" />

        <ViewSwitcher
            android:id="@+id/view_switcher"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/btn_set"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_date">

            <DatePicker
                android:id="@+id/date_picker"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:theme="@style/DialogTheme" />

            <TimePicker
                android:id="@+id/time_picker"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:theme="@style/DialogTheme" />
        </ViewSwitcher>
    </android.support.constraint.ConstraintLayout>
</RelativeLayout>

DialogTheme style

<style name="DialogTheme">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>

Calling code

new CustomDateTimePicker(context,
        new CustomDateTimePicker.ICustomDateTimeListener() {
            @Override
            public void onSet(Dialog dialog, Calendar calendarSelected,
                              Date dateSelected, int year,
                              String monthFullName,
                              String monthShortName,
                              int monthNumber, int date,
                              String weekDayFullName,
                              String weekDayShortName, int hour24,
                              int hour12,
                              int min, int sec, String AM_PM) {

            }

            @Override
            public void onCancel() {

            }
        }).set24HourFormat(true).setDate(Calendar.getInstance())
        .showDialog();

Answer 2

Use this simple code.. I'm using this code in my Project..

final Calendar currentDate = Calendar.getInstance();
date = Calendar.getInstance();
            DatePickerDialog datePickerDialog = new DatePickerDialog(getContext(), new DatePickerDialog.OnDateSetListener() {

                @Override
                public void onDateSet(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) {

                    date.set(year, monthOfYear, dayOfMonth);
                    new TimePickerDialog(getContext(), new TimePickerDialog.OnTimeSetListener() {
                        @Override
                        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                            date.set(Calendar.HOUR_OF_DAY, hourOfDay);
                            date.set(Calendar.MINUTE, minute);
                            // Log.v(TAG, "The choosen one " + date.getTime());
                            // Toast.makeText(getContext(),"The choosen one " + date.getTime(),Toast.LENGTH_SHORT).show();
                            datetime.setText(new SimpleDateFormat("dd-MMM-yyyy h:mm a").format(date.getTime()));
                        }
                    },currentDate.get(Calendar.HOUR_OF_DAY), currentDate.get(Calendar.MINUTE), false).show();

                }
            }, currentDate.get(Calendar.YEAR), currentDate.get(Calendar.MONTH), currentDate.get(Calendar.DATE));
            datePickerDialog.getDatePicker().setMinDate(currentDate.getTimeInMillis());
            datePickerDialog.show();

Answer 3

If you need to select the time right after the date selection you can simply show TimePickerDialog automatically after date is selected. This is the easiest way.

While you have listener that is fired when date is selected with selected date, you can simply pass that selected date to TimePickerDialog and with a few customization in mdtp_time_picker_dialog.xml you can add a TextView to show the selected text.

Another option is merging mdtp_time_picker_dialog.xml and mdtp_date_picker_dialog.xml that are root layouts for date picker dialog and time picker dialog. You can set time picker part visibility as GONE and switch the visibility when you want to switch pickers.

The second solution is more difficult to implement because in addition to layouts, you have to merge all controls and listeners.

If you want the user to see both of the pickers, I think you actually need to design a new view yourself. That library layouts is not suitable for this.