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

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

ประเภท

เครื่องมือเลือกวันที่มี 3 ประเภท ได้แก่

  • อยู่บนแท่นชาร์จ: ปรากฏในบรรทัดภายในเลย์เอาต์ เหมาะสำหรับเลย์เอาต์แบบกะทัดรัดที่กล่องโต้ตอบเฉพาะอาจรบกวน
  • โมดัล: ปรากฏเป็นกล่องโต้ตอบที่วางซ้อนบนเนื้อหาของแอป ซึ่งช่วยให้โฟกัสที่การเลือกวันที่ได้อย่างชัดเจน
  • การป้อนข้อมูลแบบโมดอล: รวมช่องข้อความเข้ากับเครื่องมือเลือกวันที่แบบโมดอล

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

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

@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

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

  • เครื่องมือเลือกวันที่จะปรากฏขึ้นเมื่อผู้ใช้คลิก IconButton
    • ปุ่มไอคอนทำหน้าที่เป็นอาร์กิวเมนต์สำหรับพารามิเตอร์ OutlinedTextField's trailingIcon
    • ตัวแปรสถานะ showDatePicker จะควบคุมการแสดงเครื่องมือเลือกวันที่ที่ยึดไว้
  • คอนเทนเนอร์ของเครื่องมือเลือกวันที่คือคอมโพสิชัน Popup ซึ่งวางซ้อนเนื้อหาโดยไม่ส่งผลต่อเลย์เอาต์ขององค์ประกอบอื่นๆ
  • 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 จะแสดงเครื่องมือเลือกวันที่แบบโมดอล
  • onDateSelectedนิพจน์ Lambda จะทํางานเมื่อผู้ใช้เลือกวันที่
    • โดยจะแสดงวันที่ที่เลือกต่อคอมโพสิเบิลหลัก
  • onDismissนิพจน์ Lambda จะทำงานเมื่อผู้ใช้ปิดกล่องโต้ตอบ

ผลลัพธ์

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

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

ผลลัพธ์

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

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

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

หากต้องการบันทึกวันที่ที่เลือก ให้ติดตามวันที่นั้นในคอมโพสิเบิลหลักเป็น 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?> หรือคลาสข้อมูลเพื่อบันทึกค่าเริ่มต้นและค่าสิ้นสุด

ดูเพิ่มเติม