Date Picker in Android using Jetpack Compose

In Android, a Date Picker is a widget used to select a date from the calendar. When a Date Picker is implemented in an application, the user can select a year, a month, and a day, combining to form date from a calendar-like-looking box. This data is generally needed and collected in applications that require a specific date to book a movie, travel, or hotel booking. Moreover, a Date Picker is also used in reminder or alarm-based applications. In this article, we will show you how you could implement a Date Picker in Android using Jetpack Compose.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Step 2: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

MainActivity.kt:

Kotlin

package com.geeksforgeeks.demo

import android.app.DatePickerDialog
import android.content.Context
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import java.util.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                // call composable
                DatePickerExample(LocalContext.current)
            }
        }
    }
}

// composable with a button
@Composable
fun DatePickerExample(context: Context) {
    // Initializing a Calendar
    val calendar = Calendar.getInstance()

    // Fetching current year, month and day
    val year = calendar.get(Calendar.YEAR)
    val month = calendar.get(Calendar.MONTH)
    val day = calendar.get(Calendar.DAY_OF_MONTH)

    calendar.time = Date()

    // Declaring a string value to store date in string format
    val date = remember { mutableStateOf("") }

    // Declaring DatePickerDialog and setting initial values as current values (present year, month and day)
    val datePicker = DatePickerDialog(
        context, { _, mYear, mMonth, mDayOfMonth ->
            date.value = "$mDayOfMonth-${mMonth + 1}-$mYear"
        }, year, month, day
    )

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Creating a button that onClick displays the DatePickerDialog
        Button(
            onClick = { datePicker.show() },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0XFF0F9D58))
        ) {
            Text(
                text = "Open Date Picker",
                color = Color.White
            )
        }

        // Adding a space of 100dp height
        Spacer(modifier = Modifier.size(20.dp))

        // Displaying the mDate value in the Text
        Text(
            text = "Selected Date: ${date.value}",
            fontSize = 16.sp,
            textAlign = TextAlign.Center
        )
    }
}

Output:

Create Quiz