Add example of date picker textfield opening picker dialog on click

Author: JolandaVerhoef

compose/snippets/src/main/java/com/example/compose/snippets/components/DatePickers.kt

@@ -17,6 +17,9 @@
 package com.example.compose.snippets.components
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.awaitEachGesture
+import androidx.compose.foundation.gestures.awaitFirstDown
+import androidx.compose.foundation.gestures.waitForUpOrCancellation
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -49,12 +52,24 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.input.pointer.PointerEventPass
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Popup
+import com.example.compose.snippets.touchinput.userinteractions.MyAppTheme
 import java.text.SimpleDateFormat
 import java.util.Date
 import java.util.Locale
 
+@Preview
+@Composable
+private fun DatePickerPreview() {
+    MyAppTheme {
+        DatePickerExamples()
+    }
+}
+
 // [START android_compose_components_datepicker_examples]
 // [START_EXCLUDE]
 @Composable
@@ -77,6 +92,9 @@ fun DatePickerExamples() {
         Text("Docked date picker:")
         DatePickerDocked()
 
+        Text("Open modal picker on click")
+        DatePickerFieldToModal()
+
         Text("Modal date pickers:")
         Button(onClick = { showModal = true }) {
             Text("Show Modal Date Picker")
@@ -259,6 +277,43 @@ fun DatePickerDocked() {
     }
 }
 
+@Composable
+fun DatePickerFieldToModal(modifier: Modifier = Modifier) {
+    var selectedDate by remember { mutableStateOf<Long?>(null) }
+    var showModal by remember { mutableStateOf(false) }
+
+    OutlinedTextField(
+        value = selectedDate?.let { convertMillisToDate(it) } ?: "",
+        onValueChange = { },
+        label = { Text("DOB") },
+        placeholder = { Text("MM/DD/YYYY") },
+        trailingIcon = {
+            Icon(Icons.Default.DateRange, contentDescription = "Select date")
+        },
+        modifier = modifier
+            .fillMaxWidth()
+            .pointerInput(selectedDate) {
+                awaitEachGesture {
+                    // Modifier.clickable doesn't work for text fields, so we use Modifier.pointerInput
+                    // in the Initial pass to observe events before the text field consumes them
+                    // in the Main pass.
+                    awaitFirstDown(pass = PointerEventPass.Initial)
+                    val upEvent = waitForUpOrCancellation(pass = PointerEventPass.Initial)
+                    if (upEvent != null) {
+                        showModal = true
+                    }
+                }
+            }
+    )
+
+    if(showModal) {
+        DatePickerModal(
+            onDateSelected = { selectedDate = it },
+            onDismiss = { showModal = false }
+        )
+    }
+}
+
 fun convertMillisToDate(millis: Long): String {
     val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
     return formatter.format(Date(millis))