An Android Jetpack Compose library that provides a Composable Date Picker / Time Picker functionality. This is a fork of vsnappy1/ComposeDatePicker
dependencies {
//..
implementation("io.github.rexmtorres.android:composedatepicker:1.2.0")
}Adding a date picker or time picker is incredibly easy, requiring just two lines of code.
DatePicker(
onDateSelected = { year, month, day ->
}
)
TimePicker(
onTimeSelected = { hour, minute ->
}
)
The date and time picker offer extensive customization options, allowing users to modify the TextStyle, Color, Size, Shape, and other elements to align with their preferred theme.
import java.util.Calendar
DatePicker(
onDateSelected = { year, month, day ->
},
date = DatePickerDate(
year = 2023,
month = Calendar.JANUARY,
day = 5
)
)Please note that the year should be within a range of <current_year> ± 100 (inclusive). Additionally, for the month,
please keep in mind that 0 represents January, while 11 corresponds to December. It is better to use the java.util.Calendar month constants (e.g.: Calendar.JANUARY, Calendar.DECEMBER) to specify the month.
import java.util.Calendar
DatePicker(
onDateSelected = { year, month, day ->
},
selectionLimiter = SelectionLimiter.fromDatePickerDates(
// Disable dates before 7 April 2023
fromDate = DatePickerDate(
year = 2023,
month = Calendar.APRIL,
day = 7
),
// Disable dates after 21 May 2023
toDate = DatePickerDate(
year = 2023,
month = Calendar.MAY,
day = 21
),
// Disable these specific dates.
disabledDates = listOf(
DatePickerDate(
year = 2023,
month = Calendar.APRIL,
day = 16
),
DatePickerDate(
year = 2023,
month = Calendar.APRIL,
day = 19
),
DatePickerDate(
year = 2023,
month = Calendar.APRIL,
day = 29
)
)
)
)DatePicker(
modifier = Modifier.padding(16.dp),
onDateSelected = { year, month, day ->
},
configuration = DatePickerConfiguration.Builder()
.height(height = 300.dp)
.dateTextStyle(DefaultDatePickerConfig.dateTextStyle.copy(color = Color(0xFF333333)))
.selectedDateTextStyle(textStyle = TextStyle(Color(0xFFFFFFFF)))
.selectedDateBackgroundColor(color = Color(0xFF64DD17))
.build()
)In addition to dateTextStyle, selectedDateTextStyle, and selectedDateBackgroundColor,
there are more than 20 attributes available for users to customize the appearance of the date picker,
including setting custom Composables for the header (DatePickerConfiguration.monthYearHeader,
DatePickerConfiguration.previousArrow, DatePickerConfiguration.nextArrow).
import java.util.Locale
DatePicker(
locale = Locale.CHINESE,
onDateSelected = { year, month, day ->
},
)
TimePicker(
onTimeSelected = { hour, minute ->
},
time = TimePickerTime(
hour = 12,
minute = 45
)
)TimePicker(
onTimeSelected = { hour, minute ->
},
is24Hour = true,
minuteGap = MinuteGap.FIVE
)The interval between consecutive items in the minute list is determined by the minuteGap parameter. When minuteGap is set to MinuteGap.FIVE, the minutes in the time picker will be displayed in increments of 5, such as 00, 05, 10,..., 55. The default value for minuteGap is MinuteGap.ONE, which means the minutes will be displayed in sequential order from 00 to 59.
TimePicker(
modifier = Modifier
.padding(16.dp)
.background(Color(0xFF1B5E20), RoundedCornerShape(8.dp)),
onTimeSelected = { hour, minute ->
},
configuration = TimePickerConfiguration.Builder()
.numberOfTimeRowsDisplayed(count = 5)
.selectedTimeScaleFactor(scaleFactor = 1.4f)
.build()
)There are a total of 8 attributes available for users to customize the appearance of the time picker.
import java.util.Locale
TimePicker(
locale = Locale.KOREAN,
onTimeSelected = { hour, minute ->
},
)
DatePickerDate and TimePickerTime have several extension functions to convert between Date, Calendar and Long (date/time representation in milliseconds). There are also extension functions to add days/months/years to a DatePickerDate instance as well as add minutes/hours to a TimePickerTime instance.
-
DatePickerDate extension functions:
-
TimePickerTime extension functions:
Please refer to the full documentation here.
-
If multiple date/time pickers are used, a unique id parameter should be included in the function call for each composable.
-
When adjusting the height of a date/time picker, it is recommended to use DatePickerConfiguration.Builder().height() and TimePickerConfiguration.Builder().height() instead of Modifier.height() to ensure smooth rendering.