DatePicker Dialog

1. 달력 아이콘을 클릭하면 날짜 피커가 열리고, 선택한 날짜값으로 화면에 보여주려고 한다.

2. 먼저 텍스트필드 끝부분에 달력 아이콘을 넣어준다.

OutlinedTextField(
...
        trailingIcon = {
            if (index == 2) {
                IconButton(onClick = { onDatePicker() }) {
                    Icon(
                        imageVector = Icons.Filled.DateRange,
                        contentDescription = "DateRange"
                    )
                }
            }
        }
    )

3. 아이콘이 클릭되면 저장해두었던 피커 상태를 변경해서 피커가 보이게 해주었다.

    Scaffold(...) {
        ...
        Column(...) {
        	...
            // text field
            for (i in inputDataList.indices) {
                InputDataTextField(
					...
                    onDatePicker = {
                        if (i == 2) {
                            addViewModel.changeDatePickerState()
                        }
                    }
                )
            }
        }
        ...
        // DatePicker
        if (addViewModel.isShowDatePicker.value) {
            CustomDatePickerDialog(
                selectedDate = "20241008",
                onCancel = { addViewModel.changeDatePickerState() },
                onConfirm = {
                    addViewModel.changeDatePickerState()
                    addViewModel.setGift(2, value = it)
                }
            )
        }
    }

4. 커스텀한 DatePicker Dialog 소스다. onConfirm(yyyyMMdd) 으로 선택된 날짜값을 넘겨준다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomDatePickerDialog(
    selectedDate: String?,
    onCancel: () -> Unit,
    onConfirm: (String) -> Unit
) {
    DatePickerDialog(
        onDismissRequest = { },
        confirmButton = { },
        colors = DatePickerDefaults.colors(
            containerColor = Color.White
        ),
        shape = RoundedCornerShape(5.dp)
    ) {
        val datePickerState = rememberDatePickerState(
            initialDisplayMode = DisplayMode.Picker,
            initialSelectedDateMillis = selectedDate?.let {
                val formatter = SimpleDateFormat("yyyyMMdd", Locale.getDefault()).apply {
                    timeZone = TimeZone.getTimeZone("UTC")
                }
                formatter.parse(it)?.time ?: System.currentTimeMillis()
            } ?: System.currentTimeMillis(),
        )

        DatePicker(state = datePickerState)

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
        ) {
            Button(onClick = {
                onCancel()
            }) {
                Text(text = stringResource(id = R.string.btn_cancel))
            }

            Spacer(modifier = Modifier.width(5.dp))

            Button(onClick = {
                datePickerState.selectedDateMillis?.let { selectedDateMillis ->
                    val yyyyMMdd = SimpleDateFormat(
                        "yyyyMMdd",
                        Locale.getDefault()
                    ).format(Date(selectedDateMillis))
                    onConfirm(yyyyMMdd)
                }
            }) {
                Text(text = stringResource(id = R.string.btn_confirm))
            }
        }
    }
}

https://dev-inventory.com/30