获取本月到下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>