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:

  • Yuvada: Düzende satır içinde 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, kullanıcılara net bir şekilde gösterilir.
  • Kalıcı giriş: Metin alanını kalıcı bir 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 kalıcı hem de kalıcı giriş tarihinin kapsayıcısıdır. seçiciler.
  • DateRangePicker: Kullanıcının seçim yapabileceği tüm tarih seçiciler için bir tarih aralığı seçin.

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 tarihten nasıl yararlanabileceğiniz hakkında daha fazla bilgi için seçilen tarih bölümüne gidin.

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

fun convertMillisToDate(millis: Long): String {
    val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
    return formatter.format(Date(millis))
}
DatePickers.kt

Kodla ilgili önemli noktalar

  • Kullanıcı IconButton öğesini tıkladığında tarih seçici görünür.
    • Simge düğmesi, OutlinedTextField için bağımsız değişken görevi görür trailingIcon parametresinden yararlanın.
    • showDatePicker durum değişkeni, yuvaya yerleştirilmiş tarih seçici.
  • Tarih seçicinin kapsayıcısı, Popup diğer öğelerin düzenini etkilemez.
  • selectedDate, şuradan seçilen tarihin değerini alır: DatePickerState nesnesini belirler ve convertMillisToDate kullanarak biçimlendirir işlevini kullanın.
  • Seçilen tarih, metin alanında görünür.
  • Yerleştirilmiş tarih seçici, offset kullanılarak metin alanının altına yerleştirilir kullanabilirsiniz.
  • Box, metnin uygun şekilde katmanlara ayrılması için kök kapsayıcı olarak kullanılır alanını ve tarih seçiciyi kullanır.

Sonuçlar

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

Yerleştirilmiş tarih seçici örneği.
Şekil 1. Yerleştirilmiş tarih seçici.

Kalıcı tarih seçici, ekranın üzerinde kayan bir iletişim kutusu gösterir. Uygulamak için bir DatePickerDialog oluşturun ve DatePicker iletin.

@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

  • 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:

Kalıcı tarih seçici örneği.
Şekil 2. Kalıcı bir tarih seçici.

Kalıcı tarih seçiciyi girin

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

Bu, kalıcı tarih seçici örneği ile hemen hemen aynıdır. Birincil fark şudur:

  • initialDisplayMode parametresi, başlangıç görüntüleme modunu şu şekilde ayarlar: DisplayMode.Input.
Giriş içeren kalıcı tarih seçici.
Şekil 3. Giriş içeren kalıcı bir tarih seçici.

Aralıklı tarih seçici

Kullanıcının başlangıç tarihi arasındaki aralığı seçebilmesini sağlayan bir tarih seçici oluşturabilirsiniz. ve bitiş tarihi ekleyin. 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. En önemli fark ise DatePickerState yerine DateRangePickerState kullandığınızdan emin olun.

Aşağıdaki snippet, aralık:

@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, kalıcı iletişim kutusu kapsayıcısı oluşturur.
  • Onayla düğmesinin onClick işleyicisinde onDateRangeSelected pas geçti seçilen aralığı üst composable'a aktarıyorum.
  • DateRangePicker composable, iletişim kutusu içeriği görevi görür.

Sonuçlar

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

Kalıcı aralık tarih seçici örneği.
Şekil 4. Seçili aralığı içeren kalıcı tarih seçici.

Seçilen tarihi kullan

Seçilen tarihi yakalamak için üst composable'da Long olarak takip edin ve değeri onDateSelected içindeki DatePicker öğesine iletin. Aşağıdaki snippet Bunu göstermektedir, ancak uygulamanın tamamını resmi snippet'leri uygulaması.

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

Ayrıca bkz.