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

时间:2019-05-23 15:47:40

标签: javascript jquery css daterangepicker

我想以一种方式设置DateRangePicker的样式,一旦选择了start-dateend-date,然后用以下两种样式设置这两个日期之间的所有<td>标签的样式: / p>

background-color:red 

问题: 选择了开始日期结束日期后,我只想设置所有<td>标签的样式。

当我选择start-date时,将获得可用的类,活动的类和start-date。 当我选择end-date时,将获得可用的类,活动的类和end-date。 两者之间的所有<td>都有类.available.in-range

如果我使用类.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

如何使用cssjsjquery设置样式?

0 个答案:

没有答案