日付を入力すると過去の日付や先の日付を様々なカレンダー内容が表示できるツールです。

仕様
１．入力された日付・曜日の表示
２．国民の祝日表示
３．日付入力された前後の日数
４．日付入力された前後の経過時間
５．干支の表示
６．十二支の表示
７．六曜の表示
８．結果の印刷
利用について
カレンダー検索ツールはコードの変更・削除・追加や、デザインの変更など、制限はありません。また、コピー&ペーストで、使用した不具合等がありましても、製作者は責任を負う事はできません。
※変更しないで、ご使用された場合はどこか片隅に小さくMOMOPLANと表示して頂くと嬉しいです。

デモページ

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付計算ツール</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>カレンダー検索ツール</h1>
    <div id="currentDateTime"></div>
    <form id="dateForm">
        <h3><label for="inputDate"><FONT color="#660099" >【西暦 月 日を入力 2000年以降】</FONT></label></h3>
        <input type="date" id="inputDate" min="2000-01-01" required>  
        <button type="button" onclick="calculate()" class="btn">計算</button>
    </form>  
    <table id="resultTable">
        <thead>
            <tr>
                <th colspan="2">結果表示</th>
            </tr>
        </thead>
        <tbody id="resultBody">
            <!-- 結果がここに追加されます -->
        </tbody>
    </table>
    <div id="result"></div>
    <br>
    <center><button id="printButton" onclick="printTable()">結果を印刷</button></center>
    <script src="script.js"></script>
</body>
</html>
JS
document.addEventListener("DOMContentLoaded", displayCurrentDateTime);
// ページ読み込み時に現在の日付と時間を表示
function displayCurrentDateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 月は0から始まる
    const day = now.getDate();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    const currentDateTime = `${year}年${month}月${day}日 ${hours}時${minutes}分${seconds}秒`;
    document.getElementById("currentDateTime").innerHTML = `<p><b>現在の日時: ${currentDateTime}</b></p>`;
}
// 1秒ごとに実行する設定
setInterval(displayCurrentDateTime, 1000);

// 六曜を計算する関数
function getRokuyo(year, month, day) {
    const baseDate = new Date(1900, 0, 1); // 基準日を1900年1月1日とする
    const inputDate = new Date(year, month - 1, day);
    const daysSinceBase = Math.floor((inputDate - baseDate) / (1000 * 60 * 60 * 24));
    const rokuyoList = ["大安", "赤口", "先勝", "友引", "先負", "仏滅"];
    return rokuyoList[daysSinceBase % 6];
}

// 計算機能
function calculate() {
    const inputValue = document.getElementById("inputDate").value;
    const calculationDate = new Date();
    const resultDiv = document.getElementById("result");
    if (!resultDiv) {
    console.error("結果を表示する要素 'result' が見つかりません。");
    return;
    }

    if (!inputValue) {
        resultDiv.innerHTML = "<center><p style='color: red;'>日付入力が間違っています。</p></center>";
    // 3秒後にエラーメッセージを消す
    setTimeout(() => {
        resultDiv.innerHTML = "";
    }, 3000);

    return;
    }
    
    const inputDate = new Date(inputValue);
    if (isNaN(inputDate.getTime())) {
        resultDiv.innerHTML = "<p>正しい日付を入力してください（例: 2025-04-21）。</p>";
        return;
    }
    
    // 入力された日付
    const year = inputDate.getFullYear();
    const month = inputDate.getMonth() + 1; // 月は0から始まる
    const day = inputDate.getDate();

    // 曜日を表示
    const weekdays = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
    const weekday = weekdays[inputDate.getDay()];

    // 閏年判定
    const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
    const leapYearMessage = isLeapYear ? "閏年です。" : "閏年ではありません。";

    // 現在までの日数計算
    const diffInMillis = calculationDate- inputDate;
    const diffInDays = Math.floor(diffInMillis / (1000 * 60 * 60 * 24));
    const daysMessage = diffInMillis >= 0
        ? `${diffInDays.toLocaleString()}日前です。`
        : `${Math.abs(diffInDays).toLocaleString()}日後です。`;

    // 時間、分、秒まで計算
    const diffInSeconds = Math.floor(diffInMillis / 1000);
    const hours = Math.floor(Math.abs(diffInSeconds) / 3600);
    const minutes = Math.floor((Math.abs(diffInSeconds) % 3600) / 60);
    const seconds = Math.abs(diffInSeconds) % 60;
    const timeMessage = diffInMillis >= 0
        ? `${hours.toLocaleString()}時間${minutes}分${seconds}秒前です。`
        : `${hours.toLocaleString()}時間${minutes}分${seconds}秒後です。`;

    // 国民の祝日判定
    const holidays = {
        "1-1": "元日",
        "2-11": "建国記念の日",
        "2-23": "天皇誕生日",
        "4-29": "昭和の日",
        "5-3": "憲法記念日",
        "5-4": "みどりの日",
        "5-5": "こどもの日",
        "8-11": "山の日",
        "11-3": "文化の日",
        "11-23": "勤労感謝の日"
        // 動的祝日は別途計算が必要です
    };

    const holidayKey = `${month}-${day}`;
    const holidayMessage = holidays[holidayKey] ? `この日は「${holidays[holidayKey]}」です。` : "この日は祝日ではありません。";

    // 干支の計算
    const zodiacAnimals = [
        "子 (ね)", "丑 (うし)", "寅 (とら)", "卯 (う)", "辰 (たつ)", "巳 (み)",
        "午 (うま)", "未 (ひつじ)", "申 (さる)", "酉 (とり)", "戌 (いぬ)", "亥 (い)"
    ];
    const zodiac = zodiacAnimals[(year - 4) % 12]; // 干支の基準は西暦4年

    // 十二支の計算
    const heavenlyStems = ["甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"];
    const earthlyBranches = ["子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"];
    const tenkan = heavenlyStems[(year - 4) % 10];
    const juniShi = earthlyBranches[(year - 4) % 12];
    const eto = `${tenkan}${juniShi}`;

    // 六曜の計算
    const rokuyo = getRokuyo(year, month, day);

   // テーブルに結果を表示
   resultBody.innerHTML = `
   <tr><td>入力された日付</td><td>${year}年${month}月${day}日 (${weekday})</td></tr>
   <tr><td>閏年判定</td><td>${leapYearMessage}</td></tr>
   <tr><td>現在からの日数</td><td>${daysMessage}</td></tr>
   <tr><td>時間の差</td><td>${timeMessage}</td></tr>
   <tr><td>干支</td><td>${zodiac}</td></tr>
   <tr><td>十二支</td><td>${eto}</td></tr>
   <tr><td>六曜</td><td>${rokuyo}</td></tr>
`;
}

