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)) }
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ürtrailingIcon
parametresinden yararlanın. showDatePicker
durum değişkeni, yuvaya yerleştirilmiş tarih seçici.
- Simge düğmesi,
- 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 veconvertMillisToDate
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.](https://developer.android.google.cn/static/develop/ui/compose/images/components/datepicker-docked.png?hl=tr)
Kalıcı 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) } }
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:
![Kalıcı tarih seçici örneği.](https://developer.android.google.cn/static/develop/ui/compose/images/components/datepicker-modal.png?hl=tr)
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) } }
Kodla ilgili önemli noktalar
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.](https://developer.android.google.cn/static/develop/ui/compose/images/components/datepicker-modal-input.png?hl=tr)
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) ) } }
Kodla ilgili önemli noktalar
onDateRangeSelected
parametresi, Seçili başlangıç ve bitiş tarihlerini temsil edenPair<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şleyicisindeonDateRangeSelected
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.](https://developer.android.google.cn/static/develop/ui/compose/images/components/datepicker-range.png?hl=tr)
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 } ) } // ...
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.