Android DateTimePicker:一个简约、漂亮的日期时间选择器

4,703 阅读3分钟

DateTimePicker 一个简约、漂亮的日期时间选择器,支持大面积自定义UI,内置日期时间选择弹窗,基于 Google BottomSheetDialog,可直接使用。

预览

快速体验

点击下载

如何引入

Step 1. 添加 JitPack repository

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

Step 2. 添加 Gradle依赖

dependencies {
    ...
    //为了防止不必要的依赖冲突,0.0.3开始需要自行依赖google material库
    implementation 'com.google.android.material:material:1.1.0'
    //查看最新版本请前往github,仅支持androidx
    implementation 'com.github.loperSeven:DateTimePicker:0.1.0'
}

如何使用

卡片弹窗

最简单的使用方式
  CardDatePickerDialog.builder(this)
                .setTitle("SET MAX DATE")
                .setOnChoose(listener = object :CardDatePickerDialog.OnChooseListener{
                    override fun onChoose(millisecond: Long) {            
                    }
                }).build().show()
所有可配置属性
   CardDatePickerDialog.builder(context)
                .setTitle("CARD DATE PICKER DIALOG")
                .setDisplayType(displayList)
                .setBackGroundModel(model)
                .showBackNow(true)
                .setDefaultTime(defaultDate)
                .setMaxTime(maxDate)
                .setMinTime(minDate)
                .setThemeColor(color)
                .showDateLabel(true)
                .showFocusDateInfo(true)
                .setLabelText("年","月","日","时","分")
                .setOnChoose("选择",object :CardDatePickerDialog.OnChooseListener{
                    override fun onChoose(millisecond: Long) {
                    }
                })
                .setOnCancel("关闭",object :CardDatePickerDialog.OnCancelListener{
                    override fun onCancel() {
                    }
                }).build().show()

可配置属性说明

  • 设置标题
fun setTitle(value: String)
  • 是否显示回到当前按钮
fun showBackNow(b: Boolean)
  • 是否显示选中日期信息
fun showFocusDateInfo(b: Boolean)
  • 显示模式
// model 分为:CardDatePickerDialog.CARD//卡片,CardDatePickerDialog.CUBE//方形,CardDatePickerDialog.STACK//顶部圆角
// model 允许直接传入drawable资源文件id作为弹窗的背景,如示例内custom
fun setBackGroundModel(model: Int)
  • 设置主题颜色
fun setThemeColor(@ColorInt themeColor: Int)
  • 设置显示值
fun setDisplayType(vararg types: Int)
fun setDisplayType(types: MutableList<Int>)
  • 设置默认时间
fun setDefaultTime(millisecond: Long)
  • 设置范围最小值
fun setMinTime(millisecond: Long)
  • 设置范围最大值
fun setMaxTime(millisecond: Long)
  • 是否显示单位标签
fun showDateLabel(b: Boolean)
  • 设置标签文字
/**
*示例
*setLabelText("年","月","日","时","分")
*setLabelText("年","月","日","时")
*setLabelText(month="月",hour="时")
*/
fun setLabelText(year:String=yearLabel,month:String=monthLabel,day:String=dayLabel,hour:String=hourLabel,min:String=minLabel)
  • 绑定选择监听
/**
*示例
*setOnChoose("确定")
*setOnChoose(listener = object :CardDatePickerDialog.OnChooseListener{
                    override fun onChoose(millisecond: Long) {
                    }
                })
*setOnChoose("确定",object :CardDatePickerDialog.OnChooseListener{
                    override fun onChoose(millisecond: Long) {
                    }
                })
*/
fun setOnChoose(text: String = "确定", listener: OnChooseListener?=null)
  • 绑定取消监听
/**
*示例
*setOnCancel("取消")
*setOnCancel(listener = object :CardDatePickerDialog.OnCancelListener{
                  override fun onCancel() {
                    }
                })
*setOnCancel("取消",object :CardDatePickerDialog.OnCancelListener{
                    override fun onCancel() {
                    }
                })
*/
fun setOnCancel(text: String = "取消", listener: OnCancelListener?=null)

日期时间选择控件

xml中
        <com.loper7.date_time_picker.DateTimePicker
            android:id="@+id/dateTimePicker"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:showLabel="true"
            app:textSize="16sp"
            app:themeColor="#FF8080" />
代码中
  • 设置监听
       dateTimePicker.setOnDateTimeChangedListener(object :DateTimePicker.OnDateTimeChangedListener{
            override fun onDateTimeChanged(view: DateTimePicker?, millisecond: Long) {
            }
        })

以上为最简单的使用方式

更多设置
  • 设置显示状态

DateTimePicker支持显示 年月日时分 五个选项的任意组合,显示顺序以此为年、月、日、时、分,setDisplayType中可无序设置。

     dateTimePicker.setDisplayType(intArrayOf(
            DateTimePicker.YEAR,//显示年
            DateTimePicker.MONTH,//显示月
            DateTimePicker.DAY,//显示日
            DateTimePicker.HOUR,//显示时
            DateTimePicker.MIN))//显示分
  • 设置默认选中时间
 dateTimePicker.setDefaultMillisecond(defaultMillisecond)//defaultMillisecond 为毫秒时间戳
  • 设置允许选择的最小时间
  dateTimePicker.setMinMillisecond(minMillisecond)
  • 设置允许选择的最大时间
  dateTimePicker.setMaxMillisecond(maxMillisecond)
  • 是否显示label标签(选中栏 年月日时分汉字)
  dateTimePicker.showLabel(true)
  • 设置主题颜色
  dateTimePicker.setThemeColor(ContextCompat.getColor(context,R.color.colorPrimary))
  • 设置字体大小

设置的字体大小为选中栏的字体大小,预览字体会根据字体大小等比缩放

  dateTimePicker.setTextSize(15)//单位为sp
  • 设置标签文字
  //全部
  dateTimePicker.setLabelText(" Y"," M"," D"," Hr"," Min")
  //指定
  dateTimePicker.setLabelText(min = "M")

Github

更多详细属性可前往Github查看,也可以通过isuess提出你的问题,让我们共同优化DateTimePicker。