【JavaScript】DateTime型をDate型にフォーマット変換

Reactを始めて、初めてJavaScriptを触った私が、JavaScriptでのDateTime型のフォーマットの変更の際にどう躓いたのでその方法をまとめました。

やりたいこと

デフォルトでこのような表示となっているものを以下のフォーマットに変更したい。

変更というか、日付だけのデータにしたい。

日付だけのデータにしたいのであれば、データ型をAWSDateにすればいいのではといえばそれまでですが、Datetimeで取得したいけど、ある部分の表示ではDateだけにしたい！といったことってありますよね！！

やってみた

いろいろ調べてみて、以下の記法にたどり着き、これでやってみました。

    for(let i in list){
      const li = list[i]
      li['createdAt'] = dc(li.createdAt);
    }

  function dc(date){
    const year = new Date(date).getFullYear();
    const month = new Date(date).getMonth();
    const day = new Date(date).getDate();

    return year+"-"+month+"-"+day
  }

配列のlistを展開して、展開した値を変数liとして定義。

その取り出した値の中のcreatedAtに対し、関数dcを実行して、新たなcreatedAtを作成。

こうすると、なぜか以下の結果となりました！

月が一ヶ月遡る！なぜ！？

この問題を解決します！

修正

まずは、new Date(date)が冗長なので変数にまとめます。

一桁の月日の場合、0が付くよう00ベースとし、sliceを使って後ろの2文字を取得する。

月は超単純に+1します。

なぜ+1なのか？常に+1で良いのか疑問が湧くところですよね。

結論は、常に+1で良いです。

なぜかというと、monthは0が起点であり、1月ならば0、12月ならば11でOKなのです。

これらを踏まえて、最終的に以下のようになりました！

  function dc(date){
    const dt = new Date(date)
    const year = dt.getFullYear();
    const month = ("00" + (dt.getMonth()+1)).slice(-2);
    const day = ("00" + dt.getDate()).slice(-2);

    return year+"-"+month+"-"+day
  }

結果は

見てくれてありがとうございました！