(Sample)

<input type="date">要素で20年前の日付をデフォルトに設定するには、JavaScriptを使用して現在の日付から20年前の日付を計算し、それをデフォルト値として設定するのが良いでしょう。

以下はそのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>デフォルト日付設定</title>
</head>
<body>

<form>
    <label for="birthdate">誕生日:</label>
    <input type="date" id="birthdate" name="birthdate">
</form>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const dateInput = document.getElementById('birthdate');
    const today = new Date();
    const twentyYearsAgo = new Date(today.getFullYear() - 20, today.getMonth(), today.getDate());

    const yyyy = twentyYearsAgo.getFullYear();
    const mm = String(twentyYearsAgo.getMonth() + 1).padStart(2, '0'); // 月は0から始まるので+1
    const dd = String(twentyYearsAgo.getDate()).padStart(2, '0');

    const defaultDate = `${yyyy}-${mm}-${dd}`;
    dateInput.value = defaultDate;
});
</script>

</body>
</html>

JavaScriptで日付を計算するポイント

  • DOMContentLoaded イベントを使って、ページが完全に読み込まれた後にスクリプトを実行します。
  • 現在の日付を取得し、それから20年前の日付を計算します。
  • 日付のフォーマットをYYYY-MM-DDに整形します(HTML5の<input type="date">が期待する形式です)。

最後までお読みいただきありがとうございます。