Как стилизовать CSS для Js daterangepicker после выбора даты начала и окончания? - PullRequest
Новая
       18

Как стилизовать CSS для Js daterangepicker после выбора даты начала и окончания?

0 голосов
/ 23 мая 2019

Я хочу стилизовать мой DateRangePicker таким образом, чтобы после выбора start-date и end-date все теги <td> между этими двумя датами имели стиль 

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.

Как мне оформить его, используя css, js или jquery?

...