一、概念

一般是以对话框的形式呼出，DatePickerDialog 就是对 DatePicker 的一个简单对话框封装。

@Composable
fun DatePicker(
    state: DatePickerState,
    modifier: Modifier = Modifier,
    dateFormatter: DatePickerFormatter = remember { DatePickerFormatter() },
    dateValidator: (Long) -> Boolean = { true },
    title: (@Composable () -> Unit)? = {
        DatePickerDefaults.DatePickerTitle(
            state,
            modifier = Modifier.padding(DatePickerTitlePadding)
        )
    },
    headline: (@Composable () -> Unit)? = {
        DatePickerDefaults.DatePickerHeadline(
            state,
            dateFormatter,
            modifier = Modifier.padding(DatePickerHeadlinePadding)
        )
    },
    showModeToggle: Boolean = true,
    colors: DatePickerColors = DatePickerDefaults.colors(

        todayDateBorderColor = Color.Red        //默认选中的当天日期的边框色

        selectedDayContentColor = Color.Red        //选中的文字颜色

        selectedDayContainerColor  = Color.Red        //选中的填充颜色

    )
)

@Composable
fun DatePickerDialog(
    onDismissRequest: () -> Unit,        //关闭对话框回调
    confirmButton: @Composable () -> Unit,        //确认按钮
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,        //取消按钮
    shape: Shape = DatePickerDefaults.shape,
    tonalElevation: Dp = DatePickerDefaults.TonalElevation,
    colors: DatePickerColors = DatePickerDefaults.colors(),
    properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false),        //对话框配置，详见Dialog
    content: @Composable ColumnScope.() -> Unit        //传入一个DatePicker
)

输入模式选择模式

二、基本使用

2.1 获取状态

2.1.1 单个日期选择 rememberDatePickerState()

@Composable
fun rememberDatePickerState(
    @Suppress("AutoBoxing") initialSelectedDateMillis: Long? = null,        //默认选中的日期
    @Suppress("AutoBoxing") initialDisplayedMonthMillis: Long? = initialSelectedDateMillis,        //默认显示的月份
    yearRange: IntRange = DatePickerDefaults.YearRange,        //限制选择的年份范围，如 2000..2100
    initialDisplayMode: DisplayMode = DisplayMode.Picker        //选择模式Picker、输入模式Input
): DatePickerState 

2.1.2 范围日期选择 rememberDateRangePickerState()

@Composable
fun rememberDateRangePickerState(
    @Suppress("AutoBoxing") initialSelectedStartDateMillis: Long? = null,        //起始日期
    @Suppress("AutoBoxing") initialSelectedEndDateMillis: Long? = null,        //结束日期
    @Suppress("AutoBoxing") initialDisplayedMonthMillis: Long? =
        initialSelectedStartDateMillis,        //默认显示的月份（如果起始日期没指定就默认是当月）
    yearRange: IntRange = DatePickerDefaults.YearRange,        //允许选择的年份，如 2000..2100
    initialDisplayMode: DisplayMode = DisplayMode.Picker        //选择模式Picker、输入模式Input
): DateRangePickerState

2.1.3 自定义可选择日期 selectableDates

Compose Material3 1.2.0-alpha02 及其以上版本，提供了一个 selectableDates 参数，可以在其中完全自定义可以选择的日期。

val datePickerState = rememberDatePickerState(
        selectableDates = object : SelectableDates {
            // 禁止选择周末（周六和周日）
            override fun isSelectableDate(utcTimeMillis: Long): Boolean {
                return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                    val dayOfWeek = Instant.ofEpochMilli(utcTimeMillis).atZone(ZoneId.of("UTC"))
                        .toLocalDate().dayOfWeek
                    dayOfWeek != DayOfWeek.SUNDAY && dayOfWeek != DayOfWeek.SATURDAY
                } else {
                    val calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"))
                    calendar.timeInMillis = utcTimeMillis
                    calendar[Calendar.DAY_OF_WEEK] != Calendar.SUNDAY &&
                            calendar[Calendar.DAY_OF_WEEK] != Calendar.SATURDAY
                }
            }

            // 只允许选择2023年以前
            override fun isSelectableYear(year: Int): Boolean {
                return year > 2022
            }
        }
    )

2.2 DatePicker

val datePickerState = rememberDatePickerState()
DatePicker(state = datePickerState)
Text("当前选中日期的时间戳 ${datePickerState.selectedDateMillis ?: "没有选择"}")

2.3 DatePickerDialog

var isOpenDialog by remember { mutableStateOf(false) }
val datePickerState = rememberDatePickerState()
val sdf = remember { SimpleDateFormat("yyy-MM-dd") }

