在jquery中單擊日歷中的下一個/上一個按鈕，獲取日歷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時顯示為undefined。 datepicker 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'));

但這將始終給出第一個div的ID，即calendar1。

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)

    }
});