これはDatepicker UI jQueryです

Question

私はdatepicker内にonClickイベントがあります。私が選択した実際のtd要素にhtmlを追加しようとしています。

$('#datepicker').datepicker({ 
    dateFormat: 'dd/mm/yy', 
    beforeShowDay: enableAllTheseDays, 
    dayNamesMin: ["M", "T", "W", "T", "F", "S", "S"], 
    showOtherMonths: true, 
    onSelect: function(date) { 

    for (var i = 0; i < dateArray.length; i++) { 

     if (date === dateArray[i].date) { 

     $(this).append("<div class=\"class " + date + "\"><span>Pick a time</span><span class=\"times_available\">" + dateArray[i].time + "</span><span class=\"tickets_left\">" + dateArray[i].stock_qt + " tickets left<span></div>"); 
     console.log(this); 

     } 
    } 
    } 
}); 

htmlだけさ：<div id="datepicker"></div>

はすべて、すべて、すべてのループ無視しますが、私はonSelectthis内$(this)を使用する場合、基本的に、私の日付ピッカーを指します。私が選択したtd要素ではありません。私がdateを使用してjQuery UIが私に与えるものは、私が選択したtd要素の日付を表示します。だから私は明らかに各tdを読むことができます、どのようにクリックしてtd要素にHTMLを追加することができます。

このonSelectの外にonClickを行ってみましたが、私が何ヶ月か変更しました。 onClickイベントはトリガーされません。

Answer 1

jQueryの動的カレンダーのテーブルを追加しますので、あなたがしたいセルに到達するために、いくつかのCSSセレクタとフィルタフープを介してジャンプする必要があるとしています。

.ui-datepicker-calendar tdは、カレンダー内のすべてのセルを取得する必要があります。日付に対してテストを実行することにより、セルを値でフィルタリングするコールバック関数を記述することができます。セルを見つけたら、追加することができます。

$(".ui-datepicker-calendar td").filter(function() { 
    var date = $(this).text(); 
    return /\d/.test(date); 
}).append('Blah'); // Whatever you want to append. 

}）

Answer 2

クリックした<td>に実際にアクセスしたい場合は、以下のようにハッキングできます。ドキュメント化されていないプロパティに基づいたハックだから、将来のリリースでは壊れる可能性があることに注意してください。

$(function() { 
 
    $("#datepicker").datepicker({ 
 
    onSelect: function(date, instance) { 
 
     var data = date.split('/'); 
 
     var month = data[0] < 10 ? data[0].charAt(1) - 1 : data[0] - 1; 
 
     var day = data[1] < 10 ? data[1].charAt(1) : data[1]; 
 
     var year = data[2]; 
 
     var $table = instance.dpDiv; 
 
     var td = $table.find('tbody td').filter(function(i, el) { 
 
     var $el = $(el); 
 
     var $a = $el.find('a'); 
 
     return ($a.text() == day && $el.data('month') == month && $el.data('year') == year); 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
 
<input id="datepicker">