选择开始日期和结束日期后，如何为 Js daterangepicker 设置 CSS 样式？

Question

I want to style my DateRangePicker in a way that once I have selected the start-date and end-date then all the <td> tag between these two dates are styled with

background-color:red 

Problem: I only want to style all <td> tag once I have selected start-date and end-date .

When I select the start-date I get the classes available, active and start-date . When I select the end-date I get the classes available, active and end-date . all the <td> in between have classes .available , .in-range

if I style using classes .start-date , .in-range and .end-date it change the background-color when I hover over <td> after selecting start date because it gets the class .in-range while hovering.

<tr>
  <td class="weekend available" data-title="r1c0">5</td>
  <td class="active start-date available" data-title="r1c1">6</td>
  <td class="in-range available" data-title="r1c2">7</td>
  <td class="in-range available" data-title="r1c3">8</td>
  <td class="in-range available" data-title="r1c4">9</td>
  <td class="in-range available" data-title="r1c5">10</td>
  <td class="weekend in-range available" data-title="r1c6">11</td>
</tr>
<tr>
  <td class="weekend in-range available" data-title="r2c0">12</td>
  <td class="in-range available" data-title="r2c1">13</td>
  <td class="in-range available" data-title="r2c2">14</td>
  <td class="active end-date in-range available" data-title="r2c3">15</td>
  <td class="available" data-title="r2c4">16</td>
  <td class="available" data-title="r2c5">17</td>
  <td class="weekend available" data-title="r2c6">18</td>
</tr>

This is the code for when I have selected the start date as 6 and end-date as 15.

I can not style like:

.start-date, .in-range, .end-date{
    background-color: "red";
}

because by default after selecting start date when I hover over other dates it gets the class .in-range .

How can I style it using css , js or jquery ?

Answer 1

This worked for me, I hope three years later it is not too late;-)

.daterangepicker td.in-range {
    color: #ffffff;
    background-color: #a12727;
}