Javascript

【JavaScript】日付処理の仕方（先月/来月/月初日/月末日を求める、型変換など）

JavaScriptで日付の扱い方について勉強したので、ここにまとめておきます。
╰(*´︶`*)╯

 

Dateクラスの使い方

JavaScriptで日付を扱うにはDateクラスを使うのが簡単です。

$(function(){
  console.clear();
  //現在の日付を取得（2019/12/11）
  var date = new Date();
  console.log(date);
  //  結果(日付)：[object Date]{ Wed Dec 11 2019 22:28:19 GMT+0900 (日本標準時) }
});

「new Date()」でインスタンスを作成する際、引数を空にすると現在の日付と時刻が取得できます。取得したオブジェクトはDate型になっています。

他にDateクラスには様々な関数が用意されており、年のみ取得したり、曜日を取得することも可能です。

$(function(){
  console.clear();
  //現在の日付を取得（2019/12/11）
  var date = new Date();
  console.log(date.getFullYear());
  //  結果(年)：2019
  console.log(date.getMonth()+1);
  //  結果(月)：12
  console.log(date.getDate());
  //  結果(日)：11
  console.log(date.getDay());
  //  結果(曜日)：3
  console.log(date.getHours());
  //  結果(時間)：22
  console.log(date.getMinutes());
  //  結果(分)：28
  console.log(date.getSeconds());
  //  結果(秒)：19
});

注意点が2つあります。

注意ポイント

  1. getMonth()で取得できる月は0始まりであり、実際の日付として扱うには＋１する必要があります。（0が1月、1が2月、・・・11が12月）
  2. getDay()で曜日を取得することができますが、曜日に対応した数値が返ってくる仕様になっています。（0が日曜、1が月曜、・・・6が土曜）

 

先月、来月、月初日、月末日の求め方

Dateクラスをうまく使うと先月、来月、月初日、月末日の日付も簡単に求めることができます。

$(function(){
  console.clear();
  //現在の日付を取得（2019/12/11）
  var date = new Date();

  // 来月
  var next_month = new Date(date.getFullYear(), date.getMonth()+1, date.getDate());
  // 先月
  var last_month = new Date(date.getFullYear(), date.getMonth()-1, date.getDate());
    
  console.log(next_month.getFullYear()+ "/" +(next_month.getMonth()+1)+ "/" + next_month.getDate());
  //  結果(来月)："2020/1/11"
  console.log(last_month.getFullYear()+ "/" +(last_month.getMonth()+1)+ "/" + last_month.getDate());
  //  結果(先月)："2019/11/11"
    
  // -------------------------------
  // 月初日
  var first_date = new Date(date.getFullYear(), date.getMonth(), 1);
  // 月末日
  var last_date = new Date(date.getFullYear(), date.getMonth()+1, 0);
    
  console.log(first_date.getFullYear()+ "/" +(first_date.getMonth()+1)+ "/" + first_date.getDate());
  //  結果(月初日)："2019/12/1"
  console.log(last_date.getFullYear()+ "/" +(last_date.getMonth()+1)+ "/" + last_date.getDate());
  //  結果(月末日)："2019/12/31"
});

 

日付型から文字、文字から日付型への変換

Javascriptで日付を使っていると、取得した日付を画面上に表示させたい時があります。

そういった場合では日付型のデータをそのまま画面に埋め込んでもうまく表示されないため、一旦文字列型に変換する必要があります。

$(function(){
  console.clear();
  //現在の日付を取得（2019/12/11）
  var date = new Date();

  // 日付型から文字列へ変換
  console.log(date.toString());    
  //  結果(日付)："Wed Dec 11 2019 22:28:19 GMT+0900 (日本標準時)"

  // 文字列から日付型へ変換
  var date     = "2019/12/11";
  var date_array = date.split("/");
  var date2 = new Date(date_array[0], date_array[1]-1, date_array[2]);
  console.log(date2);
  //  結果(日付)：[object Date]{ Wed Dec 11 2019 00:00:00 GMT+0900 (日本標準時) }
  });
});

文字列から日付型への変換は「toString()」を使います。

日付型から文字列の変換に関してはやり方はいろいろあり、画面の仕様によって作りを変える必要がありますが、上記例ではスラッシュ（／）区切りの日付文字列に対して日付型に変換する例を載せています。

以上です。

-Javascript