ywork2020.com

Title

日付の取得と操作

目次 (INDEX)

Dateとは

Date とは次の語句からなるjavascriptのコンストラクターです。
date
読み: デイト
意味: 日付

目次に戻る

Dateの概要

これはDateクラスから日付オブジェクトのインスタンスを生成するためのコンストラクターです。 new演算子に続けてコンストラクターを記述することで、新しいオブジェクトを生成することができます。

Dateオブジェクトは現在の日時を取得したり、指定した年月日の情報を取得することができます。 また、生成したオブジェクトの各プロパティ値を変更することで日付や時間に関する任意のデータにアクセスすることも可能です。

目次に戻る

サンプルコードと実行結果

ここからは実際にDateオブジェクトから色々な情報を取得してみたいと思います。

現在の日時を取得する

このサンプルはDateオブジェクトのインスタンスを生成して、そのオブジェクトから 現在の日時を取得して書き出します。

サンプルコード: script
<script>
	let objDate = new Date();
	document.write(objDate);
</script>
  • 02: objDataという変数にDateオブジェクトのインスタンスを代入します。※1
  • 03: writeメソッドでobjDataの値を書き出しています。
※1: Date(引数)の部分の引数には何も入っていません。引数を空にしておくことで今現在の日付時刻をもつことになります。
実行結果: 今のタイムスタンプを取得して書き出す

目次に戻る

年月日と曜日番号を取得する

ここでは次の4つのメソッドを使って年月日と曜日の番号を取得してみます。 このメソッドの引数は空で使用します。つまり()の中は空ということです。

  1. getFullYear(): 地方時に基づき、年を返します。
  2. getMonth(): 地方時に基づき、月をインデックス値として返します。
  3. getDate(): 地方時に基づき、日を返します。
  4. getDay(): 地方時に基づき、曜日をインデックス値として返します。
サンプルコード: script
<script>
	//let objDate = new Date();
	document.write(objDate.getFullYear(),"年","<br>");
	document.write(objDate.getMonth(),"月","<br>");
	document.write(objDate.getDate(),"日","<br>");
	document.write(objDate.getDay(),"曜日","<br>");
</script>
02: objDateは最初のサンプルで宣言しているオブジェクト名です。重複している場合にはエラーになりますので記述しないでください。
実行結果: 年月日と曜日番号を取得する

実行結果では、月の値は-1した結果となり、月と曜日の値はインデックス値で返っているのが分かります。 このことから月の値は+1する必要があります。また、曜日はインデックス値に合わせた配列を用意する必要がありそうです。

目次に戻る

月と曜日の問題を解決する

それでは次のサンプルで前項で挙げた月と曜日の問題を解決していきたいと思います。

サンプルコード: script
<script>
	//let objDate = new Date();
	let objArrDayName = new Array('日','月','火','水','木','金','土');
	document.write(objDate.getFullYear(),"年","<br>");
	document.write(objDate.getMonth()+1,"月","<br>");
	document.write(objDate.getDate(),"日","<br>");
	document.write(objArrDayName[objDate.getDay()],"曜日","<br>");
</script>
02: objDateは最初のサンプルで宣言しているオブジェクト名です。重複している場合にはエラーになりますので記述しないでください。

月の値が-1で表示される問題について
  • 05: objDate.getMonth()+1 と月のインデックス値に+1することで解決します。
曜日がインデックス値で表示される問題について
  • 03: 曜日のテキストを代入した配列を用意します。
  • 07: 配列名[インデックス値]のインデックス値の部分にobjDate.getDay()を当てはめてシンクロさせます。 配列については、Arrayのページを参照してください。
実行結果: 月と曜日の問題を解決する

目次に戻る

月末日を取得する

ここでは月末日を取得するために、新たにDateオブジェクトを生成します。 オブジェクト変数の名前はobjEndOfMonthとします。

Dateオブジェクトはインスタンスを生成するときにコンストラクターに引数を与えることによって、指定した年月日のオブジェクトを 生成することができます。構文は次の通りです。

