jQuery下个月的月历按钮

Question

我已经在UI日历中创建了两个日历（彼此相邻）。 日历有两个不同的日期。

我试图创建一个按钮，将在每一个1个月一步。

所以，如果我点击下一个按钮两个日历得到+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-日期选择器，隔壁班的触发两个日期选择器点击事件，如果有这些除外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>

没有其他的日期选择器