How to create a date and time picker in Android? [closed]
Asked Answered
O

15

147

Is there any android widget that enable to pick the date and the time at the same time ? I already use the basic time picker and date picker.

But they are not that sexy and user friendly (I found). Do you know if a widget including both date and time exists?

Thanks a lot, Luc

Onus answered 13/1, 2010 at 9:9 Comment(1)
There is a Github library for date and time picker: AndroidDateTimePicker.Archine
B
54

There is nothing built into Android that offers this.

EDIT: Andriod now offers built-in pickers. Check @Oded answer

Bebe answered 13/1, 2010 at 13:15 Comment(4)
I know this response is more than a year old, but I think this response should be updated. The DateSlider library referenced by Rabi all the way below seems to be perfect for this.Chintzy
I agree this answer should be updated because that's an awesome widget. However the code pointed to by Rabi is already a bit outdated and contains some deprecated methods e.g. showDialog. Perhaps something more current will come along soon.Jonme
Actually answer is correct and shouldn't be updated. Even if AndroidDateSlider exist, there is nothing built into Android that offers that feature.Slovene
Am I the only one baffled at the fact that Google doesn't even support one of the most widely used controls in any business applications out there?Sanderling
H
91

Put both DatePicker and TimePicker in a layout XML.

date_time_picker.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:padding="8dp"
    android:layout_height="match_parent">

    <DatePicker
        android:id="@+id/date_picker"
        android:layout_width="match_parent"
        android:calendarViewShown="true"
        android:spinnersShown="false"
        android:layout_weight="4"
        android:layout_height="0dp" />

    <TimePicker
        android:id="@+id/time_picker"
        android:layout_weight="4"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

    <Button
        android:id="@+id/date_time_set"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:text="Set"
        android:layout_height="0dp" />

</LinearLayout>

The code:

final View dialogView = View.inflate(activity, R.layout.date_time_picker, null);
final AlertDialog alertDialog = new AlertDialog.Builder(activity).create();

dialogView.findViewById(R.id.date_time_set).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

         DatePicker datePicker = (DatePicker) dialogView.findViewById(R.id.date_picker);
         TimePicker timePicker = (TimePicker) dialogView.findViewById(R.id.time_picker);

         Calendar calendar = new GregorianCalendar(datePicker.getYear(),
                            datePicker.getMonth(),
                            datePicker.getDayOfMonth(),
                            timePicker.getCurrentHour(),
                            timePicker.getCurrentMinute());

         time = calendar.getTimeInMillis();
         alertDialog.dismiss();
    }});
alertDialog.setView(dialogView);
alertDialog.show();
Hereto answered 25/3, 2014 at 6:11 Comment(8)
Brilliant example, thanks. One point... you probably want to have alertDialog.dismiss(); at the end of the onClick implementation.Delp
Can't pick year in this example.Reld
Just one problem...when using in android L the date and time picker do not fit on the screen..so i put the linearLayout in a scrollView ...Now the problem is that when i try to change the time the layout scrolls because of the scrollView..Any solution to thisHypergolic
please help , it is not fit in landscape mode, how to fix itBinoculars
@Binoculars , For landscape, you'll have to create another xml like: https://mcmap.net/q/153519/-android-alternate-layout-xml-for-landscape-modeHereto
it is working but when i switch from landscape mode to portrait or vice-versa it is not changing automaticallyBinoculars
Android 6.0+ this layout looks ugly ;( static.pychat.org/photo/f1qRFo31_Screenshot_20170214-123713.pngSolley
But they are overlapping each other, maybe if you used scrollview as a root layout it would be much betterTwohanded
C
82

Use this function it will enable you to pic date and time one by one then set it to global variable date. No library no XML.

Calendar date;
public void showDateTimePicker() {
   final Calendar currentDate = Calendar.getInstance();
   date = Calendar.getInstance();
   new DatePickerDialog(context, new DatePickerDialog.OnDateSetListener() {
       @Override
       public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
            date.set(year, monthOfYear, dayOfMonth);
            new TimePickerDialog(context, 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());
                }
            }, currentDate.get(Calendar.HOUR_OF_DAY), currentDate.get(Calendar.MINUTE), false).show();
       }
   }, currentDate.get(Calendar.YEAR), currentDate.get(Calendar.MONTH), currentDate.get(Calendar.DATE)).show();
}
Challenge answered 2/3, 2016 at 11:26 Comment(3)
One of the simplest wayNellenelli
Call requires API level 24.Praxis
How do I get the datePicker object? I want to disabled past dates.Pushy
B
54

