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

Question

我想以DateRangePicker一种方式设置我的样式，一旦我选择了start-date，end-date然后<td>这两个日期之间的所有标签都设置为

background-color:red 

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

当我选择时，start-date我会得到可用的、活动的和start-date. 当我选择时，end-date我会得到可用的、活动的和end-date. 介于两者之间的所有人<td>都有课.available，.in-range

如果我使用 classes 进行样式设置.start-date，.in-range并且在选择开始日期后将鼠标悬停在上面时.end-date 它会更改，因为它会在悬停时获取类。background-color<td>.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";
}

因为默认情况下，当我将鼠标悬停在其他日期上时选择开始日期后，它会获取课程.in-range。

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

标签： javascriptjquerycssdaterangepicker