Selektory dat

Selektory dat umożliwiają użytkownikom wybór daty, zakresu dat lub obu tych opcji. Firma korzysta z okna kalendarza lub wprowadzania tekstu, aby umożliwić użytkownikom wybranie dat.

Typy

Dostępne są 3 rodzaje selektorów dat:

  • Zadokowany: pojawia się w tekście w układzie. Jest odpowiednia dla kompaktowych urządzeń w których specjalne okno może być uciążliwe.
  • Modny: wyświetla się jako okno nałożone na zawartość aplikacji. Zapewnia to wyczyść zaznaczenie daty.
  • Modyczne wprowadzanie danych: łączy pole tekstowe z modalnym selektorem daty.

Te selektory dat możesz wdrożyć w aplikacji za pomocą: elementy kompozycyjne:

  • DatePicker: ogólna funkcja kompozycyjna dla selektora daty. Kontener, określa, czy jest on zadokowany czy model.
  • DatePickerDialog: kontener daty modalnej i modalnej z selektorami.
  • DateRangePicker: w przypadku każdego selektora daty, w którym użytkownik może wybrać zakresu z datą rozpoczęcia i zakończenia.

Region

Kluczowy parametr wspólny dla różnych elementów kompozycyjnych selektora dat to state, który trwa DatePickerState lub DateRangePickerState. Ich właściwości rejestrują informacje o wyboru użytkownika za pomocą selektora daty, np. bieżąca wybrana data.

Więcej informacji o tym, jak wykorzystać wybraną datę, znajdziesz w sekcji Używanie wybranej sekcji daty.

Zadokowany selektor daty

W poniższym przykładzie występuje pole tekstowe, które prosi użytkownika o wpisanie danych datę urodzenia. Kliknięcie ikony kalendarza w tym polu powoduje otwarcie zadokowany selektor daty pod polem do wprowadzania danych.

@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

Najważniejsze informacje o kodzie

  • Selektor dat pojawia się, gdy użytkownik kliknie IconButton.
    • Przycisk ikony służy jako argument funkcji OutlinedTextField trailingIcon.
    • Zmienna stanu showDatePicker kontroluje widoczność zadokowanego selektora daty.
  • Kontener selektora dat to funkcja kompozycyjna Popup, która nakłada treści bez wpływu na układ innych elementów.
  • selectedDate rejestruje wartość wybranej daty z DatePickerState obiekt i formatuje go za pomocą convertMillisToDate .
  • Wybrana data pojawi się w polu tekstowym.
  • Zadokowany selektor daty znajduje się pod polem tekstowym za pomocą komponentu offset modyfikator.
  • Box jest używany jako kontener główny, dzięki czemu tekst jest poprawnie nałożony na warstwy i selektor daty.

Wyniki

Po kliknięciu ikony kalendarza implementacja wyświetla się następująco:

Przykład zadokowanego selektora daty.
Rysunek 1. zadokowany selektor daty.

Modalny selektor daty wyświetla okno pływające po ekranie. Aby wdrożyć utwórz DatePickerDialog i przekaż mu wynik DatePicker.

@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

  • Funkcja kompozycyjna DatePickerModal wyświetla modalny selektor daty.
  • Wyrażenie lambda onDateSelected jest wykonywane, gdy użytkownik wybierze datę.
    • Ujawnia wybraną datę dla nadrzędnej funkcji kompozycyjnej.
  • Wyrażenie lambda onDismiss jest wykonywane, gdy użytkownik odrzuci .

Wyniki

Implementacja wygląda tak:

Przykład modalnego selektora daty.
Rysunek 2. modalny selektor daty.

Selektor daty modalnej

W modalnym selektorze daty z danymi wejściowymi wyświetla się okno pływające po ekranie pozwala użytkownikowi wpisać datę.

@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

Przypomina to przykład modalnego selektora daty. Podstawowy różnica jest taka:

  • Parametr initialDisplayMode ustawia początkowy tryb wyświetlania na DisplayMode.Input
Modalny selektor daty z opcją wprowadzania danych.
Rys. 3. modalny selektor daty z możliwością wprowadzenia;

Selektor dat z zakresem

Możesz utworzyć selektor daty, który umożliwi użytkownikowi wybór zakresu od daty rozpoczęcia i datę zakończenia. Aby to zrobić, użyj narzędzia DateRangePicker.

Zastosowanie DateRangePicker działa prawie tak samo jak DatePicker. Dostępne opcje użyj go w selektorze zadokowanym jako elementu podrzędnego tagu PopUp. Możesz też go użyć jako selektor modalny i przekazać go usłudze DatePickerDialog. Główna różnica to używasz DateRangePickerState zamiast DatePickerState.

Ten fragment kodu pokazuje, jak utworzyć modalny selektor daty ze zakres:

@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

Najważniejsze informacje o kodzie

  • Parametr onDateRangeSelected to wywołanie zwrotne, które otrzymuje Pair<Long?, Long?>, który reprezentuje wybraną datę rozpoczęcia i zakończenia. Ten daje nadrzędnemu dostępowi z możliwością kompozycji do wybranego zakresu.
  • rememberDateRangePickerState() tworzy stan zakresu dat .
  • DatePickerDialog tworzy modalny kontener okna.
  • W module obsługi onClick przycisku potwierdzenia onDateRangeSelected przekazuje dane. wybrany zakres do nadrzędnej funkcji kompozycyjnej.
  • Funkcja kompozycyjna DateRangePicker służy jako treść okna.

Wyniki

Implementacja wygląda tak:

Przykład selektora dat zakresu modalnego.
Rysunek 4. modalny selektor daty z wybranym zakresem,

Użyj wybranej daty

Aby zarejestrować wybraną datę, śledź ją w komponencie nadrzędnym jako Long oraz przekazać wartość do funkcji DatePicker w onDateSelected. Ten fragment kodu to demonstracja, ale pełną implementację można znaleźć w oficjalnym .

// ...
    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

Zasadniczo to samo dotyczy selektorów zakresu dat, ale musisz użyj Pair<Long?, Long?> lub klasy danych do przechwytywania wartości początkowej i końcowej.

Zobacz również