日付が今日以降の日付かどうかを確認したい | 日付・時間操作

日付が今日以降の日付かどうかを確認したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.23

このプログラムでは、指定された日付が「今日」または「今日以降」の日付であるかどうかを判定します。日付が今日以降であればtrue、過去の日付であればfalseを返します。

使用するメソッド: getTime(), setHours()
日付が今日以降かを確認するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Dateオブジェクトメソッドの機能一覧

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

setHours()メソッドを使用して今日の日付の時間を午前0時にリセットし、正確に「今日」を判定します。

日付が今日以降かを確認するプログラム

以下のコードでは、昨日と明日の日付が今日以降かどうかを確認しています。

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 isDateTodayOrLater(targetDate) {
                const today = new Date();
                // 今日の日付を午前0時0分0秒に設定
                today.setHours(0, 0, 0, 0);
                return targetDate >= today;
            }

            // テスト用の日付
            const futureDate = new Date();  // 今日
            futureDate.setDate(futureDate.getDate() + 1); // 明日に設定

            const pastDate = new Date();  // 今日
            pastDate.setDate(pastDate.getDate() - 1); // 昨日に設定

            // 結果をHTMLに表示
            document.getElementById('futureResult').textContent = `明日: ${isDateTodayOrLater(futureDate) ? '今日以降' : '過去'}`;
            document.getElementById('pastResult').textContent = `昨日: ${isDateTodayOrLater(pastDate) ? '今日以降' : '過去'}`;
        }
    </script>
</head>
<body>

    <h1>日付が今日以降かを確認する方法</h1>

    <div id="futureResult"></div>
    <div id="pastResult"></div>

</body>
</html>