今月からの前後数ヶ月を取得してページャーとして表示したい

Question

		<ul class="month-pager">
			<li>
			  <a href="">9月</a>
			</li>
			<li>
			  <a href="">10月</a>
			</li>
			<li>
			  <a href="">11月</a>
			</li>
			<li>
			  <a href="">12月</a>
			</li>
			<li>
			  <a href="">1月</a>
			</li>
			<li>
			  <a href="" class="month-pager-current">2月</a>
			</li>
			<li>
			  <a href="">3月</a>
			</li>
			<li>
			  <a href="">4月</a>
			</li>
			<li>
			  <a href="">5月</a>
			</li>
			<li>
			  <a href="">6月</a>
			</li>
			<li>
			  <a href="">7月</a>
			</li>
		  </ul>

今が２月だとすると、前後５ヶ月を取得して、セレクトボックスで表示したいのですが、javascriptで実装可能でしょうか。
dateで取得してforで繰り返せばいいかなとおもいましたが、画面に反映させるにはどうすればいいのかわからず・・・

<script>
	//日付
	$(function(){
		var dt = new Date();
		dt.setMonth(dt.getMonth() - 5);
		for (var i = 1; i <= 10; i++){
  dt += i;
}

	});
	</script>

Comments

[m.ts10806]

提示のhtmlはセレクトボックスではないようですが・・？

[takesu]

間違えていました。ただのhtmlです＾＾；修正いたしました。

Answer 1

こんにちは。

日付を扱うのに便利な moment.js を使ってみました。
今月を含む、一年分（１２ヶ月）を<option>にします。

<select class="month-selector">
</select>

$(function(){

  const NUM_MONTHS = 12;
  
  for (let i = -NUM_MONTHS/2; i < NUM_MONTHS/2; ++ i ) {
      const date = moment().add(i, 'months');
      const option = $('<option>')
                      .val(date.format("YYYYMM"))
                      .text(date.format("YYYY年 M月"))
                      .attr('selected', i==0 ? 'selected' : undefined);
      $('.month-selector').append(option);
  }
  
});

　　
以下、デモです。

https://jsfiddle.net/jun68ykt/xhy9n3cm/28/

Comments

[takesu]

ありがとうございます。年などを扱う時はこちらの方が良さそうですね。

[jun68ykt]

そうですね。
ある日付に対して、その日付の１ヶ月先の日付だとか１０日前の日付だとか、
そういった、
日時＋日時の差分＝日時
みたいな演算を自分で書かないで、すでによく使われている便利グッズを使って、
なるべく楽したいですからね。

[takesu]

こちらでも実装してみたのですが、過去を５ヶ月、現在の月、未来を５ヶ月の合計１１ヶ月表示にしたく、const NUM_MONTHS = 12;
↓
const NUM_MONTHS = 11;
にしましたが、おそらく計算がうまくできていないようで、動きませんでした。どのようにすればいいかもしおわかりでしたら教えていただけますと幸いです！

[jun68ykt]

ご質問のタイトル

> 今月からの前後数ヶ月を取得して

の「数ヶ月」を、 const N として、以下のように
すればよいと思います。

https://jsfiddle.net/jun68ykt/xhy9n3cm/36/

今月含む、 2×N + 1 ヶ月がリストされます。

[takesu]

const N = 5;にして１ヶ月ずつ処理すればいいのですね。ありがとうございます！できました。

Answer 2

微調整は必要かもしれませんが、こんな感じではいかがでしょうか。

<ul class="month-pager"></ul>

    $(function(){
        var dt = new Date();
        var thismonth = dt.getMonth()+1;//今月
        for (var i = 0; i <= 10; i++){
            var mdt = dt.setMonth(thismonth -6+i);//5ヶ月前を計算
            var li=document.createElement('li');
            var a=document.createElement('a');
            $(a).text((dt.getMonth()+1)+"月");
            if((dt.getMonth()+1) == thismonth){//今月をカレントに
                $(a).addClass("month-pager-current");
            }
            $(li).html(a);
            $(".month-pager").append(li);
           
        }
    });

Comments

[m.ts10806]

前後5ヶ月になってなかったので調整しました。

[takesu]

ありがとうございます！forの10を11にすると前後５ヶ月になりました！
こんなすぐにできるなんてみなさん本当にすごいですね！！

[m.ts10806]

あれ？
提示したソースで9月～7月になってるはずですが（編集前のソース見られたかも？）
なにはともあれ解決したようで良かったです。
実現方法は沢山あるので要件にあったやり方を見つけてくださいね。

[m.ts10806]

あ、
for (var i = 0; i < 10; i++){
じゃなくて
for (var i = 0; i <= 10; i++){
ですね。失礼しました。修正しておきます。

[takesu]

なるほどです。そういうことですね！
ありがとうございます。

Answer 3

普通にforで回せばいいでしょうけどこんな感じでも

$(function(){
  var d=new Date();
  d.setDate(1);
  var m=d.getMonth()+1;/*すみませんgetDateと書いていたものを修正しました*/
  Array(11).fill(null).forEach(function(x,y){
    d.setMonth(m+y-6);
    console.log((d.getMonth()+1)+"月");
  });
  
});

Comments

[takesu]

いつもありがとうございます。こんなやり方もあるんですね。とても勉強になります。