HTML日付入力：value・min・max・stepと日付形式

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML <input type="date">は、年、月、日を入力するためのコントロールを提供します。そのカレンダー表示や表示順序はブラウザやロケールによって異なる場合がありますが、値と送信される値はYYYY-MM-DDに正規化されます。時間やタイムゾーンは含まれません。

初期日付と許可範囲を設定する

初期日付には value を使用し、最も早い日付と最も遅い日付には min/max を使用します。両方の境界は含まれます。属性には「2030年5月20日」のようなローカライズされた表示テキストではなく、有効な日付文字列が必要です。無効な最小値または最大値は、意図した制限を課さない可能性があります。

name は送信されるフィールド名であり、id はラベルを関連付けます。必須入力には required を使用してください。範囲指定はすべてのブラウザで同じ方法で日付入力を防ぐわけではありません。直接入力された範囲外の日付は制約検証に失敗します。

完全な例: 日付文字列と有効性を確認する

次のドキュメントを date-demo.html として保存し、ブラウザで開いてください。これは、予約をしたりデータをサーバーに送信したりせずに、練習用として 2030 年 5 月の任意の日付を表示します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>日付入力値の確認</title>
</head>
<body>
  <h1>訪問日の練習</h1>
  <form id="demo">
    <label for="visit">訪問日（2030年5月、必須）</label>
    <input type="date" id="visit" name="visit"
           value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
    <button type="submit">値を確認</button>
    <button type="reset">初期化</button>
  </form>
  <p id="result" aria-live="polite"></p>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = 'visit = ' + new FormData(form).get('visit');
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

初期日付で送信すると、次の値が表示されます：visit = 2030-05-20
別の 5 月の日付を選択して送信し、その日付文字列を表示します。範囲外の日付は最小値／最大値バリデーションによってブロックされます。
日付をクリアして送信すると、必須バリデーションによってブロックされます。リセットすると 5 月 20 日に戻ります。

step ユニットは日単位で、デフォルトは 1 です。例ではステップのみを 7 に変更します：最小日付である 5 月 1 日が基準となるため、5 月 1 日、8 日、15 日、22 日、29 日がこの間隔に合います。最初の 5 月 20 日の値はもう合いません。有効な 5 月 8 日の選択を確認し、次にステップを 1 に戻して毎日を許可します。単一のステップ設定では、週末や祝日を含む業務カレンダーは実装されません。

表示形式、タイムゾーン、サーバー検証

ロケール固有の日付ピッカーを変更するために、値にスラッシュやローカライズされた文字列を入れないでください。カレンダーの日付のみが必要な場合、文字列として扱うことで不必要なタイムゾーン変換を避けることができます。時間も必要なデータは、日付だけでは不十分であり、別のタイムゾーンポリシーが必要です。

幅はサイズ属性ではなくCSSで制御してください。ラベルと範囲の説明を提供し、未対応のコントロールやブラウザのチェックを回避するリクエストに対して、サーバー側で実際の日付、うるう年、範囲、業務上の利用可否を検証してください。日付を選択しても場所の予約やサーバーで管理する最新の予約可否の確認にはなりません。MDNの日付入力リファレンスは属性ルールを説明しています。

HTMLリファレンス