Datepicker Example

While as programmers we can easily obtain dates and time using the Calender class or methods available at java.util.package, our users can't. We have to provide them with a datetimepicker widget which they can use to pick dates or time.

In this tutorial we will look at examples of how to use datetimepicker to choose date and time. These are beginner examples and self explanatory.

Example 1: Pick Date using DatePickerDialog

This is a simple example written in Kotlin which will show you how to easily pick dates via a simple dialog. We do not use any third party library.

We will create an app whereby when a button is clicked, a DatePickerDialog is shown. When the user chooses the date, the chosesn date is shown in the TextView.

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No external dependency is needed for this project.

Step 3: Design Layout

Simply add a TextView and a Button in your MainActivity layout:

<?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"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/dateTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Date"
        android:textSize="20sp"
        android:textColor="@android:color/black"/>

    <Button
        android:id="@+id/pickerDateBtn"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pick Date"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"/>

</LinearLayout>

Step : Write Code

You start by instantiating the Calender class using the `` function:

        val cal = Calendar.getInstance()

Then obtain the year, month and day as follows:

        val year = cal.get(Calendar.YEAR)
        val month = cal.get(Calendar.MONTH)
        val day = cal.get(Calendar.DAY_OF_MONTH)

Here is how you show a DatePickerDialog when a button is clicked:

        pickerDateBtn.setOnClickListener {
            val datePickerDialog = DatePickerDialog(this, DatePickerDialog.OnDateSetListener { view, myear, mmonth, mdayOfMonth ->
                dateTv.setText(""+ mdayOfMonth +"/"+ mmonth +"/"+ myear)
            }, year, month, day)
            datePickerDialog.show()
        }

Here is the full code:

MainActivity.kt

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

class MainActivity : AppCompatActivity() {

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

        val cal = Calendar.getInstance()
        val year = cal.get(Calendar.YEAR)
        val month = cal.get(Calendar.MONTH)
        val day = cal.get(Calendar.DAY_OF_MONTH)

        pickerDateBtn.setOnClickListener {
            val datePickerDialog = DatePickerDialog(this, DatePickerDialog.OnDateSetListener { view, myear, mmonth, mdayOfMonth ->
                dateTv.setText(""+ mdayOfMonth +"/"+ mmonth +"/"+ myear)
            }, year, month, day)
            datePickerDialog.show()
        }
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author
3.	Code: Apache 2.0 License

Example 2: Kotlin Android DatePicker Example

This example utilizes the standard SDK datepicker. You pick date and it gets show in a textview.

Demo

Here is the demo of the project created:

Step 1: Dependencies

No special dependencies are needed for this project.

Step 2: Create Layout

You now need to add the DatePicker in your xml layout. Additionally add a textiew which will show the selected date:

<?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:orientation="vertical">

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="show"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="#101010"/>

</LinearLayout>

Step 3: Write Kotlin Code

Basically when a button is clicked you get the selected date in the datepicker and show it in both a textview and toast message:

MainActivity.kt

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.provider.ContactsContract
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    @SuppressLint("SetTextI18n")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btn.setOnClickListener {
            Toast.makeText(this,"${datePicker.year} / ${datePicker.month} / ${datePicker.dayOfMonth}",Toast.LENGTH_LONG).show()
            tv.text = "${datePicker.year} / ${datePicker.month} / ${datePicker.dayOfMonth}"
        }
    }
}

Run

Run the project.

Reference

Download the project below:

No.	Link
1.	Download Code
2.	Browse Code
3.	Follow Code author