Date Picker dialog in Jetpack

In Jetpack Compose, you can use the DatePicker component to allow users to select a date. However, Jetpack Compose does not provide a built-in DatePicker like in the traditional View-based system. Instead, you can use the MaterialDatePicker component from the Material Design Components library or create a custom date picker.

Here are a few ways to implement a date picker:

1. Using MaterialDatePicker from the Material Design Library

To use MaterialDatePicker, add the necessary dependency in your build.gradle file:

implementation 'com.google.android.material:material:<latest_version>'

Example: Simple DatePicker Dialog Using MaterialDatePicker

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.material3.DatePickerDialog
import com.google.android.material.datepicker.MaterialDatePicker
import com.google.android.material.datepicker.CalendarConstraints
import java.util.*

@Composable
fun DatePickerExample() {
    var selectedDate by remember { mutableStateOf<String?>(null) }
    val datePickerDialog = MaterialDatePicker.Builder.datePicker().build()

    // Date Picker Dialog open
    val openDatePicker = {
        datePickerDialog.addOnPositiveButtonClickListener {
            val date = Date(it) // Convert timestamp to Date object
            selectedDate = date.toString() // Display the selected date
        }
        datePickerDialog.show()
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = openDatePicker) {
            Text("Pick a Date")
        }

        Spacer(modifier = Modifier.height(16.dp))

        Text(
            text = selectedDate ?: "No date selected",
            style = MaterialTheme.typography.bodyLarge,
            color = Color.Black
        )
    }
}

2. Using a Custom Date Picker Dialog

You can also build a simple custom date picker using Jetpack Compose’s Dialog and a combination of TextField and DatePicker (for Android API 26 and above).

Example: Custom Date Picker using DatePickerDialog

import android.app.DatePickerDialog
import android.os.Bundle
import android.widget.DatePicker
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import java.util.*

@Composable
fun CustomDatePickerExample() {
    var showDialog by remember { mutableStateOf(false) }
    var selectedDate by remember { mutableStateOf("Select Date") }

    // Open DatePickerDialog when button clicked
    val openDatePicker = {
        val calendar = Calendar.getInstance()
        val datePickerDialog = DatePickerDialog(
            LocalContext.current,
            { _: DatePicker, year: Int, month: Int, dayOfMonth: Int ->
                selectedDate = "$dayOfMonth/${month + 1}/$year" // Format the selected date
            },
            calendar.get(Calendar.YEAR),
            calendar.get(Calendar.MONTH),
            calendar.get(Calendar.DAY_OF_MONTH)
        )
        datePickerDialog.show()
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = openDatePicker) {
            Text("Open Date Picker")
        }

        Spacer(modifier = Modifier.height(16.dp))

        Text(text = selectedDate, style = MaterialTheme.typography.bodyLarge)
    }
}

3. Date Picker Using Jetpack Compose’s Built-in Date Picker (Experimental)

Jetpack Compose includes an experimental DatePicker widget that can be used starting from Compose 1.3.0 and onwards, but it is not stable yet, and you need to enable experimental APIs for using it.

To use it, you’ll have to update your build.gradle file with the latest Jetpack Compose version and use DatePicker composable. Please check the latest official Compose documentation for any updates to this feature.

Key Features:

1. MaterialDatePicker:

• Provides a native, customizable date picker dialog.
• You can configure it to allow a range of dates, custom themes, and other features.

1. Custom Dialog with DatePickerDialog:

• Suitable for simpler use cases where you want to have a more tailored date picker.

1. State Management:

• Use state (remember and mutableStateOf) to manage the selected date.

1. Styling:

• Customize the button, text, and dialog styling using Jetpack Compose modifiers and themes.

These options give you flexibility in how you want to implement a date picker dialog in your Jetpack Compose-based app.