Datepicker: How to popup datepicker when click on edittext

Question

I want to show datepicker popup window. I have found some examples but i am not getting it properly. I have one edittext and i want that when i click on edittext the datepicker dialog should popup and after setting the date, the date should show in edittext in dd/mm/yyyy format. PLease provide me sample code or good links.

Solution 1

Try this in the XML file:

<EditText
    android:id="@+id/Birthday"
    custom:font="@string/font_avenir_book"
    android:clickable="false" 
    android:cursorVisible="false" 
    android:focusable="false" 
    android:focusableInTouchMode="false"
    android:hint="@string/birthday"/>

And this in the Java File:

public class MainActivity extends AppCompatActivity {
    final Calendar myCalendar= Calendar.getInstance();
    EditText editText;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText=(EditText) findViewById(R.id.BirthDate);
        DatePickerDialog.OnDateSetListener date =new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker view, int year, int month, int day) {
                myCalendar.set(Calendar.YEAR, year);
                myCalendar.set(Calendar.MONTH,month);
                myCalendar.set(Calendar.DAY_OF_MONTH,day);
                updateLabel();
            }
        };
        editText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                new DatePickerDialog(MainActivity.this,date,myCalendar.get(Calendar.YEAR),myCalendar.get(Calendar.MONTH),myCalendar.get(Calendar.DAY_OF_MONTH)).show();
            }
        });
    }

    private void updateLabel(){
        String myFormat="MM/dd/yy";
        SimpleDateFormat dateFormat=new SimpleDateFormat(myFormat, Locale.US);
        editText.setText(dateFormat.format(myCalendar.getTime()));
    }
}

Add android:focusable="false" within the xml file of the EditText to allow for a single touch.

Solution 2

Couldn't get anyone of these working so will add my one just in-case it helps.

public class MyEditTextDatePicker  implements OnClickListener, OnDateSetListener {   
EditText _editText;
private int _day;
private int _month;
private int _birthYear;
private Context _context;

public MyEditTextDatePicker(Context context, int editTextViewID)
{       
    Activity act = (Activity)context;
    this._editText = (EditText)act.findViewById(editTextViewID);
    this._editText.setOnClickListener(this);
    this._context = context;
}

@Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    _birthYear = year;
    _month = monthOfYear;
    _day = dayOfMonth;
    updateDisplay();
}
@Override
public void onClick(View v) {
    Calendar calendar = Calendar.getInstance(TimeZone.getDefault());

    DatePickerDialog dialog = new DatePickerDialog(_context, this,
            calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH),
            calendar.get(Calendar.DAY_OF_MONTH));
    dialog.show();

}

// updates the date in the birth date EditText
private void updateDisplay() {

    _editText.setText(new StringBuilder()
    // Month is 0 based so add 1
    .append(_day).append("/").append(_month + 1).append("/").append(_birthYear).append(" "));
}
}

Also something that isn't mentioned in the others. Make sure you put the following on EditText xml.

android:focusable="false"

Otherwise like in my case the Keyboard will keep popping up. Hope this helps someone

Solution 3

class MyClass implements OnClickListener, OnDateSetListener {   
   EditText editText;
   this.editText = (EditText) findViewById(R.id.editText);
   this.editText.setOnClickListener(this);
   @Override
   public void onClick(View v) {

       DatePickerDialog dialog = new DatePickerDialog(this, this, 2013, 2, 18);
       dialog.show();
   }
   @Override
   public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
       // this.editText.setText();
   }
}

Solution 4

Here's a Kotlin extension function for the lazy folks:

fun EditText.transformIntoDatePicker(context: Context, format: String, maxDate: Date? = null) {
    isFocusableInTouchMode = false
    isClickable = true
    isFocusable = false

    val myCalendar = Calendar.getInstance()
    val datePickerOnDataSetListener =
        DatePickerDialog.OnDateSetListener { _, year, monthOfYear, dayOfMonth ->
            myCalendar.set(Calendar.YEAR, year)
            myCalendar.set(Calendar.MONTH, monthOfYear)
            myCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth)
            val sdf = SimpleDateFormat(format, Locale.UK)
            setText(sdf.format(myCalendar.time))
        }

    setOnClickListener {
        DatePickerDialog(
            context, datePickerOnDataSetListener, myCalendar
                .get(Calendar.YEAR), myCalendar.get(Calendar.MONTH),
            myCalendar.get(Calendar.DAY_OF_MONTH)
        ).run {
            maxDate?.time?.also { datePicker.maxDate = it }
            show()
        }
    }
}

Usage:

In Activity:

editText.transformIntoDatePicker(this, "MM/dd/yyyy")
editText.transformIntoDatePicker(this, "MM/dd/yyyy", Date())

In Fragments:

editText.transformIntoDatePicker(requireContext(), "MM/dd/yyyy")
editText.transformIntoDatePicker(requireContext(), "MM/dd/yyyy", Date())

Solution 5

There is another better reusable way as well:

Create a class:

class setDate implements OnFocusChangeListener, OnDateSetListener {   

       private EditText editText;
       private Calendar myCalendar;

       public setDate(EditText editText, Context ctx){
           this.editText = editText;
           this.editText.setOnFocusChangeListener(this);
           myCalendar = Calendar.getInstance();
       }

       @Override
       public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth)     {
           // this.editText.setText();

            String myFormat = "MMM dd, yyyy"; //In which you need put here
            SimpleDateFormat sdformat = new SimpleDateFormat(myFormat, Locale.US);
            myCalendar.set(Calendar.YEAR, year);
            myCalendar.set(Calendar.MONTH, monthOfYear);
            myCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);

            editText.setText(sdformat.format(myCalendar.getTime()));

       }

        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            // TODO Auto-generated method stub
            if(hasFocus){
             new DatePickerDialog(ctx, this, myCalendar
                       .get(Calendar.YEAR), myCalendar.get(Calendar.MONTH),
                       myCalendar.get(Calendar.DAY_OF_MONTH)).show();
            }
        }

    }

