日付(日数と曜日)の処理のずれ

Question

行いたいこと

2週間分の日付を表示させたい。

var date = new Date ();
    dateT = ["日","月","火","水","木","金","土"];
    for (var i = 0; i < 14; i++) {
      var day = date.getDate() + i;
      var dayOfWeek = dateT[date.getDay() + i];
      console.log(day);
      console.log(dayOfWeek);
    }

このように行うと以下のようなデータが取れます．

21
22
23
24
25
26
27
28
29
30
31
32
33
34

火
水
木
金
土
9 undefined

これはなぜなのでしょうか…ご助力お願いします…

Answer 1

dateTは7個(0から6)までしかないのに、iを加算することで、dateT[7]になると、undefinedになるのはやむなしかと思います。%を使ってください。

var date = new Date ();
    dateT = ["日","月","火","水","木","金","土"];
    for (var i = 0; i < 14; i++) {
      var day = date.getDate() + i;
      var dayOfWeek = dateT[(date.getDay() + i) % 7];
      console.log(day);
      console.log(dayOfWeek);
    }

-- 日付
日付の処理は面倒なので、moment.jsとか使ったほうがいいと思いますが、考え方として。
日付オブジェクトとして操作します。プリミティブに数値だけ取り出すと、月またぎ、週またぎをしないといけなくなる。

var date = new Date ();
    dateT = ["日","月","火","水","木","金","土"];
    for (var i = 0; i < 14; i++) {
      var cur = new Date(date.getFullYear(), date.getMonth(), date.getDate() + i);
      console.log(cur.getDate());
      console.log(dateT[cur.getDay()]);
    }

Comments

[naonao11]

ありがとうございます！
日付についてなのですが，32日になってしまうのはなぜなのでしょうか。。。

[yukihisa]

曜日と同じですよ。
今日の日付を取って来て、その日に対してiをそのまま足しているので、21+11を単純に行っているだけです。
今日21日だったね。。。

[mather]

現在の日付（21）に数値を足しているだけなので、21 + 11 = 32 という値が出てくるのは当然ですよね？

[papinianus]

naonao11さん、追記しました。
基本的に、日付はDateのまま使いましょう。そうすれば、32日とか33日とかををいい感じに解釈して、次の月の1日、2日にしてくれます。

[naonao11]

なるほど，Dateを二回用いるんですね！ありがとうございます！

[papinianus]

_lemon2003_さんの回答にもあるとおり、2回(というか、2回じゃなくて、15回だと思いますが)使うことは必須ではないです。
Dateというもののまま(数値を足すとかではなく)、Dateの仕組みとして解決するということです(今日+n日の日付を指定してnewして作ってもらう、Dateに。自分で日付そのものや曜日そのものを表す数値を作らない)。

私はsetDateして進めていくのが好きではないので、ループの回数だけnew Dateしています。

Answer 2

こっちのほうが仕組みを生かせてすっきりすると思います。

var date = new Date();
var dateT = ["日","月","火","水","木","金","土"];

for(var i = 0; i < 14; i++){
  var day = date.getDay();
  var dayOfWeek = dateT[date.getDay()];

  console.log(day);
  console.log(dayOfWeek);

  date.setDate(date.getDate() + 1); // 日付を一日進める
}

できるだけソースを壊さないようにしました。

date.setDate(date.getDate() + 1) で一日増やすことで、
32 日とか 33 日とか謎の日付が出ません。

---

コンソールの出力の仕方をかえてみたパターン

var table = [];

var date = new Date();
var dateT = ["日","月","火","水","木","金","土"];

for(var i = 0; i < 14; i++){
  var day = date.getDate();
  var dayOfWeek = dateT[date.getDay()];

  table.push({day: day, dayOfWeek: dayOfWeek});

  date.setDate(date.getDate() + 1); // 日付を一日進める
}

console.table(table);

Comments

[yukihisa]

var day = date.getDay();　を　var day = date.getDate();　にしないと日付でなく曜日番号が出てしまいますよ。
と、日付を進めるのはループの最後にしないと今日からにならないですよー

[_lemon2003_]

失礼しました、ミスタイプです。

修正しておきます。

[yukihisa]

修正ありがとうございます。