OutlinedTextField in jetpack compose on click open Time picker and update the OutlinedTextField

Question

android OutlinedTextField on click and open to time picker its only work in label text click how to click whole OutlinedTextField on event

OutlinedTextField(
                            value = selectedTimeState,
                            onValueChange = { selectedTimeState = it },
                            label = { Text("Selected Time") },
                            modifier = Modifier
                            .fillMaxWidth().clickable {
                                Toast.makeText(context, "click", Toast.LENGTH_SHORT).show()
                            },
                            readOnly = true,
                            trailingIcon = {
                                Spacer(modifier = Modifier.width(8.dp))
                                Text(
                                    text = AnnotatedString(text = lateTimeState),
                                    style = MaterialTheme.typography.bodySmall
                                )
                                Spacer(modifier = Modifier.width(8.dp))
                            },
                        )

android OutlinedTextField on click and open to time picker

Answer 1

val datePicker = DatePickerDialog(
        context, { _: DatePicker, selectedYear: Int, selectedMonth: Int, selectedDayOfMonth: Int ->
   
            calendar[Calendar.YEAR] = selectedYear
            calendar[Calendar.MONTH] = selectedMonth
            calendar[Calendar.DAY_OF_MONTH] = selectedDayOfMonth
            if (isDOB) {
                selectedDateText = formatterDate(
                    Date(calendar.timeInMillis).toString(),
                    "EEE MMM dd HH:mm:ss zzz yyyy",
                    "yyyy-MM-dd"
                )!!
                onValueChange(selectedDateText)
            } else {
                val convertingInUTCFromCalendar = formatterDate(
                    Date(calendar.timeInMillis).toString(),
                    "EEE MMM dd HH:mm:ss zzz yyyy",
                    "yyyy-MM-dd'T'HH:mm:ss.SSS"
                )!!
                val parsed: DateTime =
                    DateTime(convertingInUTCFromCalendar).withZone(DateTimeZone.UTC)

                val myUTCFormat = formatterDate(
                    parsed.toString(),
                    "yyyy-MM-dd'T'HH:mm:ss.SSS",
                    "yyyy-MM-dd HH:mm:ss"
                )

                selectedDateText = myUTCFormat!!
                onValueChange(selectedDateText)
            }
        }, calendar[Calendar.YEAR], calendar[Calendar.MONTH], calendar[Calendar.DAY_OF_MONTH]
    )


    OutlinedTextField(
        value = selectedDateText,
        onValueChange = { onValueChange(it) },
        readOnly = true,
        modifier = modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Characters,
            autoCorrect = false,
        ),
        placeholder = {
            Text(
                text = "dd/mm/yyyy",
                fontWeight = FontWeight(400),
                fontSize = 14.sp,
                color = RomanSilver,
            )
        },
        trailingIcon = {
            IconButton(
                onClick = { datePicker.show() },
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.calendar),
                    contentDescription = null,
                    tint = RomanSilver
                )
            }
        },
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = MaterialTheme.colors.secondaryVariant,
            cursorColor = RomanSilver,
            disabledLabelColor = RomanSilver,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            textColor = LocalCustomColorsPalette.current.textColor,
            disabledTextColor = LocalCustomColorsPalette.current.textColor,
            disabledIndicatorColor = Color.Transparent
        ),
        shape = (RoundedCornerShape(40)),
        isError = isError,
        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
        interactionSource = interactionSource
    )

using the above code I have achieved the same thing and this is just for your reference because I have created my own composable function for my requirements If you don't understand many think's feel free to ask in comment.

Answer 2

I was trying to use the solution given above and partially achieved the result. I am getting calendar option when I click icon but the selected date is not appearing in the OutlinedText field.

Dependencies:

// CORE
implementation("com.maxkeppeler.sheets-compose-dialogs:core:1.0.2")

// CALENDAR
implementation("com.maxkeppeler.sheets-compose-dialogs:calendar:1.0.2")

var dateOfBirth by mutableStateOf("")
val calendarState = rememberSheetState()

OutlinedTextField(
    modifier = Modifier.fillMaxWidth(),
    value = dateOfBirth,
    singleLine = true,
    onValueChange = { dateOfBirth = it },
    readOnly = true,
    placeholder = {
        Text(
            text = "dd/mm/yyyy",
            fontWeight = FontWeight(400),
            fontSize = 14.sp,
        )
    },
    trailingIcon = {
        IconButton(onClick = { calendarState.show() }) {
            Icon(
                painter = painterResource(R.drawable.dateicon),
                contentDescription = null,
                Modifier.size(32.dp)
            )
        }
    },
    label = {
        Text(
            text = stringResource(R.string.enter_DoB)
        )
    },
)