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

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

@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 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 จะทำงานเมื่อผู้ใช้เลือก วันที่
    • โดยจะแสดงวันที่ที่เลือกต่อคอมโพสิเบิลหลัก
  • 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 เป็น Callback ที่รับ Pair<Long?, Long?> ซึ่งแสดงวันที่เริ่มต้นและวันที่สิ้นสุดที่เลือก ช่วงเวลานี้ ให้การเข้าถึง Composable ระดับบนสุดสำหรับช่วงที่เลือก
  • 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?> หรือคลาสข้อมูลเพื่อบันทึกค่าเริ่มต้นและสิ้นสุด

ดูเพิ่มเติม