if (isOpenDialog) {
    DatePickerDialog(
        onDismissRequest = { isOpenDialog = false},
        colors = DatePickerDefaults.colors(containerColor = AppColors.White),   //背景色（这个在下面的DatePicker中设置无效）
        confirmButton = {
            Text(
                modifier = Modifier
                    .clickableNoRipple {
                        //拿到的是时间戳，需要格式化
                        val date = datePickerState.selectedDateMillis
                        if (date != null) {
                            onValueChange(sdf.format(date))
                            isDefaultValue = false
                        }
                        isOpenDialog = false
                    },
                text = "确定",
            )
        },
        dismissButton = {
            Text(
                modifier = Modifier.clickableNoRipple { isOpenDialog = false },
                text = "取消"
            )
        }
    ) {
        DatePicker(
            state = datePickerState,
            colors = DatePickerDefaults.colors(
                todayDateBorderColor = AppColors.Primary,   //默认选中的当天日期的边框色
                selectedDayContentColor = AppColors.White,  //选中的文字颜色
                selectedDayContainerColor = AppColors.Primary,  //选中的填充颜色
            )
        )
    }
}

三、封装

3.1 单按钮时间选择对话框

​

@Preview
@Composable
private fun SingleButtonDatePickerPreView() {
    var value by remember { mutableStateOf("选择时间") }
        SingleButtonDatePickerView(
            value = value,
            onValueChange = { value = it },
        )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SingleButtonDatePickerView(
    modifier: Modifier = Modifier,
    value: String = "选择时间",
    onValueChange: (String) -> Unit,
    borderColor: Color = AppColors.Hint,
) {
    var isOpenDialog by remember { mutableStateOf(false) }
    var isDefaultValue by remember { mutableStateOf(true) }
    val datePickerState = rememberDatePickerState()
    val sdf = remember { SimpleDateFormat("yyy-MM-dd") }
    Row(
        modifier = modifier
            .height(AppDimens.heightButton)
            .border(
                width = 1.dp,
                color = borderColor,
                shape = RoundedCornerShape(AppDimens.radius)
            )
            .padding(horizontal = AppDimens.paddingContent)
            .clickableNoRipple { isOpenDialog = true },
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            text = value,
            maxLines = 1,
            color = if(isDefaultValue) AppColors.Hint else AppColors.Black,
            fontSize = AppDimens.textPrimary,
        )
        Icon(
            modifier = Modifier.padding(start = 5.dp),
            imageVector = Icons.Default.CalendarMonth,
            contentDescription = null,
            tint = AppColors.Hint
        )
    }
    if (isOpenDialog) {
        DatePickerDialog(
            onDismissRequest = { isOpenDialog = false},
            colors = DatePickerDefaults.colors(containerColor = AppColors.White),   //背景色（这个在下面的DatePicker中设置无效）
            confirmButton = {
                Text(
                    modifier = Modifier
                        .clickableNoRipple {
                            val date = datePickerState.selectedDateMillis
                            if (date != null) {
                                onValueChange(sdf.format(date))
                                isDefaultValue = false
                            } else {
                                isDefaultValue = true
                            }
                            isOpenDialog = false
                        }
                        .padding(end = 20.dp),
                    text = "确定",
                    color = AppColors.Primary,
                    fontSize = AppDimens.textTitle
                )
            },
            dismissButton = {
                Text(
                    modifier = Modifier
                        .clickableNoRipple {
                            isOpenDialog = false
                        }
                        .padding(end = 20.dp),
                    text = "取消",
                    color = AppColors.textGray,
                    fontSize = AppDimens.textTitle
                )
            }
        ) {
            DatePicker(
                state = datePickerState,
                colors = DatePickerDefaults.colors(
                    todayDateBorderColor = AppColors.Primary,   //默认选中的当天日期的边框色
                    selectedDayContentColor = AppColors.White,  //选中的文字颜色
                    selectedDayContainerColor = AppColors.Primary,  //选中的填充颜色
                )
            )
        }
    }
}

3.2 双按钮时间选择对话框

​

