CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-bootstrap
boandriy
boandriy

Reputation: 537

React botstrap date picker - customization

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.

enter image description here

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

enter image description here

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!

Upvotes: 3

Views: 1194

Answers (2)

N'Bayramberdiyev
N'Bayramberdiyev

Reputation: 3620

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.

Upvotes: 1

Andrea - codemillers.com
Andrea - codemillers.com

Reputation: 146

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

Upvotes: 1

Related Questions