// テーブルを印刷する機能
function printTable() {
    const resultTable = document.getElementById("resultTable");
    const newWin = window.open("", "", "width=800,height=600");
    newWin.document.write(`
        <html>
            <head>
                <title>印刷用テーブル</title>
                <style>
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        border: 1px solid #000;
                    }
                    th, td {
                        border: 1px solid #000;
                        padding: 10px;
                        text-align: center;
                    }
                </style>
            </head>
            <body>
                ${resultTable.outerHTML}
            </body>
        </html>
    `);
    newWin.document.close();
    newWin.focus();
    newWin.print();
    newWin.close();
}

// ページ読み込み時に現在時刻を表示
document.addEventListener("DOMContentLoaded", displayCurrentDateTime);
CSS
/* 全体の背景とフォントスタイル */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff; /* 優しい青系の背景 */
    margin: 20px;
    color: #333;
    background-image: url("s-brick008.gif");
}

/* ヘッダーのスタイル */
h1 {
    text-align: center;
    color: #004080;
}

/* 現在の日付表示 */
#currentDateTime {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #0066cc;
}

/* フォームスタイル */
form {
    text-align: center;
    margin-bottom: 20px;
}

label {
    font-size: 1em;
    color: #333;
}

/* ボタンのスタイル */
.btn {
    background-color: #0073e6; /* 鮮やかな青 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #005bb5; /* ホバー時に少し暗くする */
}

.btn:active {
    background-color: #003f7f; /* クリック時 */
}

/* テーブルの基本スタイル */
table {
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
    border: 2px solid #004080; /* テーブル外枠の色 */
    background-color: #ffffff; /* 白背景 */
}

th, td {
    border: 1px solid #004080; /* セルの罫線 */
    padding: 10px;
    text-align: center;
}

thead {
    background-color: #6fdff3; /* ヘッダーの背景色 */
    font-weight: bold;
    font-size: 20px;
    color: #08315a; /* ヘッダーの文字色 */
}

tbody tr:nth-child(even) {
    background-color: #f2f9ff; /* 偶数行の背景色 */
}

tbody tr:nth-child(odd) {
    background-color: #ffffff; /* 奇数行の背景色 */
}

/* 印刷用スタイル */
@media print {
    body * {
        visibility: hidden; /* 全体を非表示に */
    }
    #resultTable, #resultTable * {
        visibility: visible; /* テーブルを表示 */
    }
    #resultTable {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    th, td {
        border: 1px solid #000;
    }
}

.btn {
    background-color: #0073e6; /* 鮮やかな青 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 13px 22px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #005bb5; /* ホバー時に少し暗くする */
}

.btn:focus {
    outline: 2px solid #FFD700; /* フォーカス時の視認性向上 */
}

/* 日付入力フィールドのスタイル */
input[type="date"] {
    width: 90%; /* 横幅を広げる */
    max-width: 200px; /* 大きすぎる入力欄を防ぐ */
    height: 36px; /* 縦方向の高さを設定 */
    font-size: 1.2em; /* 文字サイズを拡大 */
    padding: 5px 10px; /* 内側の余白を設定 */
    border: 2px solid #0073e6; /* ボーダーに目立つ色を設定 */
    border-radius: 5px; /* 角を丸くして柔らかい印象に */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* わずかな影を追加 */
}

input[type="date"]:focus {
    outline: none; /* デフォルトのフォーカス枠を非表示 */
    border-color: #005bb5; /* フォーカス時のボーダー色 */
    box-shadow: 0 0 8px rgba(0, 115, 230, 0.5); /* フォーカス時の輝き */
}
#printButton {
    background-color: #12aa56; /* 鮮やかな青 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 22px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

以上です　お疲れさまでした。