There is nothing built into Android that offers this.

EDIT: Andriod now offers built-in pickers. Check @Oded answer

Bebe answered 13/1, 2010 at 13:15 Comment(4)
I know this response is more than a year old, but I think this response should be updated. The DateSlider library referenced by Rabi all the way below seems to be perfect for this.Chintzy
I agree this answer should be updated because that's an awesome widget. However the code pointed to by Rabi is already a bit outdated and contains some deprecated methods e.g. showDialog. Perhaps something more current will come along soon.Jonme
Actually answer is correct and shouldn't be updated. Even if AndroidDateSlider exist, there is nothing built into Android that offers that feature.Slovene
Am I the only one baffled at the fact that Google doesn't even support one of the most widely used controls in any business applications out there?Sanderling
P
29

combined DatePicker and TimePicker in DialogFragment for Android

I created a library to do this. It also has customizable colors!

It's very simple to use.

First you create a listener:

private SlideDateTimeListener listener = new SlideDateTimeListener() {

    @Override
    public void onDateTimeSet(Date date)
    {
        // Do something with the date. This Date object contains
        // the date and time that the user has selected.
    }

    @Override
    public void onDateTimeCancel()
    {
        // Overriding onDateTimeCancel() is optional.
    }
};

Then you create and show the dialog:

new SlideDateTimePicker.Builder(getSupportFragmentManager())
    .setListener(listener)
    .setInitialDate(new Date())
    .build()
    .show();

I hope you find it useful.

Plantaineater answered 3/2, 2015 at 5:11 Comment(12)
really good one ! saved my time ! thanks ! However, i had to clone the code, because i think gradle dependency string is not valid ?Tennison
@k2ibegin the git page of project says to import the whole module or "clone the code", thats the point, he didn't publish his awesome date-time-picker in any repository. JDJ nice work man, great lib.Harim
@Plantaineater sorry, but i haven't been able to add your library to my project, could you explain how ?Deuteron
@Kuriel How can i add the library ?Deuteron
Step 1 download the whole project by clicking "Clone or download" and then "download ZIP" Step 2 extract zip content, or just the ZIP\SlideDateTimePicker-master\ slideDateTimePicker folder and copy that folder to your root folder container of your existing project where you want to add the plugin. Step 3 add the Dependency via Gradle with compile project(':slideDateTimePicker') OR with Android Studio: File > New > Import Project and select the extracted folder and configure project import normally accept and next and finish.Harim
@Plantaineater we have a bug, on Lollipop or Marshmallow the native DatePicker and TimePicker is not shown, instead shows the pre-lollipop components.Harim
@JDC I tried lots of things but could not change theme. How can we implement Material Design?Sedate
Error:(30, 0) Project with path ':slideDateTimePicker' could not be found in project ':app'. <a href="openFile:/Users/ruchirbaronia/AndroidStudioProjects/FeatureFive/app/build.gradle">Open File</a>Barberabarberry
For adding the library manually, I found that settings.gradle needs to be updated with a reference to the lib, like so: include ':app', .. ':slideDateTimePicker' .. thanks to details in "Method 1" here : github.com/MagicMicky/FreemiumLibrary/wiki/…Minus
Please note I believe this library no longer works, and has been abandoned. github.com/jjobes/SlideDateTimePicker/issues/59Neese
How do you customize the color of horizontal date and time divider? When you use the setIndicatorColor(), it only changes the color header, not date/time dividerVillalpando
The original project has been forked and updated: github.com/yulmaso/SlideDateTimePickerFusillade
D
21

Call the time picker dialog in the DatePicker update time method. It'll not be called at the same time but when you press DatePicker set button. The time picker dialog will open. The method is given below.

package com.android.date;

import java.util.Calendar;

import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.TimePicker;

public class datepicker extends Activity {

    private TextView mDateDisplay;
    private Button mPickDate;
    private int mYear;
    private int mMonth;
    private int mDay;
    private TextView mTimeDisplay;
    private Button mPickTime;

    private int mhour;
    private int mminute;

    static final int TIME_DIALOG_ID = 1;

