Compose笔记(二十六)--DatePicker

这一节主要了解一下Compose中的DatePicker,DatePicker是一个用于选择日期的组件，它提供了直观的界面让用户可以通过日历视图或直接输入来选择年、月、日。我们在开发中时常会用到日期选择器，简单总结如下:

API:

DatePickerDialog

onDismissRequest：当用户想要关闭对话框时会触发这个回调函数。

confirmButton：用于定义对话框中确认按钮的 UI 和行为。

dismissButton：用于定义对话框中取消按钮的 UI 和行为。

modifier：可对对话框的布局和外观进行修改。

shape：能设置对话框的形状，例如圆角。

backgroundColor：可设置对话框的背景颜色。

contentColor：能设置对话框内容的颜色。

DatePicker

state：用于管理 DatePicker 的状态，像选中的日期、显示模式等都由它管理。

showMode：可设置日期选择的显示模式，有Calendar（日历模式）和Input（输入模式）两种。

modifier：可对 DatePicker 的布局和外观进行修改。

yearsRange：用于设置可选择的年份范围。

initialDateMillis：能设置 DatePicker 初始显示的日期。

onDateSelected：当用户选择日期时会触发这个回调函数。

colors：可自定义 DatePicker 的颜色，例如选中日期的颜色、标题的颜色等。

栗子:

Kotlin 复制代码

import androidx.compose.material3.Button
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleDatePickerExample() {
    val context = LocalContext.current
    val datePickerState = rememberDatePickerState()
    val showDatePicker = remember { mutableStateOf(false) }
    val selectedDate = remember { mutableStateOf("") }

    Button(onClick = { showDatePicker.value = true }) {
        Text("选择日期")
    }

    if (selectedDate.value.isNotEmpty()) {
        Text("已选择日期: ${selectedDate.value}")
    }

    if (showDatePicker.value) {
        DatePickerDialog(
            onDismissRequest = { showDatePicker.value = false },
            confirmButton = {
                TextButton(
                    onClick = {
                        val formatter = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
                        selectedDate.value = datePickerState.selectedDateMillis?.let {
                            formatter.format(Date(it))
                        } ?: "未选择日期"
                        showDatePicker.value = false
                    }
                ) {
                    Text("确定")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = { showDatePicker.value = false }
                ) {
                    Text("取消")
                }
            }
        ) {
            DatePicker(state = datePickerState)
        }
    }
}

Kotlin 复制代码

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.SelectableDates
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.DialogProperties
import java.text.SimpleDateFormat
import java.util.Calendar
import java.util.Date
import java.util.Locale

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerExample() {
    var showDatePicker by remember { mutableStateOf(false) }
//    val datePickerState = rememberDatePickerState()
    val selectedDateText = remember { mutableStateOf("") }

    
    val today = remember {
        val calendar = Calendar.getInstance()
        calendar.set(Calendar.HOUR_OF_DAY, 0)
        calendar.set(Calendar.MINUTE, 0)
        calendar.set(Calendar.SECOND, 0)
        calendar.set(Calendar.MILLISECOND, 0)
        calendar.timeInMillis
    }

    
    val datePickerState = rememberDatePickerState(
        initialSelectedDateMillis = today,
        selectableDates = object : SelectableDates {
            override fun isSelectableDate(utcTimeMillis: Long): Boolean {
                return utcTimeMillis >= today
            }

            
            override fun isSelectableYear(year: Int): Boolean {
                val currentYear = Calendar.getInstance().get(Calendar.YEAR)
                return year >= currentYear && year <= currentYear + 10 // 未来10年
            }
        }
    )

    Column(Modifier.padding(16.dp)) {
        // 显示选中的日期
        Text(
            text = if (selectedDateText.value.isNotEmpty()) {
                "选中的日期: ${selectedDateText.value}"
            } else {
                "请选择日期"
            },
            modifier = Modifier.padding(bottom = 16.dp)
        )

        // 触发日期选择器的按钮
        Button(onClick = { showDatePicker = true }) {
            Text("选择日期")
        }

        if (showDatePicker) {
               DatePickerDialog(
                   onDismissRequest = { showDatePicker = false },
                   confirmButton = {
                       Button(
                           onClick = {
                               val selectedDate = datePickerState.selectedDateMillis
                               if (selectedDate != null) {
                                   selectedDateText.value = formatDate(selectedDate)
                               }
                               showDatePicker = false
                           }
                           , modifier = Modifier.wrapContentSize()
                       ) {
                           Text("确定")
                       }
                   },
                   modifier = Modifier
                   ,dismissButton = {
                       TextButton(onClick = { showDatePicker = false }
                       , modifier = Modifier.wrapContentSize()) {
                           Text("取消")
                       }
                   }
                   , properties = DialogProperties(usePlatformDefaultWidth = false)
               )
               {

                   DatePicker(state = datePickerState,
                       modifier = Modifier
                           .fillMaxWidth()
                       , showModeToggle = false)
               }
           }
    }
}

// 日期格式化工具方法
private fun formatDate(timestamp: Long): String {
    val date = Date(timestamp)
    return SimpleDateFormat("yyyy-MM-dd", Locale.getDefault()).format(date)
}

注意:

日期格式与本地化处理

DatePickerState.selectedDateMillis获取的是时间戳，需手动转换为可读格式（如 "YYYY-MM-DD"）。