Android Date Picker Kotlin Tutorial

Android Date Picker is one of the important components of Android development. If you need something like selecting a date to input, so you’re gonna need a Date Picker dialog. In this post, you’ll also learn about using a Calendar instance from Android that is needed for the DatePickerDialog class.

What the app will look like?

The app will look like this after you finish this tutorial:

So we’re gonna learn to create two types of date picker here. The first one on the left picture is a Material calendar type and the other is a spinner type date picker. My purpose here is to give you the preferences of calendar types, depending on what you want to use on your app.

What will you learn?

• Creating a simple Android Date Picker app extending DatePickerDialog class using Kotlin.
• Learn about how to use Calendar instance

Note: In this post, I used Android Studio 3.5.3, make sure you use the latest Android Studio, or if you already install it, be sure to check the latest update. The Kotlin version that I used is Kotlin 1.3.61.

Getting started on your Android date picker

Open your Android Studio and choose to Start a new Android Studio Project. Then set the Application Name SimpleDatePicker and select Kotlin as the language. Give the Activity Name MainActivity and wait until the Android Studio finishes preparing your project.

Open activity_main.xml inside res/layout directory and replace the code given below:

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

   <TextView
       android:id="@+id/tvDate"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginRight="20dp"
       android:textSize="18sp"
       android:textColor="#000"
       android:text="00-00-0000" />

   <Button
       android:id="@+id/btSelectDate"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Select Date"/>

</LinearLayout>

When you run your app it will display like the picture below:

Create a new Kotlin class named DatePickerHelper.kt beside MainActivity.kt here:

After that, write this code given below inside DatePickerHelper.kt:

package com.thesimplycoder.simpledatepicker

import android.app.DatePickerDialog
import android.app.DatePickerDialog.OnDateSetListener
import android.content.Context
import java.util.*

class DatePickerHelper(context: Context, isSpinnerType: Boolean = false) {

   private var dialog: DatePickerDialog
   private var callback: Callback? = null

   private val listener = OnDateSetListener { datePicker, year, monthOfYear, dayOfMonth ->
       callback?.onDateSelected(dayOfMonth, monthOfYear, year)
   }

   init {
       val style = if (isSpinnerType) R.style.SpinnerDatePickerDialog else 0

       val cal = Calendar.getInstance()

       dialog = DatePickerDialog(context, style, listener,
           cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DAY_OF_MONTH))
   }

   fun showDialog(dayofMonth: Int, month: Int, year: Int, callback: Callback?) {
       this.callback = callback
       dialog.datePicker.init(year, month, dayofMonth, null)
       dialog.show()
   }

   fun setMinDate(minDate: Long) {
       dialog.datePicker.minDate = minDate
   }

   fun setMaxDate(maxDate: Long) {
       dialog.datePicker.maxDate = maxDate
   }

   interface Callback {
       fun onDateSelected(dayofMonth: Int, month: Int, year: Int)
   }
}

This class has some functions to simplify our works like:

• showDialog() function is for showing the picker dialog.
• onDateSelected() callback function will be triggered after a user selects a specific date from the dialog.
• isSpinnerType parameter is my custom parameter for this class to give it condition whether you want to use Spinner type picker or material calendar picker.
• setMinDate() and seMaxDate() are for giving a boundary of date which can be selected.

Open file styles.xml inside res/values directory. The XML code is given below:

<resources>

   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
   </style>

   <style name="SpinnerDatePickerDialog" parent="@android:style/Theme.Holo.Light.Dialog">
       <item name="android:windowIsTranslucent">true</item>
       <item name="android:windowBackground">@android:color/transparent</item>
       <item name="android:windowContentOverlay">@null</item>
       <item name="android:windowNoTitle">true</item>
       <item name="android:windowIsFloating">true</item>
       <item name="android:backgroundDimEnabled">true</item>
       <item name="android:calendarViewShown">false</item>
       <item name="android:datePickerMode">spinner</item>
   </style>

</resources>

The spinner type android date picker must use a custom style like the code above for the easiest way while the material type doesn’t need a specific custom style.

For the last thing, open MainActivity.kt file and put this code given below:

package com.thesimplycoder.simpledatepicker

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import java.util.*

class MainActivity : AppCompatActivity() {

   lateinit var datePicker: DatePickerHelper

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       datePicker = DatePickerHelper(this)

       btSelectDate.setOnClickListener {
           showDatePickerDialog()
       }
   }

   private fun showDatePickerDialog() {
       val cal = Calendar.getInstance()
       val d = cal.get(Calendar.DAY_OF_MONTH)
       val m = cal.get(Calendar.MONTH)
       val y = cal.get(Calendar.YEAR)

       datePicker.showDialog(d, m, y, object : DatePickerHelper.Callback {

           override fun onDateSelected(dayofMonth: Int, month: Int, year: Int) {
               val dayStr = if (dayofMonth < 10) "0${dayofMonth}" else "${dayofMonth}"

               val mon = month + 1
               val monthStr = if (mon < 10) "0${mon}" else "${mon}"

               tvDate.text = "${dayStr}-${monthStr}-${year}"
           }
       })
   }
}

Simple right? Try to run your app and select the date by pressing the “Select Date” button.

If you want to change it to a Spinner type, just add additional parameter on DatePickerHelper like this:

datePicker = DatePickerHelper(this, true)

The calendar will display as a spinner type like this:

Setting a minimum and maximum date on your Android date picker

As I already mentioned before, if you want to give the picker a boundary, just simply add this code inside showDatePickerDialog() function like this:

private fun showDatePickerDialog() {
   ...

   val minDate = Calendar.getInstance()
   minDate.set(Calendar.HOUR_OF_DAY, 0)
   minDate.set(Calendar.MINUTE, 0)
   minDate.set(Calendar.SECOND, 0)
   datePicker.setMinDate(minDate.timeInMillis)

   val maxDate = Calendar.getInstance()
   maxDate.add(Calendar.DAY_OF_MONTH, 7)
   datePicker.setMaxDate(maxDate.timeInMillis)

   ...
}

For example, here I set the minimum date is today at zero o’clock and max date to seven days from today. The result will be like this:

Where to go next?

You can download this full code here. Be sure to check my other post here about creating a simple Time Picker application and how to create a custom navigation drawer application. I hope you like my post, comment and share it with love!