Compose 中的 DatePicker 与 TimePicker：Material3 日期/时间 选择

Source: Dev.to

DatePickerDialog 与状态管理

DatePickerDialog 可组合函数配合 rememberDatePickerState() 提供了一种受控的日期选择方式：

var showDatePicker by remember { mutableStateOf(false) }
val datePickerState = rememberDatePickerState()

if (showDatePicker) {
    DatePickerDialog(
        onDismissRequest = { showDatePicker = false },
        confirmButton = {
            TextButton(onClick = {
                val selectedDate = datePickerState.selectedDateMillis
                showDatePicker = false
            }) {
                Text("OK")
            }
        }
    ) {
        DatePicker(state = datePickerState)
    }
}

Button(onClick = { showDatePicker = true }) {
    Text("Select Date")
}

用 SelectableDates 限制可选范围

通过实现 SelectableDates 接口来控制哪些日期是可选的：

class DateRangeValidator(
    private val minDateMillis: Long,
    private val maxDateMillis: Long
) : SelectableDates {
    override fun isSelectableDate(utcTimeMillis: Long): Boolean {
        return utcTimeMillis >= minDateMillis && utcTimeMillis = 2024 && year  Unit,
    }
}

示例：自定义 DatePickerField

下面是一个可复用的可组合函数示例，它将 DatePickerDialog 与 OutlinedTextField 结合起来：

@Composable
fun DatePickerField(
    value: LocalDateTime,
    onValueChange: (LocalDateTime) -> Unit,
    label: String,
    modifier: Modifier = Modifier
) {
    var showPicker by remember { mutableStateOf(false) }
    val datePickerState = rememberDatePickerState(
        initialSelectedDateMillis = value.toMillis()
    )

    OutlinedTextField(
        value = value.format(DateTimeFormatter.ofPattern("MMM dd, yyyy")),
        onValueChange = {},
        label = { Text(label) },
        readOnly = true,
        trailingIcon = {
            IconButton(onClick = { showPicker = true }) {
                Icon(Icons.Default.DateRange, contentDescription = null)
            }
        },
        modifier = modifier
    )

    if (showPicker) {
        DatePickerDialog(
            onDismissRequest = { showPicker = false },
            confirmButton = {
                TextButton(onClick = {
                    datePickerState.selectedDateMillis?.let { mills ->
                        onValueChange(
                            LocalDateTime.ofInstant(
                                Instant.ofEpochMilli(mills),
                                ZoneId.systemDefault()
                            )
                        )
                    }
                    showPicker = false
                }) {
                    Text("OK")
                }
            }
        ) {
            DatePicker(state = datePickerState)
        }
    }
}

最佳实践

• 状态管理：始终使用 rememberDatePickerState() 来在重组之间保留状态。
• 校验：实现 SelectableDates 以满足业务逻辑约束。
• 用户反馈：在 UI 中即时显示选中的日期/时间。
• 可访问性：确保选择器字段具有正确的标签和内容描述。
• 时区感知：在转换时间戳时明确时区处理。

Material3 日期/时间选择器提供了符合 Material Design 规范的现代体验，满足用户的期望。

8 Android App Templates → https://myougatheax.gumroad.com/