Question

我在jQuery UI日期选择器中使用Multiple Dates选择器。到目前为止，一切都很顺利。事实证明，开发人员多年来没有触及它，并且预先突出显示日期不再有效。所以这是我的计划。我将我需要突出显示的日期放在一个数组中，然后使用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（）方法来获取当天。将日历日期与数组中的日期进行比较，如果匹配，则突出显示

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

＆＃13;

$(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");
      }
    });
  })
})

＆＃13;

.highlight {
  background-color: yellow;
}

＆＃13;

<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>

＆＃13;

在jQuery UI（MultipleDates）中将日期添加到日历日

2 个答案: