javascript - 在随后的每一天到期时自动添加类 "expired"

Question

我为 HTML 和 CSS 制作了一个日历，但我没有足够的 JS(或 jQuery)，所以在一定时间后，日期会变得不活动。所有不活动的按钮(带日期)都有“过期”类，我有必要在每天过期后，将“过期”类添加到每个下一个按钮。

日历本身在这里: https://coralife.cf/calendar/

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><table class="col-12 calendar row justify-content-center">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <tr class="head-of-calendar">
    <th class="tg-kt03">Пн</th>
    <th class="tg-kt03">Вт</th>
    <th class="tg-kt03">Ср</th>
    <th class="tg-kt03">Чт</th>
    <th class="tg-kt03">Пт</th>
    <th class="tg-kt03">Сб</th>
    <th class="tg-kt03">Вс</th>
  </tr>
  <tr>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">1</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">2</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">3</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">4</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">5</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">6</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">7</button></td>
  </tr>
  <tr>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">8</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num-mini num expired" href="#" data-toggle="modal" data-target="#exampleModal">9</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">10</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">11</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">12</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">13</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">14</button></td>
  </tr>
  <tr>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">15</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">16</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">17</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">18</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Выбирете другой день"><button class="btn calendar-num num expired" href="#" data-toggle="modal" data-target="#exampleModal">19</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="Сегодня 20 июля. День свободен!"><button class="btn calendar-num num active" href="#" data-toggle="modal" data-target="#exampleModal">20</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num" href="#" data-toggle="modal" data-target="#exampleModal">21</button></td>
  </tr>
  <tr>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">22</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">23</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">24</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">25</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">26</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">27</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">28</button></td>
  </tr>
  <tr>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">29</button></td>
    <td class="tg-i6c6" data-toggle="tooltip" title="День свободен!"><button class="btn calendar-num num" href="#" data-toggle="modal" data-target="#exampleModal">30</button></td>
  </tr>
  <tr>
  </tr>
</table></code></pre>
</div>
</div>

Answer 1

在页面底部添加以下脚本标签:

<script>
var btns = document.getElementsByClassName("num");
var i;
for (i = 0; i < btns.length; i++) {
  let btn = btns[i];
  if (parseInt(btn.textContent) < new Date().getDate()){
    btn.classList.add("expired");
  }
}
</script>

我在这里做了一个示例，其中我还添加了禁用属性:https://codepen.io/anon/pen/bXdraG