Unable to customize DateRangePicker in Android compose

Question

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. ↓

What I want my DateRangePicker to look like. ↓

i am not able to import this Date Picker. are you using any library — Hanif Shaikh, Jun 01 '23 at 01:43
already added matrial3 library but not able to import date picker — Hanif Shaikh, Jun 01 '23 at 03:13
You can add your own compassable here, I have written the details article about here: https://medium.com/@yogesh_shinde/daterangepicker-using-jetpack-compose-f0abf3e4acdf — Yogesh Shinde, Jun 05 '23 at 05:01

Yogesh Shinde · Accepted Answer · 2023-06-05T05:37:59.290

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.

Unable to customize DateRangePicker in Android compose

1 Answers1