汎用性の高い方の日数計算ツール（JavaScript）

前回、経過日数を自動計算するJavaScriptの記事を書きました。ランニングを再開してから何日経ったかを知るためのものです。

driveon43.com

設定した開始日が2024年2月27日です。その日に生まれたお子さんや、何かを始めた人向けのツールなので、それ以外の人には全く意味の無いツールです。

パーソナライズさせると他の人には使えないというよい例でした。

もう少し使い勝手のよいものに改変しました。

開始日と終了日を指定する汎用性の高い日付計算ツールを貼り付けておきます。同じ記事に貼り付けるとエラーが起こったので別記事に分けました。

日数計算ツール
コード
JavaScriptを使用した記事

日数計算ツール

開始日:

終了日:

開始日を含む

コード

はてなブログの編集画面に下記コードをそのまま貼り付ければ動きます。昨日の記事のコードと同時に貼り付けると干渉し合うようで上手く動きません。

ローカルのHTMLファイルに貼り付けるときは、<script></script>の部分を<head></head>の間に入れてください。

コード（クリックで展開）

<script>
function calculateDays() {
    // HTMLの入力フィールドから日付を取得
    var startDate = document.getElementById("startDate").value;
    var endDate = document.getElementById("endDate").value;

    // Dateオブジェクトに変換
    var start = new Date(startDate);
    var end = new Date(endDate);

    // 日数の差を計算（ミリ秒単位で差を取り、それを日数に変換）
    var difference = end - start;
    var days = difference / (1000 * 3600 * 24);

    // 開始日を含むかどうかのチェックボックスを確認
    if (document.getElementById("includeStart").checked) {
        days += 1;
    }

    // 結果をHTMLの要素に表示
    document.getElementById("result").innerHTML = "計算された日数: " + days + " 日";
}
</script>

<h2>日数計算ツール</h2>
<p>開始日: <input type="date" id="startDate"></p>
<p>終了日: <input type="date" id="endDate"></p>
<p><label><input type="checkbox" id="includeStart"> 開始日を含む</label></p>
<button onclick="calculateDays()">日数計算</button>
<p id="result"></p>