獲取本月到下5個月

Question

我們有2個列表元素。

來源：（必須表明這個月接下來的4個月）像

<li>October 2017</li> 
<li>November 2017</li> 
<li>December 2017</li> 
<li>January 2018</li> 
<li>Febraury 2018</li> 

爲：（必須從這個月到過去40個月顯示1年）像

<li>June 2018</li> 
<li>July 2018</li> 
<li>August 2018</li> 
<li>September 2018</li> 
<li>October 2018</li> 

是有可能我們可以使用Javascript或Jquery顯示。

JS：

getFullMonth() { 
    var month = new Array(); 
    month[0] = "January"; 
    month[1] = "February"; 
    month[2] = "March"; 
    month[3] = "April"; 
    month[4] = "May"; 
    month[5] = "June"; 
    month[6] = "July"; 
    month[7] = "August"; 
    month[8] = "September"; 
    month[9] = "October"; 
    month[10] = "November"; 
    month[11] = "December"; 

    var d = new Date(); 
    var n = month[d.getMonth()]; 
    document.getElementById("fromDate").innerHTML = n; 
} 

Answer 1

我更喜歡使用moment library進行日期操作，它使事情變得更好。

因此，您需要打印未來5個月的列表，包括當前的列表。那麼爲了簡單起見，您需要提供第二個相應的清單，即1 year - 4 months或+ 8 months。

for (var i = 0; i<5; i++) { 
 

 
    var dt = moment().add(i, 'months'); 
 

 
    $('<li />').text(dt.format('MMMM YYYY')).appendTo('#current') 
 
    
 
    dt.add(8, 'months'); 
 
    
 
    $('<li />').text(dt.format('MMMM YYYY')).appendTo('#advanced') 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 

 
<ul id="current"></ul> 
 
<ul id="advanced"></ul>

Answer 2

要做到這一點，你可以使用基於當前的月份和遞增每次迭代，並與目標每月追加li到相關ul，像這樣一個for循環：

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
var currentMonth = new Date().getMonth(); 
 

 
for (var i = 0; i < 5; i++) { 
 
    $('.from').append(`<li>${months[(currentMonth + i) % months.length]}</li>`); 
 
    
 
    $('.to').append(`<li>${months[(currentMonth + i + 8) % months.length]}</li>`); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="from"></ul> 
 
<ul class="to"></ul>

Answer 3

可以執行：

for (var i = 0; i<5; i++) { 
 

 
    var dt = moment().add(i, 'months'); 
 

 
    $('<li />').text(dt.format('MMMM YYYY')).appendTo('#current') 
 
    
 
    dt.add(8, 'months'); 
 
    
 
    $('<li />').text(dt.format('MMMM YYYY')).appendTo('#advanced') 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 

 
<ul id="current"></ul> 
 
<ul id="advanced"></ul>