In today’s tutorial, we will learn how to integrate DatePicker in Kotlin Compose Multiplatform (KMP/KMM) for both Android and iOS platforms, specifically for native use. In this guide, we will integrate Android’s native Material DatePicker and iOS native UIDatePicker using expect/actual functions.

DatePicker in Kotlin Compose Multiplatform KMP KMM

In a mobile application, DatePicker is an essential UI component that allows users to select any date in the easiest possible way. In Compose Multiplatform, we can easily use platform-specific code, which will enable us to integrate platform-specific UI components. If your app opens on an Android device, it will invoke the native Android component. If your app begins on iOS, it will interact with the native iOS component. But after selecting any data from that component, it syncs that data into the Compose Multiplaform application. We will learn step by step how to implement a DatePicker in Kotlin Compose Multiplatform (KMP/KMM).

Start coding for the app:

1. Android Specific DatePicker Implementation:

1. Open your project’s
APP -> composeApp -> src -> androidMain -> kotlin -> packageName -> MainActivity.kt file.

2. Implement pickDate() method in this file.

// Android-specific implementation
actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) {
    if (context !is Context) return

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

    // Android-specific DatePickerDialog
    DatePickerDialog(
        context,
        { _, selectedYear, selectedMonth, selectedDay ->
            val date = "$selectedDay/${selectedMonth + 1}/$selectedYear"
            onDatePicked(date)
        },
        year,
        month,
        day
    ).show()
}

// Android-specific implementation

actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) {

if (context !is Context) return

val calendar = Calendar.getInstance()

val year = calendar.get(Calendar.YEAR)

val month = calendar.get(Calendar.MONTH)

val day = calendar.get(Calendar.DAY_OF_MONTH)

// Android-specific DatePickerDialog

DatePickerDialog(

context,

{ _, selectedYear, selectedMonth, selectedDay ->

val date = "$selectedDay/${selectedMonth + 1}/$selectedYear"

onDatePicked(date)

year,

month,

day

).show()

}

Code explanation:

pickDateFunction Declaration: Defines an actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) to implement the Android-specific date picker for the expect declaration in shared code.
Context Check: Uses if (context !is Context) return to exit the function if the provided context is not an Android Context, ensuring type safety.
Calendar Instance: Creates a Calendar object with Calendar.getInstance() to retrieve the current date and time.
Year Extraction: Gets the current year using calendar.get(Calendar.YEAR) for initializing the date picker.
Month Extraction: Retrieves the current month using calendar.get(Calendar.MONTH) (0-based, e.g., 0 for January).
Day Extraction: Obtains the current day of the month with calendar.get(Calendar.DAY_OF_MONTH) for the date picker’s default date.
DatePickerDialog Creation: Instantiates a DatePickerDialog with the provided context, a listener for date selection, and the current year, month, and day.
Date Selection Listener: Defines a lambda { _, selectedYear, selectedMonth, selectedDay -> … } that formats the selected date as “dd/MM/yyyy” by combining selectedDay, selectedMonth + 1 (to adjust for 0-based months), and selectedYear.
Callback Invocation: Calls onDatePicked(date) to pass the formatted date string to the shared code’s callback function.
Show Dialog: Invokes.show() on the DatePickerDialog to display the Material Design date picker to the user.

3. We also have to pass Context(this) in the App component in the MainActivity.kt file.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            App(this)
        }
    }
}

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

App(this)

}

Complete source code of the MainActivity.kt file after adding the Date Picker native Android code:

package com.app.test

import android.app.DatePickerDialog
import android.content.Context
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import java.util.Calendar

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            App(this)
        }
    }
}

// Android-specific implementation
actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) {
    if (context !is Context) return

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

    // Android-specific DatePickerDialog
    DatePickerDialog(
        context,
        { _, selectedYear, selectedMonth, selectedDay ->
            val date = "$selectedDay/${selectedMonth + 1}/$selectedYear"
            onDatePicked(date)
        },
        year,
        month,
        day
    ).show()
}

package com.app.test

import android.app.DatePickerDialog

import android.content.Context

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.runtime.Composable

import androidx.compose.ui.tooling.preview.Preview

import java.util.Calendar

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

App(this)

}

// Android-specific implementation

actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) {

if (context !is Context) return

val calendar = Calendar.getInstance()

val year = calendar.get(Calendar.YEAR)

val month = calendar.get(Calendar.MONTH)

val day = calendar.get(Calendar.DAY_OF_MONTH)

// Android-specific DatePickerDialog

DatePickerDialog(

context,

{ _, selectedYear, selectedMonth, selectedDay ->

val date = "$selectedDay/${selectedMonth + 1}/$selectedYear"

onDatePicked(date)

year,

month,

day

).show()

}

2. iOS Specific DatePicker Implementation:

1. Open your project’s
APP -> composeApp -> src -> iosMain -> kotlin -> packageName -> pickDate.kt file.

2. Creating the pickDate() method for the native iOS Date Picker component.

package com.app.test

import platform.Foundation.NSDateFormatter
import platform.UIKit.UIAlertAction
import platform.UIKit.UIAlertActionStyleDefault
import platform.UIKit.UIAlertController
import platform.UIKit.UIAlertControllerStyleAlert
import platform.UIKit.UIApplication
import platform.UIKit.UIDatePicker
import platform.UIKit.UIDatePickerMode
import platform.UIKit.UIDatePickerStyle

actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) {
    val datePicker = UIDatePicker().apply {
        datePickerMode = UIDatePickerMode.UIDatePickerModeDate
        preferredDatePickerStyle =
            UIDatePickerStyle.UIDatePickerStyleWheels // Use the wheel-style picker
        translatesAutoresizingMaskIntoConstraints = false
    }

    val alertController = UIAlertController.alertControllerWithTitle(
        title = "Pick a Date",
        message = "\n\n\n\n\n\n\n",
        preferredStyle = UIAlertControllerStyleAlert
    )

    alertController.view.addSubview(datePicker)

    // Set constraints for the DatePicker
    datePicker.centerXAnchor.constraintEqualToAnchor(alertController.view.centerXAnchor).active =
        true
    datePicker.topAnchor.constraintEqualToAnchor(
        alertController.view.topAnchor,
        constant = 10.0
    ).active = true
    datePicker.widthAnchor.constraintEqualToAnchor(
        alertController.view.widthAnchor,
        constant = -20.0
    ).active = true

    alertController.addAction(
        UIAlertAction.actionWithTitle(
            title = "Done",
            style = UIAlertActionStyleDefault
        ) { _ ->
            val formatter = NSDateFormatter().apply {
                dateFormat = "dd-MM-yyyy"
            }
            val selectedDate = formatter.stringFromDate(datePicker.date)
            onDatePicked(selectedDate)
        }
    )

    // Present the alert
    UIApplication.sharedApplication.keyWindow?.rootViewController?.presentViewController(
        alertController,
        animated = true,
        completion = null
    )
}

package com.app.test

import platform.Foundation.NSDateFormatter

import platform.UIKit.UIAlertAction

import platform.UIKit.UIAlertActionStyleDefault

import platform.UIKit.UIAlertController

import platform.UIKit.UIAlertControllerStyleAlert

import platform.UIKit.UIApplication

import platform.UIKit.UIDatePicker

import platform.UIKit.UIDatePickerMode

import platform.UIKit.UIDatePickerStyle

actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) {

val datePicker = UIDatePicker().apply {

datePickerMode = UIDatePickerMode.UIDatePickerModeDate

preferredDatePickerStyle =

UIDatePickerStyle.UIDatePickerStyleWheels // Use the wheel-style picker

translatesAutoresizingMaskIntoConstraints = false

}

val alertController = UIAlertController.alertControllerWithTitle(

title = "Pick a Date",

message = "\n\n\n\n\n\n\n",

preferredStyle = UIAlertControllerStyleAlert

)

alertController.view.addSubview(datePicker)

// Set constraints for the DatePicker

datePicker.centerXAnchor.constraintEqualToAnchor(alertController.view.centerXAnchor).active =

true

datePicker.topAnchor.constraintEqualToAnchor(

alertController.view.topAnchor,

constant = 10.0

).active = true

datePicker.widthAnchor.constraintEqualToAnchor(

alertController.view.widthAnchor,

constant = -20.0

).active = true

alertController.addAction(

UIAlertAction.actionWithTitle(

title = "Done",

style = UIAlertActionStyleDefault

) { _ ->

val formatter = NSDateFormatter().apply {

dateFormat = "dd-MM-yyyy"

}

val selectedDate = formatter.stringFromDate(datePicker.date)

onDatePicked(selectedDate)

}

)

// Present the alert

UIApplication.sharedApplication.keyWindow?.rootViewController?.presentViewController(

alertController,

animated = true,

completion = null

)

}

Code explanation:

