日付オブジェクトを比較して早いか遅いかを判定したい | 日付・時間操作

日付オブジェクトを比較して早いか遅いかを判定したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、2つの日付オブジェクトを比較し、どちらが早い日付か遅い日付か、または同じ日付かを判定します。

使用するメソッド: getTime()
日付オブジェクトを比較するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

使用するメソッド: getTime()

getTime()メソッドは、日付のミリ秒タイムスタンプを取得し、日付同士の比較を可能にします。これにより、日付が前か後かを判断できます。

日付オブジェクトを比較するプログラム

以下のコードでは、2024年9月20日と2024年9月25日を比較し、どちらが早いか、遅いかを判定しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付オブジェクトを比較して早いか遅いかを判定する方法</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        window.onload = function() {
            // 日付を比較して早いか遅いかを判定する関数
            function compareDates(date1, date2) {
                if (date1.getTime() > date2.getTime()) {
                    return "後の日付";
                } else if (date1.getTime() < date2.getTime()) {
                    return "前の日付";
                } else {
                    return "同じ日付";
                }
            }

            // テスト用の日付
            const date1 = new Date(2024, 8, 20); // 2024年9月20日
            const date2 = new Date(2024, 8, 25); // 2024年9月25日

            // 結果をHTMLに表示
            document.getElementById('compareResult').textContent = `2024年9月20日は、2024年9月25日より${compareDates(date1, date2)}です。`;
        }
    </script>
</head>
<body>

    <h1>日付オブジェクトを比較して早いか遅いかを判定する方法</h1>

    <div id="compareResult"></div>

</body>
</html>