Date Picker implementation for Android Jetpack Compose

Question

I am trying to create two composable functions:

1. A text field that when clicked will open a popup menu that will allow the user to select a date(dd/mm/yy)
2. The popup dialog that will allow to user to pick a day, month, and year

I am trying to create it in a way that it will look like any generic OutlinedTextField Composable but it doesn't allow the user to type in the field and instead will just open the popup menu.

These are my implementations as of right now but I would like to know if there is an easier way to do it

@Composable
fun DateField(
    value: String,
    label: String,
    placeholder: String,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    onValueChange: (String) -> Unit
) {
    val showDialog = remember { mutableStateOf(false) }
    Box {
        OutlinedTextField(
            value = value,
            onValueChange = onValueChange,
            label = {
                Text(text = label)
            },
            placeholder = {
                Text(text = placeholder)
            },
            visualTransformation = visualTransformation,
            keyboardOptions = keyboardOptions,
            leadingIcon = leadingIcon,
            trailingIcon = trailingIcon,
            readOnly = true
        )
        Box(
            modifier = Modifier.fillMaxSize()
            .clickable { showDialog.value = true }
        )
        if(showDialog.value) {
            DateSelector(
                isOpened = showDialog.value,
                closeSelection = {
                    showDialog.value = false
                }
            )
        }
    }
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(12.dp)
    )
}

@Composable
internal fun DateSelector(isOpened: Boolean, closeSelection: () -> Unit) {

    val selectedDate = remember { mutableStateOf<LocalDate?>(null) }
    DateTimeDialog(
        state = rememberUseCaseState(visible = isOpened, onCloseRequest = { closeSelection() }),
        selection = DateTimeSelection.Date { newDate ->
            selectedDate.value = newDate
        },
    )
}

This is sort of the design I am going for,