Function Declaration: Defines an actual fun pickDate(context: Any?, onDatePicked: (String) -> Unit) to implement the iOS-specific date picker for the expect declaration in shared code.
UIDatePicker Creation: Initializes a UIDatePicker and configures it using an apply block to set its properties.
DatePicker Mode: Sets datePickerMode = UIDatePickerMode.UIDatePickerModeDate to configure the picker for selecting dates only (no time).
DatePicker Style: Sets preferredDatePickerStyle = UIDatePickerStyle.UIDatePickerStyleWheels to use a wheel-style interface for the date picker.
Constraints Disabled: Sets translatesAutoresizingMaskIntoConstraints = false to allow manual constraint setup for the date picker’s layout.
Alert Controller Creation: Creates a UIAlertController with title “Pick a Date,” a placeholder message with newlines for spacing, and UIAlertControllerStyleAlert style.
Add DatePicker to Alert: Adds the UIDatePicker as a subview to the alert controller’s view for display within the alert.
Center X Constraint: Aligns the date picker’s horizontal center to the alert’s center using centerXAnchor.constraintEqualToAnchor.
Top Constraint: Positions the date picker 10 points from the alert’s top edge using topAnchor.constraintEqualToAnchor.
Width Constraint: Sets the date picker’s width to the alert’s width minus 20 points using widthAnchor.constraintEqualToAnchor for a balanced layout.
Activate Constraints: Enables the constraints by setting .active = true for center, top, and width anchors to position the date picker correctly.
Done Action Creation: Adds a “Done” button to the alert using UIAlertAction with UIAlertActionStyleDefault style.
Date Formatter Setup: Creates an NSDateFormatter with dateFormat = “dd-MM-yyyy” to format the selected date (e.g., “24-06-2025”).
Date Selection: Converts the datePicker.date to a string using the formatter and assigns it to selectedDate.
Callback Invocation: Calls onDatePicked(selectedDate) to pass the formatted date string to the shared code’s callback.
Present Alert: Displays the alert controller with a date picker using presentViewController, with an animated transition for a smooth effect.

3. We have to pass null at the place of context in the App. Open your project’s :

APP -> composeApp -> src -> iosMain -> kotlin -> packageName -> MainViewController.kt file.

package com.app.test

import androidx.compose.ui.window.ComposeUIViewController

fun MainViewController() = ComposeUIViewController { App(null) }

package com.app.test

import androidx.compose.ui.window.ComposeUIViewController

fun MainViewController() = ComposeUIViewController { App(null) }

3. Common DatePicker Implementation:

1. Open your project and create a file:
APP -> composeApp -> src -> commonMain -> kotlin -> packageName -> date_picker.kt file.

package com.app.test

// Shared Code
expect fun pickDate(context: Any?, onDatePicked: (String) -> Unit)

package com.app.test

// Shared Code

expect fun pickDate(context: Any?, onDatePicked: (String) -> Unit)

Code explanation:

Expect Function Declaration: Defines expect fun pickDate(context: Any?, onDatePicked: (String) -> Unit) in the shared module to declare a platform-agnostic function signature.
Function Parameters: Includes context: Any? for platform-specific context (e.g., Android Context or null for iOS) and
onDatePicked: (String) -> Unit as a callback to return the selected date as a string.
Purpose of Expect: Signals that platform-specific implementations (actual) for Android and iOS will provide the exact behavior, ensuring shared code can call pickDate uniformly.

4. Common DatePicker Implementation in App.kt file:

package com.app.test

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun App(context: Any?) {
    MaterialTheme {
        var selectedDate by remember { mutableStateOf("Not Selected") }
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                "Date Picker in KMP KMM",
                modifier = Modifier.fillMaxWidth(),
                style = TextStyle(color = Color.Black, fontSize = 24.sp),
                textAlign = TextAlign.Center
            )

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

            // Date Picker
            Text(
                text = "Date: $selectedDate",
                style = TextStyle(color = Color.Black, fontSize = 24.sp),
            )

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

            Button(onClick = { pickDate(context) { date -> selectedDate = date } }) {
                Text("Pick a Date")
            }

        }
    }
}

package com.app.test

import androidx.compose.foundation.layout.*

import androidx.compose.material.*

import androidx.compose.runtime.*

import androidx.compose.ui.Modifier

import androidx.compose.ui.Alignment

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.text.TextStyle

import androidx.compose.ui.text.style.TextAlign

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

@Composable

fun App(context: Any?) {

MaterialTheme {

var selectedDate by remember { mutableStateOf("Not Selected") }

Column(

modifier = Modifier

.fillMaxSize()

.padding(8.dp),

verticalArrangement = Arrangement.Top,

horizontalAlignment = Alignment.CenterHorizontally

) {

Text(

"Date Picker in KMP KMM",

modifier = Modifier.fillMaxWidth(),

style = TextStyle(color = Color.Black, fontSize = 24.sp),

textAlign = TextAlign.Center

)

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

// Date Picker

Text(

text = "Date: $selectedDate",

style = TextStyle(color = Color.Black, fontSize = 24.sp),

)

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

Button(onClick = { pickDate(context) { date -> selectedDate = date } }) {

Text("Pick a Date")

}

Screenshot on an Android device:

DatePicker in Kotlin Compose Multiplatform KMP KMM

Screenshot on an iOS device:

DatePicker in Kotlin Compose Multiplatform KMP KMM

DatePicker in Kotlin Compose Multiplatform KMP KMM

1. Android Specific DatePicker Implementation:

Complete source code of the MainActivity.kt file after adding the Date Picker native Android code:

2. iOS Specific DatePicker Implementation:

3. Common DatePicker Implementation:

4. Common DatePicker Implementation in App.kt file:

Comments

Leave a Reply Cancel reply