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>

沒有其他的日期選擇器