(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">が期待する形式です）。