CODEWITHSUNDEEP
androiddatepickerandroid-jetpack-composedaterangepickermaterialdatepicker
Jennifer
Jennifer

Reputation: 1852

Unable to customize DateRangePicker in Android compose

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)
}

The following is what I get out of this code. ↓ enter image description here

What I want my DateRangePicker to look like. ↓ enter image description here

Upvotes: 0

Views: 2054

Answers (1)

Yogesh Shinde
Yogesh Shinde

Reputation: 393

You can customised your own title and headline by passing your own composable like below:

enter image description here

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.

Upvotes: 1

Related Questions