在 jQuery UI (MultipleDates) 中向日历日添加类

Question

我正在为 jQuery UI 日期选择器使用多个日期选择器。直到现在一切都很顺利。事实证明，制作它的开发人员已经多年没有触及它，并且预先突出显示日期不再有效。所以这是我的计划。我将我需要突出显示的日期放入一个数组中，然后使用 jQuery 将必要的类添加到日历中。这就是我卡住的地方。当它看起来像这样时，我如何定位这个特定的锚：

<td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
<a class="ui-state-default" href="#">18</a> <!-- needs class: ui-state-active-->
</td>

那么我如何根据数据月、数据年以及锚点中的数字进行定位？非常感谢所有帮助！

Answer 1

使用 beforeShowDay 事件触发函数。

更新：JavaScript: jQuery Datepicker - simple highlighting of specific days, who can help? (source inside)

Answer 2

要获取锚标记内的值，您可以使用 jQuery 选择器使用月份和年份来缩小搜索范围。

然后遍历该月和该年的所有日子，并使用锚点上的 find() 方法来获取日期。将日历日期与数组中的日期进行比较，如果匹配，则突出显示它

这是一个示例，但我不确定性能或它将如何扩展。

$(document).ready(function() {
  var myDates = ["10/18/2017", "10/20/2017"];
  myDates.forEach(function(dateString) {
    var date = new Date(dateString);
    var currMonth = date.getMonth() + 1;
    var currYear = date.getFullYear();
    var currDay = date.getDate();

    var $monthYear = $(`td[data-month='${currMonth}'][data-year='${currYear}']`);
    $monthYear.each(function(i, elem) {
      var calendarDay = $(elem).find("a").text();
      var currDate = `${currMonth}/${calendarDay}/${currYear}`;
      if (dateString === currDate) {
        $(elem).addClass("highlight");
      }
    });
  })
})

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">18</a>
      <!-- needs class: ui-state-active-->
    </td>

    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">19</a>
      <!-- needs class: ui-state-active-->
    </td>

    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">20</a>
      <!-- needs class: ui-state-active-->
    </td>
  </tr>
</table>