Date pickers (#302)

* Reworking the time picker examples to be more friendly to copy-pasting * Apply Spotless * Updating the time picker examples to be more copy-pastable * Change in-use tag name back to the current form. * Apply Spotless * Renaming region tags * Renaming region tags * Adding date picker snippets * Apply Spotless * fixing region tags * Adding additional range tags --------- Co-authored-by: jakeroseman <jakeroseman@users.noreply.github.com>
android · Aug 1, 2024 · e273661 · e273661
1 parent 1a2f369
commit e273661
Show file tree

Hide file tree

Showing 3 changed files with 318 additions and 0 deletions.
diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt b/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt
@@ -34,6 +34,7 @@ import com.example.compose.snippets.components.ButtonExamples
 import com.example.compose.snippets.components.CheckboxExamples
 import com.example.compose.snippets.components.ChipExamples
 import com.example.compose.snippets.components.ComponentsScreen
+import com.example.compose.snippets.components.DatePickerExamples
 import com.example.compose.snippets.components.DialogExamples
 import com.example.compose.snippets.components.DividerExamples
 import com.example.compose.snippets.components.FloatingActionButtonExamples
@@ -105,6 +106,7 @@ class SnippetsActivity : ComponentActivity() {
                                     TopComponentsDestination.BadgeExamples -> BadgeExamples()
                                     TopComponentsDestination.PartialBottomSheet -> PartialBottomSheet()
                                     TopComponentsDestination.TimePickerExamples -> TimePickerExamples()
+                                    TopComponentsDestination.DatePickerExamples -> DatePickerExamples()
                                 }
                             }
                         }

diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/DatePickers.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/DatePickers.kt
@@ -0,0 +1,315 @@
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.compose.snippets.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.DateRange
+import androidx.compose.material3.Button
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.DateRangePicker
+import androidx.compose.material3.DisplayMode
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.rememberDatePickerState
+import androidx.compose.material3.rememberDateRangePickerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+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.unit.dp
+import androidx.compose.ui.window.Popup
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
+
+// [START android_compose_components_datepicker_examples]
+// [START_EXCLUDE]
+@Composable
+fun DatePickerExamples() {
+    var showModal by remember { mutableStateOf(false) }
+    var showModalInput by remember { mutableStateOf(false) }
+    var showRangeModal by remember { mutableStateOf(false) }
+// [END_EXCLUDE]
+    var selectedDate by remember { mutableStateOf<Long?>(null) }
+// [START_EXCLUDE]
+    var selectedDateRange by remember { mutableStateOf<Pair<Long?, Long?>>(null to null) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Text("Docked date picker:")
+        DatePickerDocked()
+
+        Text("Modal date pickers:")
+        Button(onClick = { showModal = true }) {
+            Text("Show Modal Date Picker")
+        }
+        Button(onClick = { showModalInput = true }) {
+            Text("Show Modal Input Date Picker")
+        }
+// [END_EXCLUDE]
+        if (selectedDate != null) {
+            val date = Date(selectedDate!!)
+            val formattedDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(date)
+            Text("Selected date: $formattedDate")
+        } else {
+            Text("No date selected")
+        }
+// [START_EXCLUDE]
+
+        Text("Date range pickers:")
+
+        Button(onClick = { showRangeModal = true }) {
+            Text("Show Modal Date Range Picker")
+        }
+
+        if (selectedDateRange.first != null && selectedDateRange.second != null) {
+            val startDate = Date(selectedDateRange.first!!)
+            val endDate = Date(selectedDateRange.second!!)
+            val formattedStartDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(startDate)
+            val formattedEndDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(endDate)
+            Text("Selected date range: $formattedStartDate - $formattedEndDate")
+        } else {
+            Text("No date range selected")
+        }
+    }
+
+    if (showModal) {
+// [END_EXCLUDE]
+        DatePickerModal(
+            onDateSelected = {
+                selectedDate = it
+                showModal = false
+            },
+            onDismiss = { showModal = false }
+        )
+    }
+// [START_EXCLUDE]
+
+    if (showModalInput) {
+        DatePickerModalInput(
+            onDateSelected = {
+                selectedDate = it
+                showModalInput = false
+            },
+            onDismiss = { showModalInput = false }
+        )
+    }
+
+    if (showRangeModal) {
+        DateRangePickerModal(
+            onDateRangeSelected = {
+                selectedDateRange = it
+                showRangeModal = false
+            },
+            onDismiss = { showRangeModal = false }
+        )
+    }
+}
+// [END android_compose_components_datepicker_examples]
+
+@OptIn(ExperimentalMaterial3Api::class)
+// [START android_compose_components_datepicker_modal]
+@Composable
+fun DatePickerModal(
+    onDateSelected: (Long?) -> Unit,
+    onDismiss: () -> Unit
+) {
+    val datePickerState = rememberDatePickerState()
+
+    DatePickerDialog(
+        onDismissRequest = onDismiss,
+        confirmButton = {
+            TextButton(onClick = {
+                onDateSelected(datePickerState.selectedDateMillis)
+                onDismiss()
+            }) {
+                Text("OK")
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
+            }
+        }
+    ) {
+        DatePicker(state = datePickerState)
+    }
+}
+// [END android_compose_components_datepicker_modal]
+
+@OptIn(ExperimentalMaterial3Api::class)
+// [START android_compose_components_datepicker_inputmodal]
+@Composable
+fun DatePickerModalInput(
+    onDateSelected: (Long?) -> Unit,
+    onDismiss: () -> Unit
+) {
+    val datePickerState = rememberDatePickerState(initialDisplayMode = DisplayMode.Input)
+
+    DatePickerDialog(
+        onDismissRequest = onDismiss,
+        confirmButton = {
+            TextButton(onClick = {
+                onDateSelected(datePickerState.selectedDateMillis)
+                onDismiss()
+            }) {
+                Text("OK")
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
+            }
+        }
+    ) {
+        DatePicker(state = datePickerState)
+    }
+}
+// [END android_compose_components_datepicker_inputmodal]
+
+@OptIn(ExperimentalMaterial3Api::class)
+// [START android_compose_components_datepicker_docked]
+@Composable
+fun DatePickerDocked() {
+    var showDatePicker by remember { mutableStateOf(false) }
+    val datePickerState = rememberDatePickerState()
+    val selectedDate = datePickerState.selectedDateMillis?.let {
+        convertMillisToDate(it)
+    } ?: ""
+
+    Box(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        OutlinedTextField(
+            value = selectedDate,
+            onValueChange = { },
+            label = { Text("DOB") },
+            readOnly = true,
+            trailingIcon = {
+                IconButton(onClick = { showDatePicker = !showDatePicker }) {
+                    Icon(
+                        imageVector = Icons.Default.DateRange,
+                        contentDescription = "Select date"
+                    )
+                }
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(64.dp)
+        )
+
+        if (showDatePicker) {
+            Popup(
+                onDismissRequest = { showDatePicker = false },
+                alignment = Alignment.TopStart
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .offset(y = 64.dp)
+                        .shadow(elevation = 4.dp)
+                        .background(MaterialTheme.colorScheme.surface)
+                        .padding(16.dp)
+                ) {
+                    DatePicker(
+                        state = datePickerState,
+                        showModeToggle = false
+                    )
+                }
+            }
+        }
+    }
+}
+
+fun convertMillisToDate(millis: Long): String {
+    val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
+    return formatter.format(Date(millis))
+}
+// [END android_compose_components_datepicker_docked]
+
+@OptIn(ExperimentalMaterial3Api::class)
+// [START android_compose_components_datepicker_range]
+@Composable
+fun DateRangePickerModal(
+    onDateRangeSelected: (Pair<Long?, Long?>) -> Unit,
+    onDismiss: () -> Unit
+) {
+    val dateRangePickerState = rememberDateRangePickerState()
+
+    DatePickerDialog(
+        onDismissRequest = onDismiss,
+        confirmButton = {
+            TextButton(
+                onClick = {
+                    onDateRangeSelected(
+                        Pair(
+                            dateRangePickerState.selectedStartDateMillis,
+                            dateRangePickerState.selectedEndDateMillis
+                        )
+                    )
+                    onDismiss()
+                }
+            ) {
+                Text("OK")
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
+            }
+        }
+    ) {
+        DateRangePicker(
+            state = dateRangePickerState,
+            title = {
+                Text(
+                    text = "Select date range"
+                )
+            },
+            showModeToggle = false,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(500.dp)
+                .padding(16.dp)
+        )
+    }
+}
+// [END android_compose_components_datepicker_range]
diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt b/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt
@@ -42,4 +42,5 @@ enum class TopComponentsDestination(val route: String, val title: String) {
     BadgeExamples("badgeExamples", "Badges"),
     PartialBottomSheet("partialBottomSheets", "Partial Bottom Sheet"),
     TimePickerExamples("timePickerExamples", "Time Pickers"),
+    DatePickerExamples("datePickerExamples", "Date Pickers"),
 }