javascript - jQuery ui 日历下个月按钮

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 的单击。

像这样

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

或者，如果除了这两个日期选择器之外没有其他日期选择器，您可以使用 .ui-datepicker-next 类来触发两个日期选择器上的点击事件

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

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);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<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>