DatePicker in Kotlin

The Android DatePicker is a user interface component that allows users to select a date, including the day, month, and year. This control helps ensure that users select valid dates in an application. DatePicker offers two display modes:

1. Calendar View: Displays a complete calendar for date selection.
2. Spinner View: Displays selectable values for day, month, and year in a scrollable spinner format.

You can implement DatePicker in two ways:

1. XML Layout: Define the DatePicker control directly in the layout file.
2. Programmatically: Dynamically create and configure the DatePicker in an activity file.

This flexibility makes DatePicker a versatile and user-friendly solution for date input in Android applications.

Important attributes of DatePicker

Steps of Implementing DatePicker

Step 1: Create a new project in Android Studio

Below are the steps to be followed:

1. Click on File, then New => New Project.
2. After that include the Kotlin support and click on next.
3. Select the minimum SDK as per convenience and click next button.
4. Then select the Empty activity => next => finish.

Step 2: Adding DatePicker widget in Layout file

We can use android:datePickerMode to choose which the mode for the DatePicker. The possible values are “calendar” and “spinner”. This article demonstrate how to implement both type of modes.

activity_main.xml:

<androidx.constraintlayout.widget.ConstraintLayout 
    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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:datePickerMode="calendar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout 
    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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".MainActivity">

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="false"
        android:datePickerMode="spinner"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Design UI:

Step 3: Access the DatePicker in MainActivity.kt file

First of all, we declare a variable datePicker to access the DatePicker widget from the XML layout. 

val datePicker: DatePicker = findViewById(R.id.datePicker)

then, we declare another variable today to get the current get like this. 

datePicker.init(
    today.get(Calendar.YEAR),
    today.get(Calendar.MONTH),
    today.get(Calendar.DAY_OF_MONTH)
)

To display the selected date from the calendar we will use 

{ view, year, month, day ->
    val msg = "You Selected: $day/${month+1}/$year"
    Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
}

We are familiar with further activities in previous articles like accessing button and set OnClickListener etc.

MainActivity.kt:

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.DatePicker
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import java.util.Calendar

class MainActivity : AppCompatActivity() {

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

        val datePicker: DatePicker = findViewById(R.id.datePicker)
        val today = Calendar.getInstance()
        datePicker.init(
            today.get(Calendar.YEAR),
            today.get(Calendar.MONTH),
            today.get(Calendar.DAY_OF_MONTH)
        ) { view, year, month, day ->
            val msg = "You Selected: $day/${month+1}/$year"
            Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
        }
    }
}

Output: