I am new to Compose and currently having issues with customizing the DateRangePicker. What I want to do is to remove the edit icon and replace it with the left/right arrow as you see in the DatePicker. Also, the title looks too big and crammed. I have searched for a solution but wasn`t able to find a good one. It will be really helpful if you can provide me with tips or a sample code. Thank you in advance.
@Composable
fun DateRangePickerScreen() {
val dateTime = LocalDateTime.now()
val dateRangePickerState = remember {
DateRangePickerState(
initialSelectedStartDateMillis = dateTime.toMillis(),
initialDisplayedMonthMillis = null,
initialSelectedEndDateMillis = dateTime.plusDays(3).toMillis(),
initialDisplayMode = DisplayMode.Picker,
yearRange = (2023..2024)
)
}
DateRangePicker(state = dateRangePickerState)
}
You can customised your own title and headline by passing your own composable like below:
DateRangePicker(state,
modifier = Modifier,
dateFormatter = DatePickerFormatter("yy MM dd", "yy MM dd", "yy MM dd"),
dateValidator = dateValidator(),
title = {
Text(text = "Select date range to assign the chart", modifier = Modifier
.padding(16.dp))
},
headline = {
Row(modifier = Modifier.fillMaxWidth()
.padding(16.dp)) {
Box(Modifier.weight(1f)) {
(if(state.selectedStartDateMillis!=null) state.selectedStartDateMillis?.let { getFormattedDate(it) } else "Start Date")?.let { Text(text = it) }
}
Box(Modifier.weight(1f)) {
(if(state.selectedEndDateMillis!=null) state.selectedEndDateMillis?.let { getFormattedDate(it) } else "End Date")?.let { Text(text = it) }
}
Box(Modifier.weight(0.2f)) {
Icon(imageVector = Icons.Default.Done, contentDescription = "Okk")
}
}
},
showModeToggle = false,
colors = DatePickerDefaults.colors(
containerColor = Color.Blue,
titleContentColor = Color.Black,
headlineContentColor = Color.Black,
weekdayContentColor = Color.Black,
subheadContentColor = Color.Black,
yearContentColor = Color.Green,
currentYearContentColor = Color.Red,
selectedYearContainerColor = Color.Red,
disabledDayContentColor = Color.Gray,
todayDateBorderColor = Color.Blue,
dayInSelectionRangeContainerColor = Color.LightGray,
dayInSelectionRangeContentColor = Color.White,
selectedDayContainerColor = Color.Black
)
)
I have written the details article on this, Please check the link here.