    static final int DATE_DIALOG_ID = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mDateDisplay =(TextView)findViewById(R.id.date);
        mPickDate =(Button)findViewById(R.id.datepicker);
        mTimeDisplay = (TextView) findViewById(R.id.time);
        mPickTime = (Button) findViewById(R.id.timepicker);

        //Pick time's click event listener
        mPickTime.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View v) {
                showDialog(TIME_DIALOG_ID);
            }
        });

        //PickDate's click event listener 
        mPickDate.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                showDialog(DATE_DIALOG_ID);
            }
        });

        final Calendar c = Calendar.getInstance();
        mYear = c.get(Calendar.YEAR);
        mMonth = c.get(Calendar.MONTH);
        mDay = c.get(Calendar.DAY_OF_MONTH);
        mhour = c.get(Calendar.HOUR_OF_DAY);
        mminute = c.get(Calendar.MINUTE);
    }

    //-------------------------------------------update date---//    
    private void updateDate() {
        mDateDisplay.setText(
            new StringBuilder()
                    // Month is 0 based so add 1
                    .append(mDay).append("/")
                    .append(mMonth + 1).append("/")
                    .append(mYear).append(" "));
        showDialog(TIME_DIALOG_ID);
    }

      //-------------------------------------------update time---//    
    public void updatetime() {
        mTimeDisplay.setText(
                new StringBuilder()
                        .append(pad(mhour)).append(":")
                        .append(pad(mminute))); 
    }

    private static String pad(int c) {
        if (c >= 10)
            return String.valueOf(c);
        else
            return "0" + String.valueOf(c);


    //Datepicker dialog generation  

    private DatePickerDialog.OnDateSetListener mDateSetListener =
        new DatePickerDialog.OnDateSetListener() {

            public void onDateSet(DatePicker view, int year, 
                                  int monthOfYear, int dayOfMonth) {
                mYear = year;
                mMonth = monthOfYear;
                mDay = dayOfMonth;
                updateDate();
            }
        };


     // Timepicker dialog generation
        private TimePickerDialog.OnTimeSetListener mTimeSetListener =
            new TimePickerDialog.OnTimeSetListener() {
                public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                    mhour = hourOfDay;
                    mminute = minute;
                    updatetime();
                }
            };

        @Override
        protected Dialog onCreateDialog(int id) {
            switch (id) {
            case DATE_DIALOG_ID:
                return new DatePickerDialog(this,
                            mDateSetListener,
                            mYear, mMonth, mDay);

            case TIME_DIALOG_ID:
                return new TimePickerDialog(this,
                        mTimeSetListener, mhour, mminute, false);

            }
            return null;
        }
}

the main.xml is given below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView  
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/hello"/>

    <TextView android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

    <Button
        android:id="@+id/timepicker"
        android:text="Change Time" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"/>

    <TextView 
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

    <Button android:id="@+id/datepicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="200dp"
        android:text="Change the date"/>

</LinearLayout>
Decrepitude answered 11/3, 2011 at 4:24 Comment(0)
A
15

I also wanted to combine a DatePicker and a TimePicker. So I create an API to handle both in one interface! :)

https://github.com/Kunzisoft/Android-SwitchDateTimePicker

enter image description here

You can also use SublimePicker

Amar answered 13/1, 2017 at 23:45 Comment(1)
Very nice elegant solution. Works great. A few small details I ran into .. 1) The AM/PM label was getting truncated, so I had to set a smaller font size in style: <item name="android:textSize">11sp</item> and remove the bold setting. 2) looks like setDefaultDateTime(..) must be called or you get a runtime exception .. so I call that with just Calendar.getInstance().getTime() as the parameter. Best github project for a date picker I have seen so far - thanks for sharing itMinus
I
13

The URLs you link to show how to pop up a dialog with a time picker and another dialog with a date picker. However you need to be aware that you can use those UI widgets directly in your own layout. You could build your own dialog that includes both a TimePicker and DatePicker in the same view, thus accomplishing what I think you are looking for.

In other words, instead of using TimePickerDialog and DatePickerDialog, just use the UI widgets TimePicker and DatePicker directly in your own dialog or activity.

Illdisposed answered 13/1, 2010 at 14:46 Comment(1)
I agree @Jaydeep Khamar's solution is not what is asked for, those are opening two separate dialogs. It would be better to see basic sample code where this is already combined.Jonme
S
9

