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

Question

我想设置我的DateRangePicker的样式，一旦我选择了start-date和end-date ，那么这两个日期之间的所有<td>标记都使用

background-color:red 

问题：一旦我选择了start-date和end-date ，我只想设置所有<td>标记的样式。

当我 select start-date时，我得到了可用的课程，活动和start-date 。 当我 select end-date ，我得到了可用的课程，活动和end-date 。 之间的所有<td>都有类.available ， .in-range

如果我使用类.start-date ， .in-range和.end-date设置样式，当我在选择开始日期后 hover 超过<td>时，它会更改background-color ，因为它在悬停时获得 class .in-range 。

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

这是我选择开始日期为 6 和结束日期为 15 时的代码。

我不能像这样：

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

因为默认情况下，当我选择开始日期后，当我 hover 超过其他日期时，它会得到 class .in-range 。

如何使用css 、 js或jquery对其进行样式设置？

Answer 1

这对我有用，我希望三年后还为时不晚；-)

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