เครื่องมือเลือกวันที่ช่วยให้ผู้ใช้เลือกวันที่ ช่วงวันที่ หรือทั้ง 2 อย่างได้ โดยใช้ กล่องโต้ตอบปฏิทินหรือการป้อนข้อความเพื่อให้ผู้ใช้เลือกวันที่
ประเภท
เครื่องมือเลือกวันที่มี 3 ประเภทดังนี้
- ตรึง: ปรากฏในบรรทัดภายในเลย์เอาต์ เหมาะสำหรับแอปขนาดกะทัดรัด ที่กล่องโต้ตอบสำหรับโดยเฉพาะอาจดูน่ารำคาญ
- โมดัล: แสดงเป็นกล่องโต้ตอบที่วางซ้อนเนื้อหาของแอป ซึ่งจะให้ ล้างการโฟกัสที่การเลือกวันที่
- การป้อนข้อมูลแบบโมดัล: รวมช่องข้อความกับเครื่องมือเลือกวันที่แบบโมดัล
คุณสามารถใช้เครื่องมือเลือกวันที่เหล่านี้ในแอปได้โดยใช้สิ่งต่อไปนี้ Composable:
DatePicker
: องค์ประกอบทั่วไปที่ใช้สำหรับเครื่องมือเลือกวันที่ คอนเทนเนอร์ที่คุณ ใช้เพื่อพิจารณาว่าจะอยู่บนแท่นชาร์จหรือเป็นโมเดลDatePickerDialog
: คอนเทนเนอร์สำหรับวันที่ป้อนข้อมูลทั้งแบบโมดัลและโมดัล เครื่องมือเลือกDateRangePicker
: สำหรับเครื่องมือเลือกวันที่ที่ผู้ใช้สามารถเลือก ซึ่งมีวันที่เริ่มต้นและวันที่สิ้นสุด
รัฐ
พารามิเตอร์สำคัญที่ Composable ของเครื่องมือเลือกวันที่ต่างๆ มีร่วมกันคือ
state
ซึ่งใช้ DatePickerState
หรือ
ออบเจ็กต์ DateRangePickerState
พร็อพเพอร์ตี้จะบันทึกข้อมูลเกี่ยวกับ
ที่ผู้ใช้เลือกโดยใช้เครื่องมือเลือกวันที่ เช่น วันที่ที่เลือกปัจจุบัน
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ประโยชน์จากวันที่ที่เลือก โปรดดูการใช้ ส่วนวันที่ที่เลือก
เครื่องมือเลือกวันที่แบบอยู่กับที่
ในตัวอย่างต่อไปนี้ มีฟิลด์ข้อความที่แจ้งให้ผู้ใช้ป้อนข้อมูล วันเกิด เมื่อคลิกที่ไอคอนปฏิทินในช่องดังกล่าว จะเป็นการเปิด เครื่องมือเลือกวันที่ที่ตรึงไว้ใต้ช่องป้อนข้อมูล
@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)) }
ประเด็นสำคัญเกี่ยวกับโค้ด
- เครื่องมือเลือกวันที่จะปรากฏขึ้นเมื่อผู้ใช้คลิกที่
IconButton
- ปุ่มไอคอนทำหน้าที่เป็นอาร์กิวเมนต์สำหรับ
OutlinedTextField
พารามิเตอร์trailingIcon
- ตัวแปรสถานะ
showDatePicker
ควบคุมการมองเห็น เครื่องมือเลือกวันที่ที่ตรึงไว้
- ปุ่มไอคอนทำหน้าที่เป็นอาร์กิวเมนต์สำหรับ
- คอนเทนเนอร์ของเครื่องมือเลือกวันที่คือ
Popup
Composable ซึ่งซ้อนทับ เนื้อหาได้โดยไม่ส่งผลกระทบต่อการจัดวางขององค์ประกอบอื่นๆ selectedDate
จะบันทึกค่าของวันที่ที่เลือกจากDatePickerState
และจัดรูปแบบโดยใช้convertMillisToDate
- วันที่ที่เลือกจะปรากฏในช่องข้อความ
- เครื่องมือเลือกวันที่ที่จัดวางตำแหน่งไว้ใต้ช่องข้อความโดยใช้
offset
แป้นกดร่วม - มีการใช้
Box
เป็นคอนเทนเนอร์รูทเพื่อให้วางเลเยอร์ข้อความได้อย่างเหมาะสม และเครื่องมือเลือกวันที่
ผลลัพธ์
หลังจากคลิกไอคอนปฏิทิน การติดตั้งใช้งานนี้จะปรากฏดังนี้
![ตัวอย่างเครื่องมือเลือกวันที่ที่แสดงบนแท่นชาร์จ](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-docked.png?hl=th)
เครื่องมือเลือกวันที่แบบโมดัล
เครื่องมือเลือกวันที่แบบโมดัลจะแสดงกล่องโต้ตอบที่ลอยอยู่เหนือหน้าจอ เพื่อนำไปใช้
ให้สร้าง DatePickerDialog
และส่ง 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) } }
ประเด็นสำคัญเกี่ยวกับโค้ด
- ฟังก์ชันที่ประกอบได้ของ
DatePickerModal
จะแสดงเครื่องมือเลือกวันที่แบบโมดัล - นิพจน์ lambda ของ
onDateSelected
จะทำงานเมื่อผู้ใช้เลือก วันที่- โดยจะแสดงวันที่ที่เลือกกับ Composable หลัก
- นิพจน์ lambda ของ
onDismiss
จะทำงานเมื่อผู้ใช้ปิด กล่องโต้ตอบ
ผลลัพธ์
การติดตั้งใช้งานนี้จะปรากฏดังนี้
![ตัวอย่างเครื่องมือเลือกวันที่แบบโมดัล](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-modal.png?hl=th)
เครื่องมือเลือกวันที่ของอินพุต
เครื่องมือเลือกวันที่แบบโมดัลที่มีอินพุตจะแสดงกล่องโต้ตอบที่ลอยอยู่เหนือหน้าจอและ ช่วยให้ผู้ใช้ป้อนวันที่ได้
@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) } }
ประเด็นสำคัญเกี่ยวกับโค้ด
ซึ่งจะคล้ายกับตัวอย่างเครื่องมือเลือกวันที่แบบโมดัล องค์ประกอบหลัก ความแตกต่างมีดังนี้
- พารามิเตอร์
initialDisplayMode
ตั้งค่าโหมดการแสดงผลเริ่มต้นเป็นDisplayMode.Input
![เครื่องมือเลือกวันที่แบบโมดัลพร้อมอินพุต](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-modal-input.png?hl=th)
เครื่องมือเลือกวันที่ที่มีช่วง
คุณสามารถสร้างเครื่องมือเลือกวันที่ที่ให้ผู้ใช้เลือกช่วงระหว่างวันที่เริ่มต้นได้
และวันที่สิ้นสุด โดยใช้ DateRangePicker
โดยทั่วไปแล้ว การใช้ DateRangePicker
นั้นเหมือนกับ DatePicker
คุณสามารถ
ใช้สำหรับเครื่องมือเลือกบางส่วนในฐานะรายการย่อยของ PopUp
หรือคุณสามารถใช้เป็น
เครื่องมือเลือกโมดัล และส่งไปยัง DatePickerDialog
ความแตกต่างที่สำคัญคือ
ที่คุณใช้ DateRangePickerState
แทน DatePickerState
ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีสร้างเครื่องมือเลือกวันที่แบบโมดัลด้วย ช่วง:
@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) ) } }
ประเด็นสำคัญเกี่ยวกับโค้ด
- พารามิเตอร์
onDateRangeSelected
เป็น Callback ที่รับPair<Long?, Long?>
ซึ่งแสดงวันที่เริ่มต้นและวันที่สิ้นสุดที่เลือก ช่วงเวลานี้ ให้การเข้าถึง Composable ระดับบนสุดสำหรับช่วงที่เลือก rememberDateRangePickerState()
สร้างสถานะสำหรับช่วงวันที่ เครื่องมือเลือกDatePickerDialog
จะสร้างคอนเทนเนอร์กล่องโต้ตอบโมดัล- ในเครื่องจัดการ
onClick
ของปุ่มยืนยันonDateRangeSelected
จะผ่านไป ช่วงที่เลือกไปยัง Composable หลัก - Composable
DateRangePicker
ทำหน้าที่เป็นเนื้อหาของกล่องโต้ตอบ
ผลลัพธ์
การติดตั้งใช้งานนี้จะปรากฏดังนี้
![ตัวอย่างเครื่องมือเลือกวันที่ของช่วงโมดัล](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-range.png?hl=th)
ใช้วันที่ที่เลือก
หากต้องการจับภาพวันที่ที่เลือก ให้ติดตามวันที่ใน Composable หลักเป็น Long
และ
ส่งค่าไปยัง DatePicker
ใน onDateSelected
ข้อมูลโค้ดต่อไปนี้
สาธิตวิธีการนี้ แม้ว่าคุณจะดูการใช้งานอย่างเต็มรูปแบบได้ใน
ข้อมูลเพิ่มเติม
// ... 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 } ) } // ...
และโดยพื้นฐานแล้ว เช่นเดียวกับเครื่องมือเลือกวันที่ แต่คุณต้อง
ใช้ Pair<Long?, Long?>
หรือคลาสข้อมูลเพื่อบันทึกค่าเริ่มต้นและสิ้นสุด