DatePicker&TimePicker

Picker is a date and time picker library that supports view-based and jetpack compose UI design.

The library has many different feature options to customize your widget. Also checkout this Wheelview.

        

        

        

Jetpack Compose Usage

WheelDatePicker(
	offset =/*offset*/,
	yearsRange = IntRange(/*minYear*/,/*maxYear*/),
	startDate =/*startDate*/,
	textSize =/*textSize*/,
	selectorEffectEnabled =/*selectorEffectEnabled*/,
	darkModeEnabled =/*darkModeEnabled*/,
	onDateChanged = { day, month, year, date ->
	  /*Handle date changes*/
	}
)

Parameters

Parameter	Type	Description
offset	Int	Count of items to be shown on picker
yearsRange	IntRange	Min and max date of picker
startDate	Long	Selected date of picker by default today date
textSize	Int	Size of text on picker
selectorEffectEnabled	Boolean	Uses to enable or disable the selection effect
darkModeEnabled	Boolean	Uses to enable or disable dark mode. If you disable it, although you set display settings dark, component stay light mode
onDateSelected		Called when the values in the picker date picker are updated

WheelTimePicker(
	offset =/*offset*/,
	timeFormat = TimeFormat.CLOCK_12H,
	startTime =/*startTime*/,
	textSize =/*textSize*/,
        selectorEffectEnabled =/*selectorEffectEnabled*/, 
	darkModeEnabled =/*darkModeEnabled*/,
	onTimeChanged = { hour, minute, format ->
	  /*Handle time changes*/       
	}
)

Parameters

Parameter	Type	Description
offset	Int	Count of items to be shown on picker
timeFormat	TimeFormat	Time format of picker. TimeFormat.CLOCK_12H or TimeFormat.CLOCK_24H
startTime	Time	Selected time of picker by default current time
textSize	Int	Size of text on picker
selectorEffectEnabled	Boolean	Uses to enable or disable the selection effect
darkModeEnabled	Boolean	Uses to enable or disable dark mode. If you disable it, although you set display settings dark, component stay light mode
onTimeSelected		Called when the values in the picker date picker are updated

View Usage

NOTE: If you would like to use library on view based ui, add androidx.compose.material3 to gradle dependencies.

Date Picker

datePicker.apply {
            setOffset(/*offset*/)
            setTextSize(/*textSize*/)
            setDate(getCurrentTime())
            setDarkModeEnabled(/*darkModeEnabled*/)
            setDateChangeListener(object : DatePicker.DateChangeListener {
                override fun onDateChanged(date: Long, day: Int, month: Int, year: Int) {
                    //Handle date changes
                }
            })
        }

    <com.ozcanalasalvar.datepicker.view.datepicker.DatePicker
            android:id="@+id/datepicker"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:darkModeEnabled="true"
            app:offset="3"
            app:textSize="19" />

XML attributes

Parameter	Type	Description
offset	Int	Count of items to be shown on picker
textSize	Int	Size of text on picker
darkModeEnabled	Boolean	Uses to enable or disable dark mode. If you disable it, although you set display settings dark, component stay light mode

Popup Usage

 val datePickerPopup = DatePickerPopup.Builder()
            .from(/*context*/)
            .offset(/*offset*/)
            .textSize(/*textSize*/)
            .selectedDate(getCurrentTime())
            .darkModeEnabled(/*darkModeEnabled*/)
            .listener(object : DatePickerPopup.DateSelectListener {
                override fun onDateSelected(
                    dp: DatePicker?,
                    date: Long,
                    day: Int,
                    month: Int,
                    year: Int
                ) {

                }
            })
            .build()

datePickerPopup.show(supportFragmentManager, TAG)

Time Picker

timePicker.apply {
            setOffset(/*offset*/)
            setTextSize(/*textSize*/)
            setTimeFormat(TimeFormat.CLOCK_12H)
            setTime(/*hour*/, /*minute*/)
            setDarkModeEnabled(/*darkModeEnabled*/)
            setTimeChangeListener(object : TimePicker.TimeChangeListener {
                override fun onTimeChanged(hour: Int, minute: Int, timeFormat: String?) {
                    //Handle time changes
                }
            })
        }

<com.ozcanalasalvar.datepicker.view.timepicker.TimePicker
            android:id="@+id/timepicker"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:darkModeEnabled="true"
            app:is24HourViewEnabled="false"
            app:offset="2"
            app:textSize="17" />

XML attributes

Parameter	Type	Description
offset	Int	Count of items to be shown on picker
is24HourViewEnabled	Boolen	Time format of picker. If true TimeFormat.CLOCK_24H else TimeFormat.CLOCK_12H
textSize	Int	Size of text on picker
darkModeEnabled	Boolean	Uses to enable or disable dark mode. If you disable it, although you set display settings dark, component stay light mode

Popup Usage

val pickerPopup = TimePickerPopup.Builder()
            .from(/*context*/)
            .offset(/*offset*/)
            .textSize(/*textSize*/)
            .setTime(/*hour*/, /*minute*/)
            .setTimeFormat(TimeFormat.CLOCK_24H)
            .darkModeEnabled(/*darkModeEnabled*/)
            .listener(object : TimePickerPopup.TimeSelectListener {
                override fun onTimeSelected(
                    timePicker: TimePicker?,
                    hour: Int,
                    minute: Int,
                    format: String?
                ) {
                    
                }
            })
            .build()

pickerPopup.show(supportFragmentManager, TAG)

Implementation Gradle

Add it in your root build.gradle at the end of repositories:

dependencyResolutionManagement {
	repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
	repositories {
		mavenCentral()
		maven { url 'https://jitpack.io' }
	}
}

Add the dependency

dependencies {
	implementation 'com.github.ozcanalasalvar.picker:datepicker:2.0.7'
	implementation 'com.github.ozcanalasalvar.picker:wheelview:2.0.7'

	//For view based UI's
	implementation 'androidx.compose.material3:material3:Tag'
}