×
×

Spread the love

Android date time picker are used to select date and time in many android applications.In this tutorial we will see how to implement date picker and time picker to select date and time in android studio.

Android system provides DatePickerDialog and TimePickerDialog classes that are pre built in android os itself.We can use these classes and implement the date picker dialog and time picker dialog in our application.

Check this android UI controls tutorial to know more about UI controls.

Android Date Picker Dialog

Date picker code in XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:padding="20dp"
    android:background="#ffffff"
    android:id="@+id/main">

    <DatePicker
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Output:

android date time picker example

By default the date picker style is calendar.We can change the date picker style to spinner by setting datePickerMode attribute to Spinner.Lets see the code.

<DatePicker
        android:id="@+id/date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:datePickerMode="spinner"
        android:calendarViewShown="false"/>

Output:

android date time picker example

To display a date picker dialog programatically we will use inbuilt DatePickerDialog class provided by android.This class has a constructor with 5 arguments.Lets see them

1.Context: Context of the current activity
2.Callback Function: OnDateSet() callback function which gets invoked when the user finished setting all the parameters date, month and year. This method returns the following 4 parameters
a. DatePicker object
b. Year selected by the user from the dialog.
c. Month selected by the user from the dialog.
d. Day selected by the user from the dialog.
3. Year: The year that is visible when the dialog pops up(we will set our desired year for this).
4. Month: The month that is visible when the dialog pops up(we will set our desired month for this).
5. Day: The day that is visible when the dialog pops up(we will set our desired day for this).

Android Time Picker Dialog

Time Picker Code in XML

<TimePicker android:id="@+id/time"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
android time picker clock style

By default the time picker style is clock.We can change the time picker style to spinner by setting timePickerMode to spinner.

<TimePicker
        android:id="@+id/time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:timePickerMode="spinner"/>
android time picker spinner style

We can change the time format of the time picker to 24 hours by setting setIs24HourView method to true.Lets see

TimePicker picker=(TimePicker)findViewById(R.id.time);
picker.setIs24HourView(true);
android time picker 24hour clock

If we observe the above output the clock is changed to 24 hour format after setting setIs24HourView to true.

To display a time picker dialog programatically we will use inbuilt TimePickerDialog class provided by android.This class has a constructor with 5 arguments.Lets see them.

1.Context: Context of the current activity.
2.Callback Function: OnTimeSet() callback function which gets invoked when the user finished setting hours and minutes. This method returns the following 3 parameters
a. TimePicker object.
b. Hours selected from the dialog by the user.
c. Minutes selected from the dialog by the user.
3. Hour: The hour that is visible when the dialog pops up(we will set our desired hour for this).
4. Minute: The minute that is visible when the dialog pops up(we will set our desired minute for this).
5. Clock Format: The format of the clock that is visible when the dialog pops up.If we set this value to true it displays 24 hour format clock else it will display 12 hour format.

Android Date Time Picker Example

Lets see an example where we display two buttons (select date, select time) and when the user clicks the buttons we display corresponding dialog and when the user selects the date or time we will display it in a textview.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:padding="20dp"
    android:background="#ffffff"
    android:id="@+id/main"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <Button
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="select date"
            android:background="@color/colorAccent"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:textSize="18sp"
            android:layout_margin="20dp"
            android:padding="10dp"/>

        <Button
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="select date"
            android:background="@color/colorAccent"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:textSize="18sp"
            android:layout_margin="20dp"
            android:padding="10dp"/>

    </LinearLayout>

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#000000"
        android:text="Date"
        android:gravity="center"
        android:layout_marginTop="40dp"/>

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#000000"
        android:text="Time"
        android:gravity="center"
        android:layout_marginTop="20dp"/>

</LinearLayout>

MainActivity.java

package com.codesinsider;

import androidx.appcompat.app.AppCompatActivity;
import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import java.util.Calendar;

public class MainActivity extends AppCompatActivity {
    private int year, month, day, hour, minute;
    TextView tv_date, tv_time;
    Button date, time;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv_date = findViewById(R.id.tv_date);
        tv_time = findViewById(R.id.tv_time);
        date = findViewById(R.id.date);
        time = findViewById(R.id.time);

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

                final Calendar c = Calendar.getInstance();
                year = c.get(Calendar.YEAR);
                month = c.get(Calendar.MONTH);
                day = c.get(Calendar.DAY_OF_MONTH);

        DatePickerDialog picker = new DatePickerDialog(MainActivity.this, new DatePickerDialog.OnDateSetListener() {

            @Override
            public void onDateSet(DatePicker datePicker, int year, int month, int day) {
                tv_date.setText(day+"/"+(month+1)+"/"+year);
            }
        }, year, month,day);
        picker.show();
            }
        });

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

                final Calendar c = Calendar.getInstance();
                hour = c.get(Calendar.HOUR_OF_DAY);
                minute = c.get(Calendar.MINUTE);

                TimePickerDialog timePickerDialog = new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener()
                {
                    @Override
                    public void onTimeSet(TimePicker timePicker, int hour, int min) {
                        tv_time.setText(hour+":"+min);
                    }
                },hour,minute,false);
                timePickerDialog.show();
            }
        });
    }
}

That’s all about android date time picker dialog with example.I hope you got better understanding about date picker and time picker with this tutorial.We will see other concepts in the next tutorials.

Do like and share if you find this post helpful.Thank you!!

Reference: Official Android Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.