Date(年の値, 月の値, 日の値)

注目していただきたいのは、サンプルコードの「日の値」の部分です。ここに「0」を指定すると、その月の月末日のオブジェクトを生成します。

Date(年の値, 月の値, 0)

サンプルコード: script
<script>
	//let objDate = new Date();
	let objEndOfMonth = new Date(objDate.getFullYear(), objDate.getMonth()+1, 0)
	document.write("今月末は", objEndOfMonth.getDate(),"日");
</script>
実行結果: 月末日を取得する

目次に戻る

Dateを使用する上での要点

  1. .getMonth()メソッドは月の値をインデックス値で返すので+1して使う
  2. .getDay()メソッドは曜日の値をインデックス値で返すので配列と組み合わせて使う

目次に戻る

値を取得するタイプのメソッド一覧

メソッド説明現時点の結果
Date.getDate()地方時で現在の「日」を返す
Date.getDay()地方時で現在の「曜日値」を返す
Date.getFullYear()地方時で現在の「年」を返す
Date.getHours()地方時で現在の「時」を返す
Date.getMilliseconds()地方時で現在の「ミリ秒」を返す
Date.getMinutes()地方時で現在の「分」を返す
Date.getMonth()地方時で現在の「月値」を返す
Date.getSeconds()地方時で現在の「秒」を返す
Date.getTime()1970年1月1日00:00:00時点からの経過時間をミリ秒単位で返す
Date.getTimezoneOffset()現地の時間帯のオフセットを分で返します
Date.getUTCDate()世界時で現在の「日」を返す
Date.getUTCDate()世界時で現在の「曜日値」を返す
Date.getUTCFullYear()世界時で現在の「年」を返す
Date.getUTCHours()世界時で現在の「時」を返す
Date.getUTCMilliseconds()世界時で現在の「ミリ秒」を返す
Date.getUTCMinutes()世界時で現在の「分」を返す
Date.getUTCMonth()世界時で現在の「月値」を返す
Date.getUTCSeconds()世界時で現在の「秒」を返す
Date.toDateString()「日付」を人が読みやすい形式にして返す
Date.toDateString()「日付」をISO 8601 Extended Format に準じた文字列に変換します
Date.toJSON()toISOString()を使用してDateを表す文字列を返します
Date.toLocaleDateString()システム設定の日時の「日付」を、地域の日付書式に従った文字列に変換して返します
Date.toLocaleString()システム設定の日時を、地域の日付書式に従った文字列に変換して返します
Date.toLocaleTimeString()システム設定の日時の「時刻」を、地域の日付書式に従った文字列に変換して返します
Date.toString()Dateオブジェクトの値を文字として返します
Date.toTimeString()Dateオブジェクトの「時刻」を文字として返します
Date.toUTCString()日時を UTC タイムゾーンを使用する文字列に変換します
Date.valueOf()Date オブジェクトのプリミティブ値を返します

目次に戻る

値を設定するタイプのメソッド一覧

メソッド説明
Date.setDate()地方時で「日」を設定します
Date.setFullYear()地方時で「年」を設定します
Date.setHours()地方時で「時」を設定します
Date.setMilliseconds()地方時で「ミリ秒」を設定します
Date.setMinutes()地方時で「分」を設定します
Date.setMonth()地方時で「月」を設定します
Date.setSeconds()地方時で「秒」を設定します
Date.setTime()1970年1月1日00:00:00からの経過時間をミリ秒単位の数で設定します
Date.setUTCDate()世界時で「日」を設定します
Date.setUTCFullYear()世界時で「年」を設定します
Date.setUTCHours()世界時で「時」を設定します
Date.setUTCMilliseconds()世界時で「ミリ秒」を設定します
Date.setUTCMinutes()世界時で「分」を設定します
Date.setUTCMonth()世界時で「月」を設定します
Date.setUTCSeconds()世界時で「秒」を設定します

目次に戻る