Datumsauswahl

In der Datumsauswahl können Nutzer ein Datum, einen Zeitraum oder beides auswählen. Sie verwenden eine Kalenderdialogfeld oder Texteingabe, über die Nutzer Datumsangaben auswählen können.

Typen

Es gibt drei Arten von Datumsauswahlen:

• Angedockt: Wird inline im Layout angezeigt. Sie eignet sich für kompakte Layouts, bei denen ein dedizierter Dialog aufdringlich wirkt.
• Modal: Erscheint als Dialogfeld, das den App-Inhalt überlagert. Dies bietet eine den Fokus auf die Datumsauswahl aufheben.
• Modaleingabe: Kombiniert ein Textfeld mit einer modalen Datumsauswahl.

Sie können diese Datumsauswahl in Ihrer App folgendermaßen implementieren: zusammensetzbare Funktionen:

• DatePicker: Allgemein zusammensetzbare Funktion für eine Datumsauswahl Der Container, den Sie Mit wird festgelegt, ob es angedockt oder angedockt ist.
• DatePickerDialog: Der Container für das modale und modale Eingabedatum Auswahlmöglichkeiten.
• DateRangePicker: Bei jeder Datumsauswahl, bei der der Nutzer ein Zeitraum mit Start- und Enddatum.

Bundesland

Der Schlüsselparameter, den die verschiedenen zusammensetzbaren Funktionen der Datumsauswahl haben, ist state, für die entweder DatePickerState oder DateRangePickerState-Objekt. Ihre Properties erfassen Informationen über die Auswahl des Nutzers mithilfe der Datumsauswahl, z. B. das aktuell ausgewählte Datum.

Weitere Informationen zur Verwendung des ausgewählten Datums finden Sie im Abschnitt Verwenden Bereich mit ausgewähltem Datum.

Angedockte Datumsauswahl

Im folgenden Beispiel gibt es ein Textfeld, in dem der Nutzer zur Eingabe aufgefordert wird. ihr Geburtsdatum. Wenn sie auf das Kalendersymbol in dem Feld klicken, wird ein angedockte Datumsauswahl unter dem Eingabefeld.

@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))
}
DatePickers.kt

Wichtige Informationen zum Code

• Die Datumsauswahl wird angezeigt, wenn der Nutzer auf das IconButton klickt.
  • Die Symbolschaltfläche dient als Argument für den OutlinedTextField trailingIcon-Parameter.
  • Die Statusvariable showDatePicker steuert die Sichtbarkeit des angedockte Datumsauswahl.
• Der Container der Datumsauswahl ist eine zusammensetzbare Funktion vom Typ Popup, die über dem ohne das Layout anderer Elemente zu beeinträchtigen.
• selectedDate erfasst den Wert des ausgewählten Datums aus dem DatePickerState-Objekt und formatiert es mithilfe der convertMillisToDate .
• Das ausgewählte Datum wird im Textfeld angezeigt.
• Die angedockte Datumsauswahl befindet sich mithilfe eines offset-Elements unter dem Textfeld. Modifikator.
• Ein Box wird als Stammcontainer verwendet, damit der Text richtig übereinandergelegt werden kann und die Datumsauswahl.

Ergebnisse

Nach dem Klicken auf das Kalendersymbol wird diese Implementierung wie folgt angezeigt:

Modale Datumsauswahl

In der modalen Datumsauswahl ist ein Dialogfeld zu sehen, das über dem Bildschirm schwebt. So implementieren Sie erstellen Sie ein DatePickerDialog und übergeben Sie ein DatePicker-Element.

@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)
    }
}
DatePickers.kt

Wichtige Informationen zum Code

• Die zusammensetzbare Funktion DatePickerModal zeigt eine modale Datumsauswahl an.
• Der Lambda-Ausdruck onDateSelected wird ausgeführt, wenn der Nutzer einen Datum.
  • Das ausgewählte Datum wird für die übergeordnete zusammensetzbare Funktion angezeigt.
• Der Lambda-Ausdruck onDismiss wird ausgeführt, wenn der Nutzer die Dialogfeld.

Ergebnisse

Diese Implementierung sieht so aus:

Modale Datumsauswahl für die Eingabe

Eine modale Datumsauswahl mit Eingabe zeigt ein Dialogfeld an, das über dem Bildschirm schwebt und können Nutzende ein Datum eingeben.

@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)
    }
}
DatePickers.kt

Wichtige Informationen zum Code

Dies entspricht weitgehend dem Beispiel für die modale Datumsauswahl. Die primäre den Unterschied:

• Der Parameter initialDisplayMode legt den anfänglichen Anzeigemodus auf DisplayMode.Input.

Datumsauswahl mit Zeitraum

Sie können eine Datumsauswahl erstellen, über die Nutzer einen Zeitraum auswählen können, der zwischen dem und das Enddatum. Verwenden Sie dazu DateRangePicker.

Die Verwendung von DateRangePicker entspricht im Wesentlichen der Verwendung von DatePicker. Sie können Verwenden Sie es für eine angedockte Auswahl als untergeordnetes Element von PopUp oder als modale Auswahl und übergeben Sie sie an DatePickerDialog. Der Hauptunterschied ist dass Sie DateRangePickerState anstelle von DatePickerState verwenden.

Mit dem folgenden Snippet wird eine modale Datumsauswahl Bereich:

@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)
        )
    }
}
DatePickers.kt

Wichtige Informationen zum Code

• Der Parameter onDateRangeSelected ist ein Callback, der ein Pair<Long?, Long?> für das ausgewählte Start- und Enddatum. Dieses gewährt dem übergeordneten Element zusammensetzbaren Zugriff auf den ausgewählten Bereich.
• rememberDateRangePickerState() erstellt den Status für den Zeitraum Auswahl.
• DatePickerDialog erstellt einen modalen Dialogcontainer.
• Im onClick-Handler der Schaltfläche „Bestätigen“ gibt onDateRangeSelected über Bereich mit der übergeordneten zusammensetzbaren Funktion.
• Die zusammensetzbare Funktion DateRangePicker dient als Dialoginhalt.

Ergebnisse

Diese Implementierung sieht so aus:

Ausgewähltes Datum verwenden

Um das ausgewählte Datum zu erfassen, erfassen Sie es in der übergeordneten zusammensetzbaren Funktion als Long und übergibt den Wert an die DatePicker in onDateSelected. Das folgende Snippet demonstriert dies. Die vollständige Implementierung finden Sie jedoch in der offiziellen Snippets-App verfügbar.

// ...
    var selectedDate by remember { mutableStateOf<Long?>(null) }
// ...
        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")
        }
// ...
        DatePickerModal(
            onDateSelected = {
                selectedDate = it
                showModal = false
            },
            onDismiss = { showModal = false }
        )
    }
// ...
DatePickers.kt

Im Wesentlichen gilt das Gleiche für die Datumsauswahl für den Zeitraum. Sie müssen sich jedoch Verwenden Sie Pair<Long?, Long?> oder eine Datenklasse, um die Start- und Endwerte zu erfassen.

Siehe auch

• Datumsauswahl in Material Design
• Zeitauswahl