A date picker is an efficient interface for selecting a specific date or a range of dates.
val selectedDate = remember{ mutableStateOf(LocalDate.now().plusDays(3))}
Box(modifier = Modifier.padding(16.dp)) {
XelaDatePicker(
minDate = LocalDate.now().minusMonths(12),
maxDate = LocalDate.now().plusMonths(12),
selectedDate = selectedDate,
mode = 0,
monthOffset = 12,
nextMonthIcon = R.drawable.ic_arrow_right,
prevMonthIcon = R.drawable.ic_arrow_left
)
}
Name | Type | Default Value | Required | Description |
---|---|---|---|---|
minData | LocalDate | LocalDate.now() | NO | DatePicker min date |
maxData | LocalDate | LocalDate.now().plusYears(1) | 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 |