如何在Jetpack Compose Material 3 DatePicker中高亮特定日期并自定义颜色？

可以通过自定义DatePicker的dayContent参数实现特定日期的高亮效果，这是Material3 DatePicker提供的灵活自定义入口，能完全控制单个日期项的显示样式。

实现步骤 #

1. 定义需要高亮的日期集合
2. 自定义dayContent，根据日期是否在高亮集合中设置对应的颜色样式

代码示例 #

首先定义要高亮的日期：

val highlightedDates = setOf(
    LocalDate.of(2024, 5, 15),
    LocalDate.of(2024, 5, 20)
)

然后修改DatePicker的调用逻辑：

DatePickerDialog(
    // 保留你原有的参数配置
    onDismissRequest = { /* 处理关闭逻辑 */ },
    confirmButton = { /* 确认按钮逻辑 */ }
) {
    DatePicker(
        state = datePickerState,
        dayContent = { date ->
            val isHighlighted = highlightedDates.contains(date)
            
            // 自定义高亮状态的颜色
            val highlightTextColor = Color.Red
            val highlightBgColor = Color.Red.copy(alpha = 0.1f)
            
            // 沿用默认样式的颜色（适配选中、禁用等状态）
            val defaultTextColor = when {
                datePickerState.selectedDateMillis?.let {
                    LocalDate.ofEpochDay(it / 86400000) == date
                } == true -> MaterialTheme.colorScheme.onPrimary
                !datePickerState.calendarUiState.isEnabled(date) -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
                else -> MaterialTheme.colorScheme.onSurface
            }
            val defaultBgColor = if (datePickerState.selectedDateMillis?.let {
                    LocalDate.ofEpochDay(it / 86400000) == date
                } == true) {
                MaterialTheme.colorScheme.primary
            } else {
                Color.Transparent
            }
            
            // 最终应用的颜色
            val textColor = if (isHighlighted) highlightTextColor else defaultTextColor
            val bgColor = if (isHighlighted) highlightBgColor else defaultBgColor
            
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .background(bgColor, CircleShape)
                    .align(Alignment.Center),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = date.dayOfMonth.toString(),
                    color = textColor,
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    )
}

简化版（保留默认选中样式） #

如果不想完全重写日期项样式，只想在默认样式基础上添加高亮背景，可以复用DatePickerDefaults.dayContent()：

DatePicker(
    state = datePickerState,
    dayContent = { date ->
        val isHighlighted = highlightedDates.contains(date)
        val defaultDay = DatePickerDefaults.dayContent()
        
        Box(
            modifier = Modifier
                .background(
                    if (isHighlighted) Color.Red.copy(alpha = 0.1f) else Color.Transparent,
                    CircleShape
                )
        ) {
            defaultDay(date)
        }
    }
)

这种方式会保留默认的选中、禁用、当前日期等状态样式，同时给指定日期添加高亮背景。

内容的提问来源于stack exchange，提问作者SkAppCoding