如何使用 Jetpack Compose 在 TextField 中应用掩码日期 (mm/dd/yyyy)? [英] How to apply a mask date (mm/dd/yyyy) in TextField with Jetpack Compose?

问题描述

我有一个不能超过 10 个字符的 TextField，并且要求用户以mm/dd/yyyy"格式输入日期.每当用户输入前 2 个字符时，我附加/"，当用户输入接下来的 2 个字符时，我附加/"；再次.

I have a TextField in which there cannot be more than 10 characters, and the user is required to enter date in the format "mm/dd/yyyy". Whenever user types first 2 characters I append "/", when the user types next 2 characters I append "/" again.

为了实现这一点，我做了以下工作:

I did the following to achieve this:

            var maxCharDate = 10

            TextField(
                value = query2,
                onValueChange = {
                    if (it.text.length <= maxCharDate) {
                        if (it.text.length == 2 || it.text.length == 5)
                            query2 = TextFieldValue(it.text + "/", selection = TextRange(it.text.length+1))
                        else
                            query2 = it
                    }
                    emailErrorVisible.value = false
                },
                label = {
                    Text(
                        "Date of Birth (mm/dd/yyyy)",
                        color = colorResource(id = R.color.bright_green),
                        fontFamily = FontFamily(Font(R.font.poppins_regular)),
                        fontSize = with(LocalDensity.current) { dimensionResource(id = R.dimen._12ssp).toSp() })
                },
                  .
                  .
                  .

除了附加的/"之外，它正在工作.按退格键不会删除，而其他字符会被删除.

It's working except that the appended "/" doesn't get deleted on pressing backspace, while other characters do get deleted.

我如何使它成为/"?按退格键也删除了吗?

How do I make it such that "/" is deleted too on pressing backspace?

推荐答案

您可以使用 onValueChange 来定义最大字符数并使用 visualTransformation 显示您喜欢的格式而不更改 TextField 中的值.

You can do something different using the onValueChange to define a max number of characters and using visualTransformation to display your favorite format without changing the value in TextField.

val maxChar = 8
TextField(
    singleLine = true,
    value = text,
    onValueChange = {
        if (it.length <= maxChar) text = it
    },
    visualTransformation = DateTransformation()
)

哪里:

class DateTransformation() : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return dateFilter(text)
    }
}

fun dateFilter(text: AnnotatedString): TransformedText {

    val trimmed = if (text.text.length >= 8) text.text.substring(0..7) else text.text
    var out = ""
    for (i in trimmed.indices) {
        out += trimmed[i]
        if (i % 2 == 1 && i < 4) out += "/"
    }

    val numberOffsetTranslator = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            if (offset <= 1) return offset
            if (offset <= 3) return offset +1
            if (offset <= 8) return offset +2
            return 10
        }

        override fun transformedToOriginal(offset: Int): Int {
            if (offset <=2) return offset
            if (offset <=5) return offset -1
            if (offset <=10) return offset -2
            return 8
        }
    }

    return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}

这篇关于如何使用 Jetpack Compose 在 TextField 中应用掩码日期 (mm/dd/yyyy)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！