@Preview
@Composable
private fun TwoButtonDatePickerPreview() {
    var startDate by remember { mutableStateOf("开始时间") }
    var endDate by remember { mutableStateOf("结束时间") }
        TwoButtonDatePickerView(
            startDate = startDate,
            endDate = endDate,
            onStartChange = { startDate = it },
            onEndChange = { endDate = it },
        )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TwoButtonDatePickerView(
    modifier: Modifier = Modifier,
    startDate: String = "开始时间",
    endDate: String = "结束时间",
    onStartChange: (String) -> Unit,
    onEndChange: (String) -> Unit,
    borderColor: Color = AppColors.Hint,
) {
    var isOpenStartDialog by remember { mutableStateOf(false) }
    var isOpenEndDialog by remember { mutableStateOf(false) }
    val startDatePickerState = rememberDatePickerState()
    val endDatePickerState = rememberDatePickerState()
    var isStartDateDefault by remember { mutableStateOf(true) }
    var isEndDateDefault by remember { mutableStateOf(true) }
    val sdf = remember { SimpleDateFormat("yyy-MM-dd") }
    Row(
        modifier = modifier
            .height(AppDimens.heightButton)
            .border(
                width = 1.dp,
                color = borderColor,
                shape = RoundedCornerShape(AppDimens.radius)
            )
            .padding(horizontal = AppDimens.paddingContent),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            modifier = Modifier.clickableNoRipple { isOpenStartDialog = true },
            text = startDate,
            color = if (isStartDateDefault) AppColors.Hint else AppColors.Black,
            maxLines = 1,
            fontSize = AppDimens.textPrimary
        )
        Icon(
            modifier = Modifier
                .size(25.dp)
                .padding(horizontal = 5.dp),
            painter = painterResource(id = R.drawable.icon_arrow_right),
            contentDescription = null,
            tint = AppColors.Hint
        )
        Text(
            modifier = Modifier.clickableNoRipple { isOpenEndDialog = true },
            text = endDate,
            color = if (isEndDateDefault) AppColors.Hint else AppColors.Black,
            maxLines = 1,
            fontSize = AppDimens.textPrimary
        )
        Icon(
            modifier = Modifier.padding(start = 5.dp),
            imageVector = Icons.Default.CalendarMonth,
            contentDescription = null,
            tint = AppColors.Hint
        )
    }
    if (isOpenStartDialog) {
        DatePickerDialog(
            onDismissRequest = { isOpenStartDialog = false},
            colors = DatePickerDefaults.colors(containerColor = AppColors.White),
            confirmButton = {
                Text(
                    modifier = Modifier
                        .clickableNoRipple {
                            val date = startDatePickerState.selectedDateMillis
                            if (date != null) {
                                onStartChange(sdf.format(date))
                                isStartDateDefault = false
                            } else {
                                isStartDateDefault = true
                            }
                            isOpenStartDialog = false
                        }
                        .padding(end = 20.dp),
                    text = "确定",
                    color = AppColors.Primary,
                    fontSize = AppDimens.textTitle
                )
            },
            dismissButton = {
                Text(
                    modifier = Modifier
                        .clickableNoRipple {
                            isOpenStartDialog = false
                        }
                        .padding(end = 20.dp),
                    text = "取消",
                    color = AppColors.textGray,
                    fontSize = AppDimens.textTitle
                )
            }
        ) {
            DatePicker(
                state = startDatePickerState,
                colors = DatePickerDefaults.colors(
                    todayDateBorderColor = AppColors.Primary,
                    selectedDayContentColor = AppColors.White,
                    selectedDayContainerColor = AppColors.Primary,
                )
            )
        }
    }
    if (isOpenEndDialog) {
        DatePickerDialog(
            onDismissRequest = { isOpenEndDialog = false},
            colors = DatePickerDefaults.colors(containerColor = AppColors.White),
            confirmButton = {
                Text(
                    modifier = Modifier
                        .clickableNoRipple {
                            val date = endDatePickerState.selectedDateMillis
                            if (date != null) {
                                onEndChange(sdf.format(date))
                                isEndDateDefault = false
                            } else {
                                isEndDateDefault = true
                            }
                            isOpenEndDialog = false
                        }
                        .padding(end = 20.dp),
                    text = "确定",
                    color = AppColors.Primary,
                    fontSize = AppDimens.textTitle
                )
            },
            dismissButton = {
                Text(
                    modifier = Modifier
                        .clickableNoRipple {
                            isOpenEndDialog = false
                        }
                        .padding(end = 20.dp),
                    text = "取消",
                    color = AppColors.textGray,
                    fontSize = AppDimens.textTitle
                )
            }
        ) {
            DatePicker(
                state = endDatePickerState,
                colors = DatePickerDefaults.colors(
                    containerColor = AppColors.White,
                    todayDateBorderColor = AppColors.Primary,
                    selectedDayContentColor = AppColors.White,
                    selectedDayContainerColor = AppColors.Primary,
                )
            )
        }
    }
}
# android
GitHub 加速计划 / compose / compose
33.27 K
5.15 K
下载
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具，通过Compose文件格式简化应用部署过程。
最近提交(Master分支：2 个月前 )
501b5acd Add `jhrotko` to Core Maintainers. Signed-off-by: Laura Brehm <laurabrehm@hey.com> 5 天前
f51bc4cd Signed-off-by: Guillaume Lours <705411+glours@users.noreply.github.com> 5 天前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区