Jetpack Compose App - Date Picker

Objective:

Previously, we added the primary App Bar to make the app display a hamburger menu on the left (to display the navigation drawer) and a calendar icon on the right. We also connected the hamburger menu to an action to open the navigation drawer, but the calendar icon was just a placeholder - until now. We will add a Date Picker @Composable and connect it to the calendar icon on the app bar. We will also make sure it works in both Light and Dark modes, and is properly internationalized (we added support for internationalization earlier) by switching the in-app language from English to another language - for example, Italian.

Dependencies

Add the following dependency for kotlinx-datetime:

• org.jetbrains.kotlinx:kotlinx-datetime:0.6.0

Components built

Add or modify the following components:

• HistoryDatePicker.kt: Data picker widget selectable via calendar icon on the top App Bar.
• AppBar.kt: Modify the AppBar to include HistoryDatePicker

Code

Date Picker

Add HistoryDatePicker.kt to the com.coroutines.thisdayinhistory.ui.components package in the app module:

package com.coroutines.thisdayinhistory.ui.components


import androidx.annotation.StringRes
import androidx.compose.material3.Button
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.DatePickerState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.DatePickerDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.res.stringResource
import com.coroutines.thisdayinhistory.components.ADJUSTED_COLOR_LIGHTER_FACTOR
import com.coroutines.thisdayinhistory.ui.utils.lighter
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel
import kotlinx.datetime.toInstant
import kotlinx.datetime.toKotlinLocalDateTime
import kotlinx.datetime.toKotlinTimeZone
import java.time.Instant
import java.time.LocalDateTime
import java.time.ZoneId
import java.time.ZoneOffset


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HistoryDatePickerDialog(
    viewModel: IHistoryViewModel,
    @StringRes resIdCancel: Int,
    onDateSelected: (LocalDateTime?) -> Unit,
    onDismiss: () -> Unit
) {


    val time = kotlinx.datetime.Clock.System.now().toEpochMilliseconds()

    val datePickerState = remember { DatePickerState(
        locale = androidx.compose.material3.CalendarLocale.FRANCE,
        time)
    }

    val selectedDate = datePickerState.selectedDateMillis?.let {
        Instant.ofEpochMilli(it).atOffset(ZoneOffset.UTC)
    }

    DatePickerDialog(
        colors = DatePickerDefaults.colors().copy(
            containerColor = MaterialTheme.colorScheme.background.lighter(
                ADJUSTED_COLOR_LIGHTER_FACTOR),
        ),
        onDismissRequest = { onDismiss() },
        confirmButton = {
            Button(onClick = {
                onDateSelected(selectedDate?.toLocalDateTime())
                onDismiss()
            }

            ) {
                Text(text = "OK")
            }
        },
        dismissButton = {
            Button(onClick = {
                onDismiss()
            }) {
                Text(text = stringResource(id = resIdCancel))
            }
        }
    ) {
        DatePicker(
            state = datePickerState
        )
    }
}

AppBar

Modify AppBar.kt in the com.coroutines.thisdayinhistory.ui.appbar package in the app module to include HistoryDatePicker:

    

package com.coroutines.thisdayinhistory.ui.appbar

import androidx.compose.material3.LocalContentColor
import com.coroutines.thisdayinhistory.R
import com.coroutines.thisdayinhistory.ui.viewmodels.IHistoryViewModel
import androidx.annotation.StringRes
import androidx.compose.foundation.background
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.material3.DrawerState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import com.coroutines.thisdayinhistory.ui.components.HistoryDatePickerDialog
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Suppress("LongParameterList")
@Composable
fun AppBar(
    drawerState: DrawerState? = null,
    navigationIcon: (@Composable () -> Unit)? = null,
    historyViewModel: IHistoryViewModel,
    @StringRes title: Int? = null,
    @StringRes cancelButtonText: Int,
    scrollBehavior: TopAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(),
) {
    TopAppBar(
        modifier = Modifier.background(MaterialTheme.colorScheme.background),
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.background
        ),
        title = {}/* {
            title?.let {
                Text(
                    text = stringResource(R.string.title),
                    style = MaterialTheme.typography.titleMedium
                )
            }
        }*/,
        actions = {
            /*appBarActions?.let {
                for (appBarAction in it) {
                    AppBarAction(appBarAction)
                }
            }*/

            CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
                var showDatePicker by remember {
                    mutableStateOf(false)
                }

                if (showDatePicker) {
                    HistoryDatePickerDialog(
                        historyViewModel,
                        resIdCancel = cancelButtonText,
                        onDateSelected = {
                            historyViewModel.onDateChanged(it!!)
                        },
                        onDismiss = { showDatePicker = false }
                    )
                }

                IconButton(
                    onClick = {
                        showDatePicker = true
                    },
                    ) {
                    Icon(
                        imageVector = Icons.Filled.DateRange,
                        contentDescription = stringResource(R.string.appbar_calendar)
                    )
                }
            }
        },
        navigationIcon = {
            if (drawerState != null && navigationIcon == null){
                DrawerIcon(drawerState = drawerState)
            } else {
                navigationIcon?.invoke()
            }
        },
        scrollBehavior = scrollBehavior
    )
}


@Composable
private fun DrawerIcon(drawerState: DrawerState) {
    val coroutineScope = rememberCoroutineScope()
    IconButton(onClick = {
        coroutineScope.launch {
            drawerState.open()
        }
    }) {
        Icon(
            Icons.Rounded.Menu,
            tint = MaterialTheme.colorScheme.onBackground,
            contentDescription = "hello"
        )
    }
}