Tutorial

Android Date Time Picker Dialog

Published on August 3, 2022
author

Anupam Chugh

Android Date Time Picker Dialog

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
  1. int mYear : It shows the the current year that’s visible when the dialog pops up
  2. int mMonth : It shows the the current month that’s visible when the dialog pops up
  3. 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
  1. int mHours : It shows the the current Hour that’s visible when the dialog pops up
  2. int mMinute : It shows the the current minute that’s visible when the dialog pops up
  3. 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="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://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.

Download Android Date Time Picker Project

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Anupam Chugh

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
JournalDev
DigitalOcean Employee
DigitalOcean Employee badge
November 28, 2020

Thank you! I was looking at the so-called Clock UI. I hope you could fix the code that was wrap in lines. It’s a bit confusing to read.

- Mohsen

    JournalDev
    DigitalOcean Employee
    DigitalOcean Employee badge
    September 18, 2020

    Thank you for sharing this code. My project went smooth because of yours…

    - Anom Harya

      JournalDev
      DigitalOcean Employee
      DigitalOcean Employee badge
      August 4, 2020

      Thank you so much, date picker code fragment was helpful to me, i cant display a datepicker dialog in my dialog form, that code is very simple and understandable, so you are a genius.

      - Pedro Avellaneda

        JournalDev
        DigitalOcean Employee
        DigitalOcean Employee badge
        June 30, 2020

        great code is simple and understandable

        - nagaraj

          JournalDev
          DigitalOcean Employee
          DigitalOcean Employee badge
          June 30, 2020

          hello How can i set By default PM Option from AM PM Selection…

          - priyanka patel

            JournalDev
            DigitalOcean Employee
            DigitalOcean Employee badge
            June 17, 2020

            This tutorial is good thanks, but I have a little problem, when I click on the button my datapicker OK and CANCEL does not show for me to click on after I have picked the date. Please can any help me with that?

            - Henry

              JournalDev
              DigitalOcean Employee
              DigitalOcean Employee badge
              June 8, 2020

              when am changing time then time not changing in terminal but required when change the time then it should be change system time

              - aakib

                JournalDev
                DigitalOcean Employee
                DigitalOcean Employee badge
                March 30, 2020

                Amazing, super thanks!

                - Joseph Ali

                  JournalDev
                  DigitalOcean Employee
                  DigitalOcean Employee badge
                  February 29, 2020

                  Thank you SO MUCH, You R the best

                  - Amal

                    JournalDev
                    DigitalOcean Employee
                    DigitalOcean Employee badge
                    February 14, 2020

                    Hello can anyone help me where i would like to add two “Time Picker” in one activity not date only two time picker . This is my set onClickonListner Pickup.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { DialogFragment timePicker = new Timepicker(); timePicker.show(getSupportFragmentManager(), “Pickup Time”); } }); Dropoff.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { DialogFragment timePicker1 = new Timepicker(); timePicker1.show(getSupportFragmentManager(), “Drop off”); } }); and Display @Override public void onTimeSet(TimePicker view, int hourOfDay, int minute) { EditText Pickup = (EditText) findViewById(R.id.PUDT); Pickup.setText(hourOfDay + ": " + minute); }

                    - Karan Patel

                      Try DigitalOcean for free

                      Click below to sign up and get $200 of credit to try our products over 60 days!

                      Sign up

                      Join the Tech Talk
                      Success! Thank you! Please check your email for further details.

                      Please complete your information!

                      Become a contributor for community

                      Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

                      DigitalOcean Documentation

                      Full documentation for every DigitalOcean product.

                      Resources for startups and SMBs

                      The Wave has everything you need to know about building a business, from raising funding to marketing your product.

                      Get our newsletter

                      Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

                      New accounts only. By submitting your email you agree to our Privacy Policy

                      The developer cloud

                      Scale up as you grow — whether you're running one virtual machine or ten thousand.

                      Get started for free

                      Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

                      *This promotional offer applies to new accounts only.