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>