今月から次の5ヶ月間

Question

2つのリスト要素があります。

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

のような（過去4ヶ月間に、今月から1年間示さなければならない）されています：

から：（次の4ヶ月間に、今月示さなければならない）

<li>October 2017</li> 
<li>November 2017</li> 
<li>December 2017</li> 
<li>January 2018</li> 
<li>Febraury 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先の第2の対応リスト、または簡略化のため+ 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

これは、現在の月に基づいてforループを使用し、各反復をインクリメントし、関連するulにターゲット月にliを追加することができ、このような何かを達成するために：

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>