概要

日付を用いたコードを書きたいときに気をつけたいポイント。
最後に時計表示のサンプルあります。

日付を扱う

値の取得

ローカル

関数	値	備考
getFullYear()	年	getYear() は非推奨になりましたのでこっちを使いましょう。
getMonth()	月	`注意!` 0 を基点とした値が出るので +1 して正しい月となる。
getDate()	日
getDay()	曜日	日 -> 土 / 0 -> 6で出力
getHours()	時
getMinutes()	分
getSeconds()	秒
getMilliseconds()	ミリ秒	0 から 999 までの間の数値。4桁目から切り捨てられる。

getMonth だけ感覚と異なるのでそのまま使わないように注意！
曜日は cron と同じですね。

UTC

関数	値
getUTCFullYear()	年
getUTCMonth()	月
getUTCDate()	日
getUTCDay()	曜日
getUTCHours()	時
getUTCMinutes()	分
getUTCSeconds()	秒
getUTCMilliseconds()	ミリ秒

値を設定

ローカル

関数	設定する値	備考
setFullYear	年、月、日	年は必須
setMonth	月、日	月は0～11
setDate	日	1～31
setHours	時間、分、秒、ミリ秒
setMinutes	分、秒、ミリ秒
setSeconds	秒、ミリ秒
setMilliseconds	ミリ秒
setTime	UNIXエポックからのミリ秒

UTC

関数	設定する値
setUTCFullYear	年、月、日
setUTCMonth	月、日
setUTCDate	日
setUTCHours	時間、分、秒、ミリ秒
setUTCMinutes	分、秒、ミリ秒
setUTCSeconds	秒、ミリ秒
setUTCMilliseconds	ミリ秒

フォーマット

関数	値	フォーマット例	タイムゾーン	備考
toDateString	日付	Thu Apr 01 2023	Local
toLocaleDateString	日付	Monday, May 1, 2023 or 2023年5月1日月曜日	Local	ロケールに依存する形式の文字列に変換
toLocaleString	日付, 時刻	01/05/2023, 03:00:00 or 2023/5/1 3:00:00	Local	ロケールに依存する形式の文字列に変換
toLocaleTimeString	時刻	6:10:23 AM or 06:10:23	Local	ロケールに依存する形式の文字列に変換
toString	日付, 時刻	Thu Apr 01 2023 21:00:00 GMT+0900 (日本標準時)	Local
toTimeString	時刻	21:00:00 GMT+0900 (日本標準時)	Local
toISOString	日付, 時刻	2023-04-01T12:00:00.000Z	UTC	ISO 8601形式の文字列に変換
toJSON	日付, 時刻	2023-04-01T12:00:00.000Z	UTC	JSON形式で使える文字列に変換 (toISOStringを使用)
toUTCString	日付, 時刻	Thu, 01 Apr 2023 12:00:00 GMT	UTC

サンプル

値の取得

2023/12/31 は日曜日です。

var date1 = new Date('December 31, 2023 22:10:12.1235');
var date2 = new Date('December 31, 2023 22:10:12.1235 GMT+0900');
var date3 = new Date('December 31, 2023 22:10:12.1235Z');

出力

関数	date1	date2	date3
getFullYear	2023	2023	2024
getMonth	11	11	0
getDate	31	31	1
getDay	0	0	1
getHours	22	22	7
getMinutes	10	10	10
getSeconds	12	12	12
getMilliseconds	123	123	123

Chrome で実施しましたが、タイムゾーンなしはローカルタイムゾーンの文字列であると判断するそうです。
ただ、サーバーからUTCだと思って渡した文字列がローカルタイムと解釈されてしまったら困りますので扱い注意ですね。

時計

上記を元に時計を作ってみました。
Chrome だと以下のようにしてタイムゾーンを任意に変更できますので変化をお楽しみください。
（ミリ秒単位であわせていませんので、実際の時計より今のままだと若干遅れます。）

コード

<div id="currentTime"></div>
<script>
    function updateClock() {
        var d = new Date();
        var offsetTime = d.getTimezoneOffset() / -60;
        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

        var now = new Date();
        now.setHours(now.getUTCHours() + offsetTime);
        var year = String(now.getFullYear());
        var month = String(now.getMonth() + 1).padStart(2, '0');
        var day = String(now.getDate()).padStart(2, '0');
        var hours = String(now.getHours()).padStart(2, '0');
        var minutes = String(now.getMinutes()).padStart(2, '0');
        var seconds = String(now.getSeconds()).padStart(2, '0');

        var formattedTime = year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds + ' (' + timeZone + ')';
        document.getElementById('currentTime').innerText = formattedTime;
    }
    setInterval(updateClock, 1000);
    updateClock();
</script>

おわりに

ブラウザに時間の計算をさせる場合や、サーバーから日付の文字列を渡す場合はタイムゾーンを付けて誤った値にならないように注意したいですね。
また、テストする際も、タイムゾーンによって日付がずれたりしないか確認することも重要です。