เครื่องมือเลือกวันที่

เครื่องมือเลือกวันที่ช่วยให้ผู้ใช้เลือกวันที่ ช่วงวันที่ หรือทั้ง 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))
}
DatePickers.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

  • เครื่องมือเลือกวันที่จะปรากฏขึ้นเมื่อผู้ใช้คลิกที่ IconButton
    • ปุ่มไอคอนทำหน้าที่เป็นอาร์กิวเมนต์สำหรับ OutlinedTextField พารามิเตอร์ trailingIcon
    • ตัวแปรสถานะ showDatePicker ควบคุมการมองเห็น เครื่องมือเลือกวันที่ที่ตรึงไว้
  • คอนเทนเนอร์ของเครื่องมือเลือกวันที่คือ Popup Composable ซึ่งซ้อนทับ เนื้อหาได้โดยไม่ส่งผลกระทบต่อการจัดวางขององค์ประกอบอื่นๆ
  • selectedDate จะบันทึกค่าของวันที่ที่เลือกจาก DatePickerState และจัดรูปแบบโดยใช้ convertMillisToDate
  • วันที่ที่เลือกจะปรากฏในช่องข้อความ
  • เครื่องมือเลือกวันที่ที่จัดวางตำแหน่งไว้ใต้ช่องข้อความโดยใช้ offset แป้นกดร่วม
  • มีการใช้ Box เป็นคอนเทนเนอร์รูทเพื่อให้วางเลเยอร์ข้อความได้อย่างเหมาะสม และเครื่องมือเลือกวันที่

ผลลัพธ์

หลังจากคลิกไอคอนปฏิทิน การติดตั้งใช้งานนี้จะปรากฏดังนี้

ตัวอย่างเครื่องมือเลือกวันที่ที่แสดงบนแท่นชาร์จ
รูปที่ 1 เครื่องมือเลือกวันที่ที่ตรึงไว้

เครื่องมือเลือกวันที่แบบโมดัลจะแสดงกล่องโต้ตอบที่ลอยอยู่เหนือหน้าจอ เพื่อนำไปใช้ ให้สร้าง 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)
    }
}
DatePickers.kt

  • ฟังก์ชันที่ประกอบได้ของ DatePickerModal จะแสดงเครื่องมือเลือกวันที่แบบโมดัล
  • นิพจน์ lambda ของ onDateSelected จะทำงานเมื่อผู้ใช้เลือก วันที่
    • โดยจะแสดงวันที่ที่เลือกกับ Composable หลัก
  • นิพจน์ lambda ของ onDismiss จะทำงานเมื่อผู้ใช้ปิด กล่องโต้ตอบ

ผลลัพธ์

การติดตั้งใช้งานนี้จะปรากฏดังนี้

ตัวอย่างเครื่องมือเลือกวันที่แบบโมดัล
รูปที่ 2 เครื่องมือเลือกวันที่แบบโมดัล

เครื่องมือเลือกวันที่ของอินพุต

เครื่องมือเลือกวันที่แบบโมดัลที่มีอินพุตจะแสดงกล่องโต้ตอบที่ลอยอยู่เหนือหน้าจอและ ช่วยให้ผู้ใช้ป้อนวันที่ได้

@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

ซึ่งจะคล้ายกับตัวอย่างเครื่องมือเลือกวันที่แบบโมดัล องค์ประกอบหลัก ความแตกต่างมีดังนี้

  • พารามิเตอร์ initialDisplayMode ตั้งค่าโหมดการแสดงผลเริ่มต้นเป็น DisplayMode.Input
เครื่องมือเลือกวันที่แบบโมดัลพร้อมอินพุต
รูปที่ 3 เครื่องมือเลือกวันที่แบบโมดัลพร้อมอินพุต

เครื่องมือเลือกวันที่ที่มีช่วง

คุณสามารถสร้างเครื่องมือเลือกวันที่ที่ให้ผู้ใช้เลือกช่วงระหว่างวันที่เริ่มต้นได้ และวันที่สิ้นสุด โดยใช้ 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)
        )
    }
}
DatePickers.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

  • พารามิเตอร์ onDateRangeSelected เป็น Callback ที่รับ Pair<Long?, Long?> ซึ่งแสดงวันที่เริ่มต้นและวันที่สิ้นสุดที่เลือก ช่วงเวลานี้ ให้การเข้าถึง Composable ระดับบนสุดสำหรับช่วงที่เลือก
  • rememberDateRangePickerState() สร้างสถานะสำหรับช่วงวันที่ เครื่องมือเลือก
  • DatePickerDialog จะสร้างคอนเทนเนอร์กล่องโต้ตอบโมดัล
  • ในเครื่องจัดการ onClick ของปุ่มยืนยัน onDateRangeSelected จะผ่านไป ช่วงที่เลือกไปยัง Composable หลัก
  • Composable DateRangePicker ทำหน้าที่เป็นเนื้อหาของกล่องโต้ตอบ

ผลลัพธ์

การติดตั้งใช้งานนี้จะปรากฏดังนี้

ตัวอย่างเครื่องมือเลือกวันที่ของช่วงโมดัล
รูปที่ 4 เครื่องมือเลือกวันที่แบบโมดัลที่มีช่วงที่เลือกไว้

ใช้วันที่ที่เลือก

หากต้องการจับภาพวันที่ที่เลือก ให้ติดตามวันที่ใน 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 }
        )
    }
// ...
DatePickers.kt

และโดยพื้นฐานแล้ว เช่นเดียวกับเครื่องมือเลือกวันที่ แต่คุณต้อง ใช้ Pair<Long?, Long?> หรือคลาสข้อมูลเพื่อบันทึกค่าเริ่มต้นและสิ้นสุด

ดูเพิ่มเติม