Android DateTimePicker：一個簡約、漂亮的日期時間選擇器

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()
           

可配置屬性說明

• 設定标題

• 是否顯示回到目前按鈕

• 是否顯示選中日期資訊

• 顯示模式

// model 分為：CardDatePickerDialog.CARD//卡片,CardDatePickerDialog.CUBE//方形,CardDatePickerDialog.STACK//頂部圓角
// model 允許直接傳入drawable資源檔案id作為彈窗的背景，如示例内custom
fun setBackGroundModel(model: Int)
           

• 設定主題顔色

• 設定顯示值

• 設定預設時間

• 設定範圍最小值

• 設定範圍最大值

• 是否顯示機關标簽

• 設定标簽文字

/**
*示例
*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))//顯示分
           

• 設定預設選中時間

• 設定允許選擇的最小時間

• 設定允許選擇的最大時間

• 是否顯示label标簽（選中欄 年月日時分漢字）

• 設定主題顔色

• 設定字型大小

設定的字型大小為選中欄的字型大小，預覽字型會根據字型大小等比縮放

• 設定标簽文字

//全部
  dateTimePicker.setLabelText(" Y"," M"," D"," Hr"," Min")
  //指定
  dateTimePicker.setLabelText(min = "M")
           

Github

更多詳細屬性可前往Github檢視，也可以通過isuess提出你的問題，讓我們共同優化DateTimePicker。