jQuery ui-calendar下个月按钮

Question

我在ui-calendar中创建了两个日历（彼此相邻）。 日历有两个不同的日期。

我试图创建一个按钮，每个按钮都会踩一个月。

因此，如果我点击下一个按钮，则两个日历将获得+1个月。

然而，似乎没有任何东西可以与我创建的功能一起使用。 请看一下。

<div class="row">
  <div class="col-md-6">
     <div class="calendar-wrapper">
        <div id="doubleCalendar1"></div>
        <button id="prev">Previous Month</button>&nbsp;
        <button id="next">Next month</button>
      </div>
   </div>

   <div class="col-md-6">
      <div class="calendar-wrapper">
         <div id="doubleCalendar2"></div>
      </div>
    </div>
</div>


function twoCalendars(day, month, year) {

jQuery('#doubleCalendar1').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year,month,day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

jQuery('#doubleCalendar2').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year,month + 1,day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

$('#next').on('click', function() {
    $('#doubleCalendar1 .ui-datepicker-next').trigger("click");
});

}

干杯

Answer 1

您需要在下一个按钮单击侦听器中触发datepicker2的click。

喜欢这个

TrainValidationSplit

或者你可以使用.ui-datepicker-next类来触发两个datepicker上的click事件，如果除了这2之外没有其他的datepicker

$('#doubleCalendar2 .ui-datepicker-next').trigger("click");

＆＃13;

＆＃13;

$('.ui-datepicker-next').trigger("click");

＆＃13;

function twoCalendars(day, month, year) {

  jQuery('#doubleCalendar1').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year, month, day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  });

  jQuery('#doubleCalendar2').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year, month + 1, day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  });

  $('#next').on('click', function() {
    $('.ui-datepicker-next').trigger("click");

  });
  
  $('#prev').on('click', function() {
    $('.ui-datepicker-prev').trigger("click");
  });

}

twoCalendars(10, 2, 2017);

＆＃13;

＆＃13;

＆＃13;