Date picker


A date picker is an efficient interface for selecting a specific date or a range of dates.



val selectedDate = remember{ mutableStateOf(}
Box(modifier = Modifier.padding(16.dp)) {
        minDate =,
        maxDate =,
        selectedDate = selectedDate,
        mode = 0,
        monthOffset = 12,
        nextMonthIcon = R.drawable.ic_arrow_right,
        prevMonthIcon = R.drawable.ic_arrow_left

Properties XelaDatePicker

Name Type Default Value Required Description
minData LocalDate NO DatePicker min date
maxData LocalDate NO DatePicker max date
disabledDates List<LocalDate> arrayListOf() NO Array of disabled dates
selectedDates MutableList<LocalDate> remember { mutableStateListOf<LocalDate>() } NO Mutable array of selected dates for mode = 2
selectedDate MutableState<LocalDate?> remember { mutableStateOf(null) } NO Mutable selected date value for mode = 0
startDate MutableState<LocalDate?> remember { mutableStateOf(null)} NO Mutable start date for range selected dates mode = 1
endDate MutableState<LocalDate?> remember { mutableStateOf(null)} NO Mutable end date for range selected dates mode = 1
mode Int 0 NO DatePicker mode: 0 -> select single date, 1 -> select range dates, 2 -> select multiply dates
monthOffset Int 0 NO Display month offset from minDate
textColor Color XelaColor.Gray3 NO Default day color
todayColor Color XelaColor.Blue3 NO Today day color
selectedColor Color Color.White NO Selected day color
disabledColor Color XelaColor.Gray9 NO Disabled day color
betweenStartAndEndColor Color XelaColor.Gray3 NO Between start and end range day color
textBackground Color Color.Transparent NO Default day background
todayBackground Color Color.White NO Today day background
selectedBackground Color XelaColor.Blue3 NO Selected day background
disabledBackground Color Color.Transparent NO Disabled day background
betweenStartAndEndBackground Color XelaColor.Blue8 NO Between start and end range day background
weekdayHeaderColor Color XelaColor.Gray7 NO Weekdays color
monthHeaderColor Color XelaColor.Gray2 NO Month color
yearHeaderColor Color XelaColor.Gray9 NO Year color
changeMonthForeground Color XelaColor.Gray3 NO Change month icon color
changeMonthBackground Color Color.White NO Change month background color
changeMonthBorderColor Color XelaColor.Gray11 NO Change month border color
dividerColor Color XelaColor.Gray9 NO Divider color
prevMonthIcon Int? null NO Change month to prev icon
nextMonthIcon Int? null NO Change month to next icon
onTapDateAction ((LocalDate) -> Unit)? null NO On tap date action