날짜 선택도구를 통해 사용자는 날짜, 기간 또는 둘 다를 선택할 수 있습니다. 이러한 모델은 캘린더 대화상자나 텍스트 입력을 통해 사용자가 날짜를 선택할 수 있습니다.
유형
날짜 선택 도구에는 세 가지 유형이 있습니다.
- 도킹됨: 레이아웃 내에서 인라인으로 표시됩니다. 소형 기기에 적합합니다. 사용하지 않는 것이 좋습니다.
- 모달: 앱 콘텐츠에 오버레이되는 대화상자로 표시됩니다. 이를 통해 날짜 선택에 초점 맞추기
- 모달 입력: 텍스트 필드와 모달 날짜 선택 도구를 결합합니다.
다음을 사용하여 앱에서 이러한 날짜 선택 도구를 구현할 수 있습니다. 구성 가능한 함수:
DatePicker: 날짜 선택 도구의 일반 컴포저블입니다. 컨테이너는 도킹인지 모델인지를 결정합니다.DatePickerDialog: 모달 및 모달 입력 날짜의 컨테이너입니다. 선택 도구를 사용합니다.DateRangePicker: 사용자가 날짜를 선택할 수 있는 날짜 선택 도구에 사용 시작일과 종료일로 범위를 지정합니다.
상태
다양한 날짜 선택 도구 컴포저블이 공유하는 주요 매개변수는 다음과 같습니다.
state - DatePickerState 또는
DateRangePickerState 객체 이들은 그들의 속성에 대해
날짜 선택 도구를 사용하여 사용자가 선택한 날짜(예: 현재 선택된 날짜)
선택한 날짜를 활용하는 방법에 대한 자세한 내용은 선택한 날짜 섹션을 선택합니다.
도킹된 날짜 선택기
다음 예시에는 사용자에게 입력을 요청하는 텍스트 필드가 있습니다. 생년월일을 입력합니다 입력란에서 캘린더 아이콘을 클릭하면 입력 필드 아래에 고정 날짜 선택 도구가 있습니다.
@Composable
fun DatePickerDocked() {
var showDatePicker by remember { mutableStateOf(false) }
val datePickerState = rememberDatePickerState()
val selectedDate = datePickerState.selectedDateMillis?.let {
convertMillisToDate(it)
} ?: ""
Box(
modifier = Modifier.fillMaxWidth()
) {
OutlinedTextField(
value = selectedDate,
onValueChange = { },
label = { Text("DOB") },
readOnly = true,
trailingIcon = {
IconButton(onClick = { showDatePicker = !showDatePicker }) {
Icon(
imageVector = Icons.Default.DateRange,
contentDescription = "Select date"
)
}
},
modifier = Modifier
.fillMaxWidth()
.height(64.dp)
)
if (showDatePicker) {
Popup(
onDismissRequest = { showDatePicker = false },
alignment = Alignment.TopStart
) {
Box(
modifier = Modifier
.fillMaxWidth()
.offset(y = 64.dp)
.shadow(elevation = 4.dp)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp)
) {
DatePicker(
state = datePickerState,
showModeToggle = false
)
}
}
}
}
}
fun convertMillisToDate(millis: Long): String {
val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
return formatter.format(Date(millis))
}
코드에 대한 핵심 사항
- 사용자가
IconButton를 클릭하면 날짜 선택 도구가 표시됩니다.- 아이콘 버튼은
OutlinedTextField의 인수 역할을 합니다.trailingIcon매개변수 showDatePicker상태 변수는 고정 날짜 선택도구를 사용합니다.
- 아이콘 버튼은
- 날짜 선택 도구의 컨테이너는
Popup컴포저블이며, 이 컴포저블은 새 콘텐츠를 생성할 수 있습니다. selectedDate는DatePickerState객체를 사용하고convertMillisToDate를 사용하여 형식을 지정합니다. 함수를 사용하세요.- 선택한 날짜가 텍스트 필드에 표시됩니다.
- 고정 날짜 선택 도구는
offset를 사용하여 텍스트 필드 아래에 배치됩니다. 특수키를 사용합니다. Box는 텍스트를 적절하게 레이어링할 수 있는 루트 컨테이너로 사용됩니다. 필드 및 날짜 선택 도구가 있습니다.
결과
캘린더 아이콘을 클릭하면 이 구현은 다음과 같이 표시됩니다.
모달 날짜 선택 도구
모달 날짜 선택 도구에 화면에 떠 있는 대화상자가 표시됩니다. 구현 방법
DatePickerDialog를 만들어 DatePicker에 전달합니다.
@Composable
fun DatePickerModal(
onDateSelected: (Long?) -> Unit,
onDismiss: () -> Unit
) {
val datePickerState = rememberDatePickerState()
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(onClick = {
onDateSelected(datePickerState.selectedDateMillis)
onDismiss()
}) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("Cancel")
}
}
) {
DatePicker(state = datePickerState)
}
}
코드에 대한 핵심 사항
- 구성 가능한
DatePickerModal함수는 모달 날짜 선택 도구를 표시합니다. onDateSelected람다 표현식은 사용자가 있습니다.- 선택한 날짜를 상위 컴포저블에 노출합니다.
onDismiss람다 표현식은 사용자가 대화상자
결과
이 구현은 다음과 같이 표시됩니다.
입력 모달 날짜 선택 도구
입력이 있는 모달 날짜 선택 도구는 화면 위에 떠 있는 대화상자를 표시하고 사용자가 날짜를 입력할 수 있습니다.
@Composable
fun DatePickerModalInput(
onDateSelected: (Long?) -> Unit,
onDismiss: () -> Unit
) {
val datePickerState = rememberDatePickerState(initialDisplayMode = DisplayMode.Input)
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(onClick = {
onDateSelected(datePickerState.selectedDateMillis)
onDismiss()
}) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("Cancel")
}
}
) {
DatePicker(state = datePickerState)
}
}
코드에 대한 핵심 사항
이는 모달 날짜 선택 도구의 예와 매우 유사합니다. 기본 차이점은 다음과 같습니다.
initialDisplayMode매개변수는 초기 표시 모드를 다음과 같이 설정합니다.DisplayMode.Input입니다.
</ph>
기간이 있는 날짜 선택 도구
사용자가 시작일 사이의 범위를 선택할 수 있는 날짜 선택 도구를 만들 수 있습니다.
지정할 수 있습니다 이렇게 하려면 DateRangePicker를 사용합니다.
DateRangePicker의 사용은 기본적으로 DatePicker와 동일합니다. 다음과 같은 작업을 할 수 있습니다.
고정된 선택 도구에 PopUp의 하위 요소로 사용하거나
모달 선택 도구를 선택하고 이를 DatePickerDialog에 전달합니다. 가장 큰 차이점은
DatePickerState 대신 DateRangePickerState를 사용합니다.
다음 스니펫은 모달 날짜 선택 도구를 만드는 방법을 보여줍니다. 범위:
@Composable
fun DateRangePickerModal(
onDateRangeSelected: (Pair<Long?, Long?>) -> Unit,
onDismiss: () -> Unit
) {
val dateRangePickerState = rememberDateRangePickerState()
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(
onClick = {
onDateRangeSelected(
Pair(
dateRangePickerState.selectedStartDateMillis,
dateRangePickerState.selectedEndDateMillis
)
)
onDismiss()
}
) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("Cancel")
}
}
) {
DateRangePicker(
state = dateRangePickerState,
title = {
Text(
text = "Select date range"
)
},
showModeToggle = false,
modifier = Modifier
.fillMaxWidth()
.height(500.dp)
.padding(16.dp)
)
}
}
코드에 대한 핵심 사항
onDateRangeSelected매개변수는 선택한 시작일과 종료일을 나타내는Pair<Long?, Long?>입니다. 이 상위 컴포저블에 선택한 범위에 대한 액세스 권한을 부여합니다.rememberDateRangePickerState()는 기간의 상태를 생성합니다. 선택 도구를 클릭합니다.DatePickerDialog는 모달 대화상자 컨테이너를 만듭니다.- 확인 버튼의
onClick핸들러에서onDateRangeSelected가 위로 전달 선택한 범위를 상위 컴포저블에 추가합니다. DateRangePicker컴포저블은 대화상자 콘텐츠 역할을 합니다.
결과
이 구현은 다음과 같이 표시됩니다.
선택한 날짜 사용
선택한 날짜를 캡처하려면 상위 컴포저블에서 Long로 추적하고
값을 onDateSelected의 DatePicker에 전달합니다. 다음 스니펫
스니펫 앱을 사용하는 것이 좋습니다.
// ...
var selectedDate by remember { mutableStateOf<Long?>(null) }
// ...
if (selectedDate != null) {
val date = Date(selectedDate!!)
val formattedDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(date)
Text("Selected date: $formattedDate")
} else {
Text("No date selected")
}
// ...
DatePickerModal(
onDateSelected = {
selectedDate = it
showModal = false
},
onDismiss = { showModal = false }
)
}
// ...
기간 날짜 선택 도구에도 기본적으로 동일하게 적용되지만
Pair<Long?, Long?> 또는 데이터 클래스를 사용하여 시작 값과 끝 값을 캡처합니다.