Android Date Time Picker Dialog

Filed Under: Android

Android Date Time picker are used a lot in android apps. In this tutorial we’ll demonstrate the use of a Date Picker and Timer Picker Dialog in our android application. These components are used to select date and time in a customised user interface. We will use DatePickerDialog and TimePickerDialog classes with Calendar class in our android application code to achieve this.

Android DatePickerDialog and TimePickerDialog

Though a Date Picker and Time Picker can be used as independent widgets but they occupy more space on the screen. Hence using them inside a Dialog is a better choice. Fortunately android provides use with its own DatePickerDialog and TimePickerDialog classes.

DatePickerDialog and TimePickerDialog classes have onDateSetListener() and onTimeSetListener() callback methods respectively. These callback methods are invoked when the user is done with filling the date and time respectively.

The DatePickerDialog class consists of a 5 argument constructor with the parameters listed below.

  1. Context: It requires the application context
  2. CallBack Function: onDateSet() is invoked when the user sets the date with the following parameters:
    • int year : It will be store the current selected year from the dialog
    • int monthOfYear : It will be store the current selected month from the dialog
    • int dayOfMonth : It will be store the current selected day from the dialog
  3. int mYear : It shows the the current year that’s visible when the dialog pops up
  4. int mMonth : It shows the the current month that’s visible when the dialog pops up
  5. int mDay : It shows the the current day that’s visible when the dialog pops up

The TimePickerDialog class consists of a 5 argument constructor with the parameters listed below.

  1. Context: It requires the application context
  2. CallBack Function: onTimeSet() is invoked when the user sets the time with the following parameters:
    • int hourOfDay : It will be store the current selected hour of the day from the dialog
    • int minute : It will be store the current selected minute from the dialog
  3. int mHours : It shows the the current Hour that’s visible when the dialog pops up
  4. int mMinute : It shows the the current minute that’s visible when the dialog pops up
  5. boolean false : If its set to false it will show the time in 24 hour format else not

Android Date Time Picker Example Project Structure

android date time picker, android TimePickerDialog, android DatePickerDialog

Android Date Time Picker Dialog Project Code

The activity_main.xml consists of two buttons to invoke the Date and Time Picker Dialogs and set the user selected time in the two EditText views. The xml code is given below.

activity_main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:id="@+id/in_date"
        android:layout_marginTop="82dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SELECT DATE"
        android:id="@+id/btn_date"
        android:layout_alignBottom="@+id/in_date"
        android:layout_toRightOf="@+id/in_date"
        android:layout_toEndOf="@+id/in_date" />

    <EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:id="@+id/in_time"
        android:layout_below="@+id/in_date"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SELECT TIME"
        android:id="@+id/btn_time"
        android:layout_below="@+id/btn_date"
        android:layout_alignLeft="@+id/btn_date"
        android:layout_alignStart="@+id/btn_date" />

</RelativeLayout>

The MainActivity.java class is given below:


package com.journaldev.datetimepickerdialog;

import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity implements
        View.OnClickListener {

    Button btnDatePicker, btnTimePicker;
    EditText txtDate, txtTime;
    private int mYear, mMonth, mDay, mHour, mMinute;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnDatePicker=(Button)findViewById(R.id.btn_date);
        btnTimePicker=(Button)findViewById(R.id.btn_time);
        txtDate=(EditText)findViewById(R.id.in_date);
        txtTime=(EditText)findViewById(R.id.in_time);

        btnDatePicker.setOnClickListener(this);
        btnTimePicker.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {

        if (v == btnDatePicker) {

            // Get Current Date
            final Calendar c = Calendar.getInstance();
            mYear = c.get(Calendar.YEAR);
            mMonth = c.get(Calendar.MONTH);
            mDay = c.get(Calendar.DAY_OF_MONTH);


            DatePickerDialog datePickerDialog = new DatePickerDialog(this,
                    new DatePickerDialog.OnDateSetListener() {

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

                            txtDate.setText(dayOfMonth + "-" + (monthOfYear + 1) + "-" + year);

                        }
                    }, mYear, mMonth, mDay);
            datePickerDialog.show();
        }
        if (v == btnTimePicker) {

            // Get Current Time
            final Calendar c = Calendar.getInstance();
            mHour = c.get(Calendar.HOUR_OF_DAY);
            mMinute = c.get(Calendar.MINUTE);

            // Launch Time Picker Dialog
            TimePickerDialog timePickerDialog = new TimePickerDialog(this,
                    new TimePickerDialog.OnTimeSetListener() {

                        @Override
                        public void onTimeSet(TimePicker view, int hourOfDay,
                                              int minute) {

                            txtTime.setText(hourOfDay + ":" + minute);
                        }
                    }, mHour, mMinute, false);
            timePickerDialog.show();
        }
    }
}

