android compose DatePicker 选择日期 使用
日期选择器让用户选择日期、日期范围或两者。它们使用日历对话框或文本输入，让用户选择日期。
类型
日期选择器有三种类型：
- 停靠式：在布局中内嵌显示。它适用于紧凑型布局，在这些布局中，专用对话框可能会显得突兀。
- 模态：以对话框的形式显示，叠加在应用的内容上。这样可以明确地将焦点放在日期选择上。
- 模态输入：将文本字段与模态日期选择器相结合。
您可以使用以下可组合项在应用中实现这些日期选择器：
- DatePicker：日期选择器的通用可组合项。您使用的容器决定了它是停靠式还是模态。
- DatePickerDialog：模态和模态输入日期选择器的容器。
- DateRangePicker：适用于用户可以选择包含开始日期和结束日期的范围的任何日期选择器。
package com.wn.androidcomposedemo1.basegoogle
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.awaitEachGesture
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.waitForUpOrCancellation
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material3.Button
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.DateRangePicker
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.material3.rememberDateRangePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.input.pointer.PointerEventPass
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Popup
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale
/**
* Author : wn
* Email : maoning20080808@163.com
* Date : 2026/6/23 21:58
* Description : 日期选择器
*/
class DatePickerDemoActivity : ComponentActivity(){
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AndroidComposeDemo1Theme() {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
DatePickerExample()
}
}
}
}
@Composable
fun DatePickerExample(){
Column() {
Spacer(modifier = Modifier.height(20.dp))
Text("停靠式日期选择器")
DatePickerDocked()
Spacer(modifier = Modifier.height(20.dp))
Text("停靠式日期选择器")
DatePickerFieldToModal()
Spacer(modifier = Modifier.height(20.dp))
Text("具有范围的日期选择器")
DateRangePickerModal(
onDateRangeSelected = {(start, end) ->
Log.d("AAA", "选择日期：start = $start , end = $end")
},
onDismiss = {
Log.d("AAA", "选择日期：onDismiss ")
}
)
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerDocked(){
var showDatePicker by remember { mutableStateOf(false) }
val datePickerState = rememberDatePickerState()
val selectedDate = datePickerState.selectedDateMillis?.let {
convertMillisToDate(millis = it)
}?:""
//监听日期选择，一旦用户点击日期则关闭弹窗
LaunchedEffect(datePickerState.selectedDateMillis) {
if (datePickerState.selectedDateMillis != null) {
showDatePicker = false
}
}
Box(
modifier = Modifier.fillMaxWidth()
){
OutlinedTextField(
value = selectedDate,
onValueChange = {},
label = { Text("选择日期1") },
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
)
}
}
}
}
}
@Preview
@Composable
fun DatePickerFieldToModal(){
var selectedDate by remember { mutableStateOf<Long?>(null) }
var showModal by remember { mutableStateOf(false) }
OutlinedTextField(
value = selectedDate?.let { convertMillisToDate(it)}?:"" ,
onValueChange = {},
label = { Text("选择日期2") },
placeholder = { Text("MM/DD/YYYY")},
readOnly = true,//阻住键盘弹出
trailingIcon = {
Icon(Icons.Default.DateRange, contentDescription = "Select date")
},
modifier = Modifier
.fillMaxWidth()
.pointerInput(selectedDate) {
awaitEachGesture {
awaitFirstDown(pass = PointerEventPass.Initial)
val upEvent = waitForUpOrCancellation(pass = PointerEventPass.Initial)
if (upEvent != null) {
showModal = true
}
}
}
)
if(showModal){
DatePickerModal(
onDateSelected = {selectedDate = it},
onDismiss = {showModal = false}
)
}
}
@OptIn(ExperimentalMaterial3Api::class)
@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)
}
}
//具有范围的日期选择器
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DateRangePickerModal(
onDateRangeSelected : (Pair<Long?, Long?>) -> Unit,
onDismiss:() -> Unit
){
val dateRangePickerState = rememberDateRangePickerState()
var showDialog by remember { mutableStateOf(false) }
var resultStr by remember { mutableStateOf("") }
Button(onClick = {
showDialog = true
}) {
Text("选择日期")
}
Text(resultStr)
if(showDialog){
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(
onClick = {
showDialog = false
val dateFormat = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
val startStr = dateRangePickerState.selectedStartDateMillis?.let {
dateFormat.format(Date(it))
} ?: ""
val endStr = dateRangePickerState.selectedEndDateMillis?.let {
dateFormat.format(Date(it))
} ?: ""
resultStr = "选择日期：$startStr 到 $endStr"
onDateRangeSelected(
Pair(
dateRangePickerState.selectedStartDateMillis,
dateRangePickerState.selectedEndDateMillis
)
)
onDismiss()
}
) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = { showDialog = false }) {
Text("Cancel")
}
}
){
DateRangePicker(
state = dateRangePickerState,
title = {
Text(text = "Selecte date range")
},
showModeToggle = false,
modifier = Modifier
.fillMaxWidth()
.height(500.dp)
.padding(16.dp)
)
}
}
}
fun convertMillisToDate(millis : Long) : String{
val formatter = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
Log.d("AAA", "convertMillisToDate millis = " + millis)
return formatter.format(Date(millis))
}
}