datepicker
android
edittext
popup
user-interface

Datepicker How to popup datepicker when click on edittext

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Showing a date picker when the user taps an EditText is a common Android pattern, but the clean implementation is not really about the dialog. It is about treating the field as a date selector instead of a free-text input, so the keyboard does not fight the picker and the displayed value stays formatted consistently.

Basic DatePickerDialog Approach

The classic solution is to open a DatePickerDialog from the EditText click listener and then write the chosen date back into the field.

kotlin
1import android.app.DatePickerDialog
2import android.os.Bundle
3import android.widget.EditText
4import androidx.appcompat.app.AppCompatActivity
5import java.text.SimpleDateFormat
6import java.util.Calendar
7import java.util.Locale
8
9class MainActivity : AppCompatActivity() {
10    private val calendar = Calendar.getInstance()
11    private val formatter = SimpleDateFormat("yyyy-MM-dd", Locale.US)
12
13    override fun onCreate(savedInstanceState: Bundle?) {
14        super.onCreate(savedInstanceState)
15        setContentView(R.layout.activity_main)
16
17        val dateEditText = findViewById<EditText>(R.id.dateEditText)
18        dateEditText.showSoftInputOnFocus = false
19        dateEditText.isCursorVisible = false
20
21        dateEditText.setOnClickListener {
22            showDatePicker(dateEditText)
23        }
24    }
25
26    private fun showDatePicker(target: EditText) {
27        val year = calendar.get(Calendar.YEAR)
28        val month = calendar.get(Calendar.MONTH)
29        val day = calendar.get(Calendar.DAY_OF_MONTH)
30
31        val dialog = DatePickerDialog(this, { _, y, m, d ->
32            calendar.set(y, m, d)
33            target.setText(formatter.format(calendar.time))
34        }, year, month, day)
35
36        dialog.show()
37    }
38}

This is enough for many apps, and it keeps the user from typing invalid dates manually.

Make the EditText Behave Like a Picker Field

The biggest UI mistake is leaving the field fully editable. If tapping the field opens the dialog and the keyboard also appears, the screen feels broken.

Two common fixes are:

  • disable soft input with showSoftInputOnFocus = false
  • hide the cursor and rely on the picker for data entry

You can also make the field non-focusable and open the picker on click, but then you need to ensure accessibility and navigation still feel right. The general goal is clear: this field displays a date, but the date should come from the picker.

XML Layout Example

The layout is ordinary. The important part is assigning an ID and making the field visually communicate that it is a selector:

xml
1<EditText
2    android:id="@+id/dateEditText"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:hint="Select date"
6    android:focusable="true"
7    android:inputType="none" />

Some teams prefer TextInputEditText inside a Material TextInputLayout, but the click-handling idea stays the same.

Restricting the Allowed Date Range

If users should not pick dates in the past or beyond a business limit, configure the dialog before showing it:

kotlin
dialog.datePicker.minDate = System.currentTimeMillis()

You can also set maxDate in the same way. This is usually better than allowing every date and rejecting invalid ones afterward.

Consider MaterialDatePicker in Modern Apps

If your app already uses Material Components, MaterialDatePicker often provides a better modern UI than the older platform dialog. The principle is still the same: tap the field, show a picker, format the chosen value, and write it back into the visible text field.

The title here is about EditText, but the real design lesson is broader: date values are usually better chosen than typed.

Common Pitfalls

  • Opening the picker but still showing the soft keyboard.
  • Letting users type arbitrary date text and then trying to reconcile it with the picker.
  • Forgetting that Calendar.MONTH is zero-based in the Android APIs.
  • Hard-coding a date format that does not fit the app's locale or backend contract.
  • Validating forbidden dates only after selection instead of restricting the picker itself.

Summary

  • Open a DatePickerDialog from the EditText click event and write the result back into the field.
  • Treat the field as a selector, not as free-text input.
  • Disable the keyboard or cursor behavior so the UI feels intentional.
  • Use minDate and maxDate when business rules restrict valid dates.
  • In modern Material apps, consider MaterialDatePicker for a newer picker UI.

Course illustration
Course illustration

All Rights Reserved.