In the above code we’ve created a Calendar object using Calendar.getInstance() to display the current date and time using the respective static fields.

Note: The display calendar and clock are the default UI themes as provided in the AppCompat Theme.

Below is the output produced by our android date time picker example application.

android date time picker example

This brings an end to android date time picker dialog example tutorial. You can download the final Android DateTimePickerDialog Project from the below link.

Comments

  1. Vonnie says:

    Very nice and helpful. Thanks

  2. Arjun Verma says:

    REALLY GOOD TUTORIAL !!!

  3. mocha says:

    Can Only Month And Year ?

  4. BubbleTae says:

    Awesome Work!
    I spend a sweet ton of time trying to implement something like this. Thank you for sharing!

  5. Narendra says:

    it’s not printing the AM ,PM after the time could you clarify me

  6. hazard_o7 says:

    please help me with datepicker i wanted to add two edittext with date picker as check in date and check out date

  7. Shaun Ritty says:

    how to enable only next 7 days date

    1. Chandeshwar says:

      By this way you can solve your problem.

      set minimum current date like this
      mPickerDialog.getDatePicker().setMinDate(System.currentTimeMillis());

      After that convert 7 days into Milliseconds like 7 Days =604800000 Milliseconds
      mPickerDialog.getDatePicker().setMaxDate(System.currentTimeMillis() +604800000);

      It will enable only 7 days from current date

  8. buiminh15 says:

    DatePickerDialog datePickerDialog = new DatePickerDialog(this,
    new DatePickerDialog.OnDateSetListener() {

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

    txtDate.setText(dayOfMonth + “-” + (monthOfYear + 1) + “-” + year);

    }
    }, mYear, mMonth, mDay);

    ^^^ I don’t understand why in the onDateSet method, year, monthOfYear and dayOfMonth are integers but they can pass into setText method which shoud pass value as String type ?

    1. BubbleTae says:

      The code in setText() is concatenation of string and int values.

      txtDate.setText(dayOfMonth + “-” + (monthOfYear + 1) + “-” + year);

      ——— value of int dayOfMonth + “-” + value of the addition(value of int monthOfYear + 1) + “-” + value of year ———

      so if the date picked is 8th of April 2019 the resulting string will be
      “8-4-2019”

  9. Aniket kumar says:

    Thankyou
    I easily understad

  10. Aman says:

    Awesome Work Man. Thanks for such great tutorials.

  11. Иван Китаев says:

    Finally i find this!!!
    Thanks a lot

  12. sarath chandra damineni says:

    very very easily expalined .I read so many articles for this like android developers documentation but this is very very easy

    1. Anupam says:

      Glad this helped you Sarath.

  13. Ghufran says:

    Very Helpful. Thank you

  14. Ryan Kraetsch says:

    this is badly designed. the year needs to be set in a different field from the month or you have to tap on the screen for 10-15 minutes to go back to the average DOB.

    1. LAKSHMAN says:

      You can directly click on the year and choose your required year . simple as that.

  15. Abhijeet says:

    Great Help Anupam 🙂

  16. bhati manish says:

    Thanx It Helped me

  17. gaurav Meghanahthi says:

    is there is a way to open datepicker dialog as a yearlist view first then month then day

  18. Sanjay says:

    Awesome !

  19. Pkvarnwal says:

    Very helpfull

  20. sachin says:

    i want to know how to use start date to end date date picker in android fragment and condition is that end date date picker should be greater than start date datepicker can anybody help me

  21. BHAWANI SINGH says:

    TimePickerDailog.show();
    DatePickerDailog.show();
    Both are showing error …??

  22. Natraj says:

    I want to set the am and pm in the Timepicker field. can you please let me know how to set it.

    1. Hariharan says:

      Change your OnClickListener like below 😉

      btnTimePicker.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {

      // Get Current Time
      final Calendar c = Calendar.getInstance();
      mHour = c.get(Calendar.HOUR_OF_DAY);
      mMinute = c.get(Calendar.MINUTE);

      // Launch Time Picker Dialog
      TimePickerDialog timePickerDialog = new TimePickerDialog(Main.this,new TimePickerDialog.OnTimeSetListener() {

      @Override
      public void onTimeSet(TimePicker view, int hourOfDay,int minute) {

      private String format = “”;

      if (hourOfDay == 0) {
      hourOfDay += 12;
      format = “AM”;
      } else if (hourOfDay == 12) {
      format = “PM”;
      } else if (hourOfDay > 12) {
      hourOfDay -= 12;
      format = “PM”;
      } else {
      format = “AM”;
      }

      txtTime.setText(hourOfDay + “:” + minute + format);

      }
      }, mHour, mMinute, false);
      timePickerDialog.show();

      }
      });

  23. rajender says:

    thanks so much realy 2 nice work.

    1. Anupam says:

      Thanks, Rajender.

  24. nehal says:

    datePickerDialog.show(); showing error..please help

  25. p says:

    Hey, Thank You! Its really helpful. saved my time.

  26. swathi says:

    hi i got error at c.get() method as “Call requires API level 24 (current min is 15)”

    1. BLYA SUKA IDI SUDA says:

      Just clean ur project or rebuild

  27. vamsi says:

    Hi, I have created a date picker dialog and passed a custom year,date,day (ex, I have passed Feb, 2nd, 2016) .It shows me Feb 2nd is highlighted in all years. How can I avoid that and show Feb 2nd selected only in 2016.

  28. Joy says:

    To allow only the days to come to be clickable and making previous days unclickable..!!how to do that in this?

    1. Anupam says:

      Hi,
      To display previous dates, add this line of code:

      datePickerDialog.getDatePicker().setMinDate(System.currentTimeMillis() – 1000);

      Thanks

  29. Monali Khairnar says:

    How to display the time in 24 hours? Currently it is showing 12 hours format and i want 24 hours format..

    1. Anupam says:

      Hi,
      Change the last parameter is24hourView from false to true as shown below.

      TimePickerDialog timePickerDialog = new TimePickerDialog(this,
      new TimePickerDialog.OnTimeSetListener() {

      @Override
      public void onTimeSet(TimePicker view, int hourOfDay,
      int minute) {

      txtTime.setText(hourOfDay + “:” + minute);
      }
      }, mHour, mMinute, true);

      Thanks

  30. dan says:

    how to convert month from int to name? (eg. 1 -> january, 2 -> february), any idea from adding if else ?, great tutorial btw, works perfectly on me

    1. Anupam says:

      Hi dan,
      Use enums.

      Thanks

  31. Shai says:

    Thanks for so easy and very useful tutorial!

  32. gaurav says:

    how to disable past date and time ??

    1. saiumesh says:

      datePickerDialog.getDatePicker().setMinDate(System.currentTimeMillis() – 1000);

  33. Matheus Soares says:

    Thank you very much!! Easier than the all examples i found.

  34. PeterOla says:

    Thanks for this.
    Works perfect

    1. Suman Mondal says:

      timePickerDialog.show(); showing error..please help

  35. kholio says:

    Hi,
    I have copied these codes in my android project. the layout is correctly displayed but when I copy the java file It dosen’t work

  36. Mario German says:

    Hi Anupam: Good Tutorial, I have the following question, I have an application where I want me to be the administrator of the calendar in which users enter and to request an appointment, but only I can accept and you get a message to users if it was or not accepted the appointment. I appreciate all your help and support.

  37. Frederik Skytte says:

    A much simpler soultion than Googles examples with FragmentDialogs. Thanks!

  38. Araz says:

    F*****g thank you! been googling for 3 hours and every other tutorial was either deprecated or vague and complex. this one i did it 5 mins and it worked perfectly.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages