Tarih seçiciler

Tarih seçiciler, kullanıcıların tarih, tarih aralığı veya her ikisini birden seçmesine olanak tanır. Bir kullanıcıların tarihleri seçmesine olanak tanıyan takvim iletişim kutusu veya metin girişi.

Türler

Üç tür tarih seçici vardır:

• Yuvaya yerleştirilmiş: Düzen içinde satır içi olarak görünür. Kompakt için uygun özel bir iletişim kutusunun rahatsız edici olabileceği düzenler.
• Kalıcı: Uygulamanın içeriğiyle yer paylaşımlı bir iletişim kutusu olarak görünür. Bu sayede tarih seçimine net bir şekilde odaklanabilirsiniz.
• Modal giriş: Bir metin alanını modal tarih seçiciyle birleştirir.

Bu tarih seçiciyi aşağıdakini kullanarak uygulamanızda uygulayabilirsiniz composables:

• DatePicker: Tarih seçici için genel composable. Oluşturduğunuz kapsayıcı kullanımı, yuvaya yerleştirilip yerleştirilmeyeceğini veya model olup olmadığını belirler.
• DatePickerDialog: Hem modal hem de modal giriş tarihi seçicilerinin kapsayıcısı.
• DateRangePicker: Kullanıcının başlangıç ve bitiş tarihi içeren bir aralık seçebileceği tüm tarih seçicilerde.

Not: DatePicker, DatePickerDialog ve DateRangePicker deneyseldir. Sorun izleyici'ye sorun bildirin.

Eyalet

Farklı tarih seçici composable'ların ortak olarak paylaştığı temel parametre, state (DatePickerState veya DateRangePickerState nesnesini ifade eder. Bu mülklerin sunduğu bilgiler, Kullanıcının tarih seçiciyi kullanarak yaptığı seçim (örneğin, seçilen geçerli tarih).

Seçilen tarihi nasıl kullanabileceğiniz hakkında daha fazla bilgi için Seçilen tarihi kullanma bölümüne bakın.

Yerleştirilmiş tarih seçici

Aşağıdaki örnekte, kullanıcının giriş yapmasını isteyen bir metin alanı bulunmaktadır. doğum tarihi vardır. Alandaki takvim simgesini tıkladıklarında takvim yuvaya yerleştirilmiş tarih seçici bulunur.

@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
                    )
                }
            }
        }
    }
}

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

Not: Bu örnekteki örnekler tamamen bağımsızdır. Seçili tarihi nasıl gösterebileceğiniz hakkında diğer örneklere bakın.

Kodla ilgili önemli noktalar

• Kullanıcı IconButton simgesini tıkladığında tarih seçici gösterilir.
  • Simge düğmesi, OutlinedTextField'nin trailingIcon parametresi için bağımsız değişken görevi görür.
  • showDatePicker durum değişkeni, yerleştirme tarihi seçici.
• Tarih seçicinin kapsayıcısı, diğer öğelerin düzenini etkilemeden içeriğin üzerine yerleştirilen bir Popup bileşenidir.
• selectedDate, DatePickerState nesnesinden seçilen tarihin değerini yakalar ve convertMillisToDate işlevini kullanarak biçimlendirir.
• Seçilen tarih, metin alanında görünür.
• Yerleştirilmiş tarih seçici, offset değişkeni kullanılarak metin alanının altına yerleştirilir.
• Metin alanının ve tarih seçicinin düzgün bir şekilde katmanlandırılmasına izin vermek için kök kapsayıcı olarak bir Box kullanılır.

Sonuçlar

Takvim simgesini tıkladıktan sonra bu uygulama aşağıdaki gibi görünür:

Şekil 1. Yerleştirilmiş tarih seçici.

Modal tarih seçici

Modal tarih seçici, ekranın üzerinde yüzen bir iletişim kutusu gösterir. Bunu uygulamak için bir DatePickerDialog oluşturun ve ona bir DatePicker gönderin.

@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

Kodla ilgili önemli noktalar

• DatePickerModal composable işlevi, kalıcı bir tarih seçici görüntüler.
• onDateSelected lambda ifadesi, kullanıcı bir tarihi.
  • Seçilen tarihi üst composable'a sunar.
• onDismiss lambda ifadesi, kullanıcı iletişim kutusu.

Sonuçlar

Bu uygulama aşağıdaki gibi görünür:

Şekil 2. Kalıcı bir tarih seçici.

Giriş modunda tarih seçici

Giriş içeren kalıcı bir tarih seçici, ekranın üzerinde kayan ve Kullanıcının tarih girmesine olanak tanır.

@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

Kodla ilgili önemli noktalar

Bu, modal tarih seçici örneği ile neredeyse aynıdır. Başlıca fark şudur:

• initialDisplayMode parametresi, ilk görüntüleme modunu DisplayMode.Input olarak ayarlar.

Şekil 3. Giriş içeren modal tarih seçici.

Aralıklı tarih seçici

Kullanıcının bir başlangıç ve bitiş tarihi arasında bir aralık seçmesine olanak tanıyan bir tarih seçici oluşturabilirsiniz. Bunu yapmak için DateRangePicker kullanın.

DateRangePicker kullanımı temelde DatePicker ile aynıdır. Şunları yapabilirsiniz: alt öğesi olarak yuvaya yerleştirilmiş seçici için veya PopUp alt öğesi olarak kullanabilirsiniz modal seçiciyi kullanın ve DatePickerDialog öğesine iletin. Aradaki temel fark, DatePickerState yerine DateRangePickerState kullanmanızdır.

Aşağıdaki snippet'te, aralık içeren bir modal tarih seçicinin nasıl oluşturulacağı gösterilmektedir:

@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

Kodla ilgili önemli noktalar

• onDateRangeSelected parametresi, Seçili başlangıç ve bitiş tarihlerini temsil eden Pair<Long?, Long?>. Bu üst öğeye seçilen aralığa composable erişimi verir.
• rememberDateRangePickerState(), tarih aralığının durumunu oluşturur kullanabilirsiniz.
• DatePickerDialog, modal iletişim kutusu kapsayıcısı oluşturur.
• Onay düğmesinin onClick işleyicisinde onDateRangeSelected, seçili aralığı üst bileşime iletir.
• DateRangePicker bileşeni, iletişim kutusu içeriği olarak kullanılır.

Sonuçlar

Bu uygulama aşağıdaki gibi görünür:

Şekil 4. Seçili bir aralığa sahip modal tarih seçici.

Seçilen tarihi kullanma

Seçilen tarihi yakalamak için Long olarak üst bileşende izleyin ve değeri onDateSelected içindeki DatePicker öğesine iletin. Aşağıdaki snippet bunu göstermektedir ancak uygulamanın tamamını resmi snippet uygulamasında görebilirsiniz.

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

Temelde aynı durum aralık tarih seçicileri için de geçerlidir. Ancak başlangıç ve bitiş değerlerini yakalamak için bir Pair<Long?, Long?> veya bir veri sınıfı kullanın.

Önemli: Seçilen tarih için Long kullanmak yerine durum nesnesinin kendisini alt composable'dan alt öğeye değiştirin. Bu, tam durumu yakalayabilirsiniz.

Ayrıca bkz.

• Materyal Tasarıma sahip tarih seçiciler
• Zaman seçicileri