Compose 可组合项 - 日期选择 DatePicker、DatePickerDialog

已于 2024-06-18 14:46:09 修改
阅读量1k 收藏 18
点赞数 16
分类专栏： Compose 文章标签： android
于 2024-06-17 17:43:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HugMua/article/details/139748901
版权

一、概念

一般是以对话框的形式呼出，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,
                )
            )
        }
    }
}
Jomurphys
关注
  • 16
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android Compose日期选择器
fanketly的博客
12-18 2685
由于官方还没有推出日期选择器，我们只能自己制作，或者通过AndoirdView和DatePickerDialog。 下面是我自己制作的一个Compose日期选择器，以下都只能用作学习，还达不到项目使用需要的效果。 将JitPack存储库添加到您的构建文件中(项目根目录下build.gradle文件) allprojects { repositories { … maven { url ‘https://jitpack.io’ } } } 添加依赖项 dependencies { implementation
Compose-时间选择器
孟老板的博客
07-04 1808
Compose: 时间选择器;DatePicker,TimePicker.
Jetpack Compose Material3 组件之 DatePicker（日期选择）
sinat_17133389的博客
06-19 1992
本文只是简要介绍了关于 Compsoe Material3 中关于日期选择的基本使用方法，更多的使用方法还需要读者自行探索。可以看到，Compose 的官方组件已经越来越多，越来越趋向于成熟。相较于正式版刚发布没多久时的什么东西都没有，什么都需要自己造轮子的状态，现在几乎已经涵盖了我们开发中常用到的各种控件和需求了。
在 Jetpack Compose 中使用DatePicker
江小白的博客
07-10 647
然而，你可以通过使用 Material Compose 组件创建一个自定义的 DatePicker 对话框。这个函数接收三个参数：一个布尔值表示对话框是否可见，一个关闭对话框的函数，以及一个日期选择后的回调函数。是 Java 8 新引入的时间 API 中的方法，用于创建一个新的日期实例。它接收三个参数：年、月、日，都是整型值。如果你使用的是 ThreeTenABP 库，你应该使用。在你的代码中，你正在尝试使用选定的年份、月份和日期来创建一个。将会创建一个表示 2023 年 7 月 10 日的。
Jetpack Compose 实现的时间选择组件
C_bother_me的博客
04-21 3864
常见的时间选择组件使用Android jetpack compose 实现
高度定制的Jetpack Compose材料设计3日期与时间选择器
最新发布
gitblog_00016的博客
06-13 312
高度定制的Jetpack Compose材料设计3日期与时间选择器 项目地址:https://gitcode.com/marosseleng/compose-material3-datetime-pickers 在构建现代Android应用时，对于日期和时间选择功能的需求是不可或缺的。compose-material3-datetime-pickers是一个强大的开源库，它提供了支持Jetpack...
Android 日期选择器、日期范围选择器：MaterialDateRangePicker
Dream It Possible
04-09 1万+
一个Android Material 日期范围选择器，基于wdullaers MaterialDateTimePicker。  Credit to the original amazing material date picker library by wdullaer - https://github.com/wdullaer/MaterialDateTimePicker
你知道如何使用 Jetpack Compose构建time picker吗
虎哥LoveDroid
06-25 434
在本文中，我将向您展示如何使用 Jetpack Compose 构建 24 小时时间选择器对话框。让我们首先定义一个定时器选择器的组件，而不是仅仅对话框。这样我们就可以在应用程序的其他部分，甚至在对话框之外，都能够重复使用这个时间选择器。按下取消按钮时调用。onOk当按下 ok 按钮时调用。Time只是一个包含小时和分钟的数据类。在组件前面，我们需要定义一些变量。指示我们是否应该显示小时或分钟。存储用户选择的时间。存储用户选择的分钟。
android date 组件,Android中TimePicker与DatePicker时间日期选择组件的使用实例
weixin_42312392的博客
05-25 169
效果和代码都非常直观：实例1：TimePickerxmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"and...
Android Compose实现数字选择器
wbl9904的博客
11-13 562
好久没有写博客了，现在来写一篇关于compose的实现数字滚动选择器吧，这是因为我公司项目里面的一个组件有用到类似的功能，在刚开始的时候我也去网上查找借鉴了很多的大佬写的实现类似的功能，后面我根据大佬写的去研究了一下重新改了一下比较适合我的一个写法，也认为会比较通用的一个方法，话不多说先上成品给大家看看。写到现在感觉自己写的很粗糙，但还有很多不足之处，这篇文章也是根据前人的基础来进行完成的。如果文章阅读当中有不同的想法欢迎提出来，让我们一起进步。
Android Compose UI (一) 登录页面的编写
Cree
01-24 1569
Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发.但是需要熟悉一下新的Compose的相关控件,虽然也是文本,图片,水平,垂直,但不是LinearLayout,ImageView这些了,不过也类似,记住就行了.
Jetpack Compose之对话框和进度条
知识应该共享，创造才应收费
04-10 1067
对话框和进度条其实并无多大联系，放在一起写是因为两者的内容都不多，所以凑到一起，对话框是我们平时开发使用得比较多的组件，像隐私授权，用户点击删除时给用户提示这是一个危险操作等，进度条的使用频率也很高，比如下载文件，上传文件，处理任务时都可以使用进度条，让用户知道系统还在运行，没有死机。本文将介绍在Compose中如何使用对话框和进度条
android 之DatePicker以及TimePicker的用法
小肥猫吃鱼的博客
05-16 772
上代码：实例代码：前端界面：<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height...
daterangepicker 使用说明+参数详解
热门推荐
weixin_41981080的博客
11-20 1万+
1、序言 　　之前偶然发现，date类型的插件中daterangepicker这个无论是样式还是功能都是我比较满意的，但是唯一的不足就是官网的说明文档不是太详细，所以在这里我将有区间的datepicker和单个的datepicker做个了总结以及将它的参数做了个说明。 2、datarangepicker使用说明 2.1 有区间的datepicker 展示界面： 展示代码： &lt...
设置DatePickerDialog主题颜色及起始日期
weixin_42458965的博客
10-07 478
在使用android的原生组价DatePickerDialog的时候，它的默认颜色不好看。但是样式还可以，凑活。那怎么改变主题颜色和其实日期呢？ 这个才是重点！！！！ 然后在color里面设置主题名字和颜色就可以了！是的，就是这样！ 好的，完成！ 之后，贴上一个DatePickerDialog的使用方法的链接！不明白的可以留言询问，有问必答！ 链接： https://blog.csdn.n...
DatePickerDialog的使用
好好学习，天天向上
10-18 818
DatePickerDialog的使用。今天在做一个有关日期的功能，实现的效果是点击editText就打开选取日期界面，选好之后按确定，然后editText显示XXXX年XX月XX日的效果。 实现效果如下： 具体实现步骤如下： main.xml <TextView android:layout_width="wrap_content"
超简单的DatePickerDialog！
mafanwei的博客
04-12 676
超简单哦！需要传入一个上下文对象，还有一个EditText对象即可，可以根据自己的需要自行变成TextView等本方法将会自动开启默认样式的DatePickerDialog，并把值直接settext到传入的EditText上。仅需一行哦！是不是超简单！ public static void getDay(Context context,final EditText dateEdit){ ...
android 日期对话框,Android日期选择器对话框DatePickerDialog使用详解
weixin_33936345的博客
05-27 2218
调用Android原生日期选择器对话框就是DatePickerDialog，具体内容如下在Android4.4系统上效果如图：在Android5.0以上效果如图：1、Activity的onCreate方法中获取当时的年，月，日Calendar ca = Calendar.getInstance();mYear = ca.get(Calendar.YEAR);mMonth = ca.get(Cale...
docker-compose -f docker-compose.yaml up -d
05-22
docker-compose是Docker官方提供的一个工具，用于定义和运行多容器Docker应用程序。通过编写一个docker-compose.yml文件，您可以配置多个Docker容器及其相互之间的关系、网络等信息。使用docker-compose up命令可以一次性启动所有容器，而使用docker-compose down命令可以将它们全部停止并删除。 -f参数用来指定要使用的docker-compose文件的名称和路径，默认为当前目录下的docker-compose.yml文件。-d参数表示在后台运行容器。 所以，执行“docker-compose -f docker-compose.yaml up -d”命令，即可通过docker-compose来启动定义在docker-compose.yaml文件中的所有容器，并以后台方式运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值