1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptで指定した期間の、月単位、日単位の連番を作成する

Posted at

#やりたいこと
datepicker等で選択した日付の範囲を、月単位、日単位で区切り配列にぶち込む。

'2020-08-17' から '2020-09-03' で期間指定したとき、
日単位の場合は素直に
['2020-08-17','2020-08-18','2020-08-19',...,'2020-09-03']
月単位の場合は、'yyyy-mm' 部分をみて
['2020-08','2020-09']

が欲しい。

#本題

今回は、期間は決め打ちで。
配列を用意して

var fromDate = '2020-08-17'
var toDate = '2020-09-03'

var monthlyRange = [];
var daylyRange = [];

for文で日、月を加算していくので、date型に変換

new Date('yyyy-mm-dd')
の形でOK。
参考:http://cly7796.net/wp/javascript/how-to-use-new-date/

new Date('yyyy-mm')
だとddの部分は '01' になる。月の加算、配列格納はこちらを利用。

// 指定した日付から年と月を取り出す。'yyyy-mm-dd' => 'yyyy-mm'
regexp = new RegExp(/\d\d\d\d-\d\d/);
var fromYM = fromDate.match(regexp)[0];
var toYM = toDate.match(regexp)[0];
    
// 日付の大小比較のため、date型に変換
var start = new Date(fromDate);
var end = new Date(toDate);
// ddを省略することで、その年月の一日のdateが手に入る
var startYM = new Date(fromYM); 
var endYM = new Date(toYM);

後は以下。
型変換は下で定義した関数で行う。

// date型を文字列に変換し配列に格納
for(var ym = startYM; ym <= endYM; ym.setMonth(ym.getMonth()+1)) {
    var strYearMonth = convertToStr(ym, 0);
    monthlyRange.push(strYearMonth);
}

for(var d = start; d <= end; d.setDate(d.getDate()+1)) {
    var strDate = convertToStr(d, 1);
    daylyRange.push(strDate);
}

// date型を文字列に変換する
function convertToStr(date, day){
    // dayはフラグ。真のとき'yy-mm-dd'、偽のとき'yy-mm'。
    var strDate;
    
    if(day){
        strDate = [
            date.getFullYear(),
            ('0' + (date.getMonth() + 1)).slice(-2),
            ('0' + date.getDate()).slice(-2)
        ].join('-');
    }else{
        strDate = [
            date.getFullYear(),
            ('0' + (date.getMonth() + 1)).slice(-2),
        ].join('-');
    }
    return strDate;
}

結果

["2020-08", "2020-09"]
["2020-08-17", "2020-08-18", "2020-08-19", "2020-08-20", "2020-08-21", "2020-08-22", "2020-08-23", "2020-08-24", "2020-08-25", "2020-08-26", "2020-08-27", "2020-08-28", "2020-08-29", "2020-08-30", "2020-08-31", "2020-09-01", "2020-09-02", "2020-09-03"]

最適解ではないと思いますが、とりあえず思い通りです。

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?