[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始まりであり、実際の日付として扱うには+1する必要があります。(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()」を使います。

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

 



投稿日:2019-12-06    更新日:2020-03-16

[スポンサーリンク]

関連記事
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
サイト内検索
プロフィール

プロフィール

[Name : じゃぶじゃぶ(@jbjb_2019)]
都内で社内SEをしているおじさん。
仕事で得られる知識だけでは限界を感じ、 WEBの勉強がてらITブログを開始。
サーバからWEBサイトまでフルスクラッチで開発しました。
現在は勉強のモチベーションを保つために活用中。
興味があることを雑記的に書いていきます。

[スポンサーリンク]

[スポンサードリンク]