jQuery ui-calendar next month button

Question

I've created two calendars (next to each other) in ui-calendar. Calendars have two diffrent dates.

I'm trying to create a button which will make one month step on every one.

So if i click next button two calendars are getting +1 month.

However nothing seems to work with the function I've created. Please take a look.

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

}

Cheers

Answer 1

You need to trigger click for datepicker2 as well in your next button click listener.

Like this

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

Or you can just use .ui-datepicker-next class to trigger click event on both datepicker if there are no other datepicker except these 2

$('.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>