I was facing the same problem in one of my projects and have decided to make a custom widget that has both the date and the time picker in one user-friendly dialog. You can get the source code along with an example at http://code.google.com/p/datetimepicker/. The code is licensed under Apache 2.0.

Spinner answered 13/1, 2010 at 9:9 Comment(0)
S
6

I forked, updated, refactored and mavenized the android-dateslider project. It is on Github now:

https://github.com/casidiablo/date-slider

Slovene answered 16/6, 2012 at 22:12 Comment(1)
do you have an example on how to use this?Photochemistry
H
5

You can use one of DatePicker library wdullaer/MaterialDateTimePicker

  • First show DatePicker.

    private void showDatePicker() {
    Calendar now = Calendar.getInstance();
    DatePickerDialog dpd = DatePickerDialog.newInstance(
            HomeActivity.this,
            now.get(Calendar.YEAR),
            now.get(Calendar.MONTH),
            now.get(Calendar.DAY_OF_MONTH)
    );
    dpd.show(getFragmentManager(), "Choose Date:");
    }
    
  • Then onDateSet callback store date & show TimePicker

    @Override
    public void onDateSet(DatePickerDialog view, int year, int monthOfYear, int dayOfMonth) {
    Calendar cal = Calendar.getInstance();
    cal.set(year, monthOfYear, dayOfMonth);
    filter.setDate(cal.getTime());
    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            showTimePicker();
        }
    },500);
    }
    
  • On onTimeSet callback store time

     @Override
     public void onTimeSet(RadialPickerLayout view, int hourOfDay, int minute) {
    Calendar cal = Calendar.getInstance();
    if(filter.getDate()!=null)
        cal.setTime(filter.getDate());
    cal.set(Calendar.HOUR_OF_DAY,hourOfDay);
    cal.set(Calendar.MINUTE,minute);
    }
    
Hairless answered 26/10, 2015 at 23:41 Comment(0)
P
4

enter image description here

May be this tutorial link will help http://custom-android-dn.blogspot.com/2013/03/how-to-create-custom-date-time-picker.html

Poseur answered 28/3, 2013 at 16:26 Comment(0)
D
3

I wrote up a little widget that allows you to pick both date and time.

DateTimeWidget

enter image description here

Diarrhoea answered 24/2, 2018 at 21:12 Comment(1)
Hello. Sorry for the necro post, but is it possible to import your widget into my .xml layout file?Antitrust
D
2

Another option is the android-wheel project that comes pretty close the the UIDatePicker dialog of iOS.

It provides a vertical slider to pick anything(including date and time). If you prefer horizontal slider, the DateSlider referenced by Rabi is better.

Dewees answered 2/2, 2012 at 4:8 Comment(1)
Broken link. Here's a fork of android-wheel.Stepdaughter
C
1

I have create a alert dialog which combine Date picker and Time picker. You can get code at https://github.com/nguyentoantuit/android Note: DateTimePicker is a library

Coriolanus answered 12/12, 2013 at 15:11 Comment(1)
Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.Rydder
P
1

Here is a more compact version of Jaydeep's idea of showing one dialog after the other. I like this solution because it has no dependencies.

        Date value = new Date();
        final Calendar cal = Calendar.getInstance();
        cal.setTime(value);
        new DatePickerDialog(this,
            new DatePickerDialog.OnDateSetListener() {
                @Override public void onDateSet(DatePicker view, 
                        int y, int m, int d) {
                    cal.set(Calendar.YEAR, y);
                    cal.set(Calendar.MONTH, m);
                    cal.set(Calendar.DAY_OF_MONTH, d);

                    // now show the time picker
                    new TimePickerDialog(NoteEditor.this,
                        new TimePickerDialog.OnTimeSetListener() {
                            @Override public void onTimeSet(TimePicker view, 
                                    int h, int min) {
                                cal.set(Calendar.HOUR_OF_DAY, h);
                                cal.set(Calendar.MINUTE, min);
                                value = cal.getTime();
                            }
                        }, cal.get(Calendar.HOUR_OF_DAY), 
                            cal.get(Calendar.MINUTE), true).show();
                 }
            }, cal.get(Calendar.YEAR), cal.get(Calendar.MONTH),
            cal.get(Calendar.DAY_OF_MONTH)).show();
Photochemistry answered 6/3, 2014 at 7:11 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.