jqueryのカレンダーのnext/prevボタンをクリックするとカレンダーdivのIDを取得します

Question

jqueryのUIを使用して私のページに複数のカレンダーを表示しました。カレンダーは正常に動作しています。カレンダーのIDを取得しようとしています。カレンダーの次または前のボタンをクリックしたときです。私が使っているコードは、このです：

<div class="calendar" id="calendar1"></div> 
<div class="calendar"id="calendar2"></div> 
<div class="calendar" id="calendar3"></div> 

とjqueryのコードは

$('.calendar').datepicker({ 
    inline: true, 
    firstDay: 1, 
    showOtherMonths: true, 
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] 
}); 
$(document).on('click', '.ui-datepicker-next', function() { 
    console.log($(this).parent().parent().parent().attr('id')); 
}); 

であることがcalendar1/calendar2/calendar3表示されるはずですが、代わりにIDを表示するには、それは未定義を示しています。私たちは、親の呼び出しが正しいか見ることができるように日付ピッカーのHTMLは、この

<div class="calendar hasDatepicker" id="calendar1"> 
    <div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;"> 
    <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> 
     <a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1488149175514.datepicker._adjustDate('#calendar50', -1, 'M');" title="Prev"> 
     <span class="ui-icon ui-icon-circle-triangle-w">Prev</span> 
     </a> 
     <a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1488149175514.datepicker._adjustDate('#calendar50', +1, 'M');" title="Next"> 
     <span class="ui-icon ui-icon-circle-triangle-e">Next</span> 
     </a> 

であると私は

console.log($('.ui-datepicker-next').parent().parent().parent().attr('id')); 

を使用している場合、それが働いているが、それは常にcalendar1すなわちdivの最初のIDを提供します。ドキュメントののよう

Answer 1

：onChangeMonthYear(Integer year, Integer month, Object inst)

onChangeMonthYear:function(year, month, instance){ 

    console.log(instance.id) 

} 

ので、使ってみてください：

$('.calendar').datepicker({ 
    inline: true, 
    firstDay: 1, 
    showOtherMonths: true, 
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 
    onChangeMonthYear:function(year, month, instance){ 

     console.log(instance.id) 

    } 
});