Then call this class under onCreate function:

    EditText editTextFromDate = (EditText) findViewById(R.id.editTextFromDate);
    setDate fromDate = new setDate(editTextFromDate, this);

View more solutions

Comments

[JEMSHID56]

Can You tell me what is that new_split.this?

[Android_coder]

@JEMSHID56 new_split.this means classname.this that is new_split is current class name

[Scalahansolo]

This did not work for me. :( I had errors I did not know how to get rid of with the updateLabel method.

[Scalahansolo]

Well I just copied the code above into my setupUI method, and the updateLabel() method has errors I dont know how to solve. Im sure this is because it is inside of my setup method. But when I move it outside of this method I am having run time issues.

[Scalahansolo]

EDIT: I solved this problem. Just had some scoping/declaration issues. This worked great!

[theblang]

This doesn't seem to work on the first click (which focuses the EditText).

[Daniel Jonker]

use editText.setOnFocusChangeListenerinstead, works on first click

[tread]

How should the class signature look: class setDate implements View.OnFocusChangeListener, DatePickerDialog.OnDateSetListener { ?

[Sumoanand]

class setDate implements View.OnFocusChangeListener, TimePickerDialog.OnDateSetListener

[souravlahoti]

Dont know why but my onDateSet method is not called once I change the date any help

[Karan]

Awesome!! An addition : Won't work for fragment views. For Fragments change constructor argument to the EditText object rather than resource ID..

[Prabs]

@DanielJonker editText.setOnFocusChangeListener is giving the calendar twice..I have 3 calendars in a page.when edittext is clicked it shows up the calendar on first click but it is again giving the previous calendar..

[Prabs]

I've solved this by using android:focusable="false" and onclicklistner

[GetSwifty]

This issue can also be fixed by this: editTextView.setFocusable(false);

[Kevin S. Miller]

I also needed android:focusable="false" and I had to declare and define the edttext inside updateLable(). Very Nice!

[erluxman]

Make that onDateSet is not called inside On Click rather it should be called when construting the callBack object which should be passed as second paremetre callBack = new DatePickerDialog.OnDateSetListener() { @Override public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) { Toast.makeText(getApplicationContext(),year+ " "+monthOfYear+" "+dayOfMonth,Toast.LENGTH_LONG).show(); } };

[Jason Williams]

Your solution worked for me using a Fragment. I simply changed "this" to "getContext()".

[Jason Williams]

Also, you need to set a private variable and set it from the constructor. "private Context ctx;".

[Jason Williams]

Also, I was having some issues releasing the keyboard. So, I added "v.clearFocus();" inside the onFocusChange handler.

[Leb]

@KevinMiller if you define the EditText right below the public class of the current activity not within the private onCreate() you are not required to redefine it.

[Kat]

Probably want to set android:longClickable="false" too. Otherwise the user can bring up the paste option on the field (and thus enter invalid dates).

[Glen Despaux Jr]

Be sure to use if(hasFocus) in setOnFocusChangeListener otherwise calendar will trigger multiple times

[erluxman]

I am not quite sure about it, may be there is another method you can override or you can concat

[erluxman]

Last option is initializing a calendar with obtained year,month,and day and getting the date in required format

[erluxman]

oh you can use a method private String get2DigitValue(int value){ return int>9?int+"":"0"+int}

[Gustavo]

@Prabs If you use android:focusable="false" when the user hits "next" in the keyboard when focusing a View before the date, the focus will jump directly to the one after the date. The best solution is to use both editText.setOnFocusChangeListener and editText.setOnClickListener and keep the EditText focusable. This way "next" is going to work and it's gonna popup in the first touch either.

[Prabs]

True @Gustavo Is there any other alternative to stop the calendar from opening twice?

[Gustavo]

@Prabs I put the DatePickerDialog in a variable and before calling .show() I checked .isShowing(). This way I always use the same dialog.

[vladko]

would be helpful to have some explanation about your answer along with the code sample.

[Shady Mohamed Sherif]

most be the answer worked perfet I also added if(_birthYear!=0) calendar.set(_birthYear,_month,_day); after Calendar calendar line to load last selected date when the user press again

[harshvardhan]

This is a useful solution. I would appreciate if you can tell the methods for (1) setting the date picker non-cancellable. (2) setting a title on the top of the date picker.

[ASN]

Is this working for anyone? I tried using this approach but the onClick method is not being called. But when I write traditional onClickListener in viewModel, then it is working.

[Adnen Chouibi]

using edittext.setOnFocusChangeListener instead onClickListner is better for many reason for exemple when you need to click next button on the keyboard

[Yusril Maulidan Raji]

android:editable is deprecated. I fixed this issue by adding android:cursorVisible="false", android:focusable="false" and android:focusableInTouchMode="false"

[Chris - Jr]

Date has had a shorthand version of the .set function since API Level 1. You can shorten within the function to myCalendar.set(year,monthOfYear,dayOfMonth);

[ThemBones]

I don't know how everybody favors that focusChangeApproach. It's going to spawn multiple date picker fragments overeach other if the picker is open during a configuration change. There must be sg. I'm missing.

[Drunken Daddy]

@moyo I do not find any issues on the last android version. Check if you have some other configuration set on your project that is causing it.

[Kishan Solanki]

Don't post deprecated answers.

[sf_admin]

This worked, but it is also setting the max date on the datepicker to the date(), how would you remove the maxdate?

[Drunken Daddy]

don't pass maxDate argument in function transformIntoDatePicker