在Jetpack Compose中如何为TextField设置dd/mm/yyyy日期格式输入掩码？

实现思路 #

核心通过 Compose 提供的 VisualTransformation 接口实现输入内容的格式化显示，配合输入过滤规则限制用户输入内容，最终达到自动按照dd/mm/yyyy格式补充分隔符的效果。

步骤1：实现自定义日期格式化转换器 #

创建实现VisualTransformation接口的类，自动为输入的数字插入/分隔符，同时处理光标偏移映射，避免光标跳转异常：

class DateTransformation : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        // 仅保留数字做格式化
        val input = text.text.filter { it.isDigit() }
        val formatted = buildString {
            for (i in input.indices) {
                append(input[i])
                // 第2位、第4位数字后插入斜杠
                if (i == 1 || i == 3) append('/')
            }
        }
        // 光标偏移映射，处理插入斜杠后的光标位置同步
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                return when {
                    offset <= 1 -> offset
                    offset <= 3 -> offset + 1
                    else -> offset + 2
                }
            }

            override fun transformedToOriginal(offset: Int): Int {
                return when {
                    offset <= 2 -> offset
                    offset <= 5 -> offset - 1
                    else -> offset - 2
                }
            }
        }
        return TransformedText(AnnotatedString(formatted), offsetMapping)
    }
}

步骤2：添加输入限制规则 #

• 限制键盘为数字键盘，避免用户输入非数字字符
• 输入内容仅保留数字，最大长度限制为8位（对应dd2位+mm2位+yyyy4位）

完整使用示例 #

@Composable
fun DateTextField() {
    var dateText by remember { mutableStateOf("") }
    TextField(
        value = dateText,
        onValueChange = { newText ->
            // 过滤非数字字符，最多保留8位
            val filtered = newText.filter { it.isDigit() }.take(8)
            dateText = filtered
        },
        label = { Text("请输入日期(dd/mm/yyyy)") },
        visualTransformation = DateTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        singleLine = true,
        maxLines = 1
    )
}

补充说明 #

• 实际提交数据时，直接使用存储的原始数字串即可，也可以按需拼接为dd/mm/yyyy格式的字符串：val formattedDate = if(dateText.length == 8) "${dateText.take(2)}/${dateText.slice(2..3)}/${dateText.takeLast(4)}" else ""
• 可根据业务需求额外添加日期合法性校验，比如日期不能超过31、月份不能超过12、年份范围限制等

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