React botstrap date picker - customization

Question

I am trying to customize the react-bootstrap-daterangepicker in the following way:

I want to use different background colors for state when the dates in range are selected and when the user is only hovering to select the dates.

On the screenshot shown below, you can see that wen I hover over the dates, the selected range days are light blue color.

Same background color is when I actually select the desired range, only difference is the background color of the last day in range:

Is there a way to make different background collor for those 2 states above? The problem is that in both states the days that are in range have same classes:

.in-range

Any help is appreciated!

Answer 1

You can customize background color of start & end dates like so:

/* Start Date */
.daterangepicker td.start-date,
.daterangepicker td.start-date.active {
    background-color: #dc3545;
}

/* End Date */
.daterangepicker td.end-date,
.daterangepicker td.end-date.active {
    background-color: #dc3545;
}

/* Today (Initial Color) */
.daterangepicker td.today.active {
    background-color: #28a745;
}

Here is a demo and the source code .

Answer 2

Watching this example I see class .start-date for first day in range and .end-date for last day in range. May you can try manipulating these classes.