javaScriptで文字列から日付オブジェクトに変換する - JavaScript

javaScriptで文字列から日付オブジェクトに変換するコードを紹介します。

概要

JavaScriptで文字列を日付のオブジェクトに変換したい場合があります。文字列から日付オブジェクトを作成する場合には、Date クラスのコンストラクタを利用して変換します。

書式

次の書式を利用して、Dateオブジェクトを作成します。

 (変数) = new Date([日付、時刻文字列]);

記述例

var date1 = new Date('2021/10/4');

var datetime1 = new Date('2021/10/4 23:05:12');

プログラム例

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function DateTimeProc() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      var elem = document.getElementById("output");
      elem.innerHTML = "年:" + dtobj.getFullYear() + "<br/>";
      elem.innerHTML += "月:" + dtobj.getMonth() + "<br/>";
      elem.innerHTML += "日:" + dtobj.getDate() + "<br/>";
      elem.innerHTML += "曜日:" + dtobj.getDay() + "<br/>";
      elem.innerHTML += "時:" + dtobj.getHours() + "<br/>";
      elem.innerHTML += "分:" + dtobj.getMinutes() + "<br/>";
      elem.innerHTML += "秒:" + dtobj.getSeconds() + "<br/>";
    }
  </script>
</head>
<body>
  <input id="input" type="text" />
  <br />
  <input type="button" value="Exec" onclick="DateTimeProc();"/>
  <hr/>
  <p>出力</p>
  <div id="output"></div>
</body>
</html>

解説

[Exec]ボタンをクリックすると下記のDateTimeProc()関数を実行します。

    function DateTimeProc() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      var elem = document.getElementById("output");
      elem.innerHTML = "年:" + dtobj.getFullYear() + "<br/>";
      elem.innerHTML += "月:" + dtobj.getMonth() + "<br/>";
      elem.innerHTML += "日:" + dtobj.getDate() + "<br/>";
      elem.innerHTML += "曜日:" + dtobj.getDay() + "<br/>";
      elem.innerHTML += "時:" + dtobj.getHours() + "<br/>";
      elem.innerHTML += "分:" + dtobj.getMinutes() + "<br/>";
      elem.innerHTML += "秒:" + dtobj.getSeconds() + "<br/>";
    }

getElementById()メソッドを呼び出し、入力用のテキストボックスの要素を取得します。テキストボックスの入力文字列 valueプロパティの値を Date クラスのコンストラクタに与えて、文字列の日付、時刻の値のDateオブジェクトを作成します。

  var textbox = document.getElementById("input");

  var dtobj = new Date(textbox.value);

getElementById()メソッドを呼び出し、結果を出力する枠の要素を取得します。
要素のinnerHTML プロパティに先ほど作成したDateオブジェクトの要素の値を設定して、日付の要素の値を画面に表示します。

  var elem = document.getElementById("output");
  elem.innerHTML = "年:" + dtobj.getFullYear() + "<br/>";
  elem.innerHTML += "月:" + dtobj.getMonth() + "<br/>";
  elem.innerHTML += "日:" + dtobj.getDate() + "<br/>";
  elem.innerHTML += "曜日:" + dtobj.getDay() + "<br/>";
  elem.innerHTML += "時:" + dtobj.getHours() + "<br/>";
  elem.innerHTML += "分:" + dtobj.getMinutes() + "<br/>";
  elem.innerHTML += "秒:" + dtobj.getSeconds() + "<br/>";

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

テキストボックスに "2021/8/13" を入力します。入力後[Exec]ボタンをクリックします。

入力した文字列がDateオブジェクトに変換され、年、月、日、曜日の情報が出力エリアに表示されます。
月の数値は1月が0の値から始まるため、月の数値より1つ少ない値が表示されます。また、曜日は、0が日曜日となり、曜日が進むごとに1増えます。6が土曜日となります。詳しくはこちらの記事を参照してください。