<input type="date"> 系

対応:		HTML5（2014）

HTML5では日付・時刻を入力するための専用タイプが追加されました。『type="date"』をはじめ、時刻・日時・月・週の選択ができるコントロールが用意されています。

構文

<!-- 日付（年/月/日） -->
<input type="date" name="birthday">

<!-- 時刻（時:分） -->
<input type="time" name="start_time">

<!-- 日時（日付＋時刻） -->
<input type="datetime-local" name="meeting">

<!-- 月（年/月） -->
<input type="month" name="birth_month">

<!-- 週（年/週番号） -->
<input type="week" name="target_week">

タイプ一覧

type属性値	概要
type="date"	年・月・日を選択するカレンダーピッカーが表示されます。送信値の形式は『YYYY-MM-DD』です。
type="time"	時・分（必要に応じて秒）を選択するコントロールです。送信値の形式は『HH:MM』です。
type="datetime-local"	日付と時刻を同時に選択します。送信値の形式は『YYYY-MM-DDTHH:MM』です。
type="month"	年・月を選択します。送信値の形式は『YYYY-MM』です。
type="week"	年・週番号を選択します。送信値の形式は『YYYY-W週番号』です。

サンプルコード

sample_input_date.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>日付系input</title>
</head>
<body>

  <form>
    <!-- 日付（範囲制限付き） -->
    <p>
      <label for="bday">生年月日：</label>
      <input type="date" id="bday" name="birthday"
        min="1900-01-01" max="2025-12-31">
    </p>

    <!-- 時刻（step=60で秒を非表示） -->
    <p>
      <label for="appoint">予約時刻：</label>
      <input type="time" id="appoint" name="time"
        min="09:00" max="18:00" step="1800">
    </p>

    <!-- 日時（初期値あり） -->
    <p>
      <label for="meet">打ち合わせ日時：</label>
      <input type="datetime-local" id="meet" name="meeting"
        value="2025-06-01T10:00">
    </p>

    <!-- 月（支払い開始月） -->
    <p>
      <label for="start">サービス開始月：</label>
      <input type="month" id="start" name="start_month"
        min="2025-01">
    </p>

    <p><button type="submit">予約する</button></p>
  </form>

</body>
</html>

実行結果

各入力欄に専用のピッカーUIが表示されます。「予約時刻」は9:00〜18:00の範囲で30分刻みで選択でき、「打ち合わせ日時」は2025年6月1日10:00が初期値として表示されます。

サンプルページはこちら

概要

日付系タイプを使うと、ブラウザが専用のカレンダーUIやタイムピッカーを自動的に表示してくれます。ユーザーは手入力不要で正確な日付を選択でき、フォーマットのミスも防げます。また、『min』・『max』属性で選択可能な範囲を制限できます。

日付系タイプはブラウザや OS によって表示が異なります。特に『type="week"』はSafariでサポートされていない場合があります（代わりにテキスト入力になります）。重要なフォームでは、未対応ブラウザへの対応も考慮してください。

『step』属性を使うと選択の刻み幅を制御できます。『type="time"』に『step="1800"』（秒単位）を指定すると30分刻みになります。フォームから送信される値はすべて国際規格（ISO 8601）に基づいた文字列形式です。サーバー側で日本語表記に変換して扱いましょう。

対応ブラウザ

デスクトップ

Chrome

20 以降 ○

19 以前 ×

Firefox

57 以降 ○

56 以前 ×

Safari

14.1 以降 ○

13.1 以前 ×

Edge

12 以降 ○

非対応 ×

Opera

11 以降 ○

10 以前 ×

モバイル

iOS Safari

5 以降 ○

4 以前 ×

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

JavaScriptとの連携

日付入力フィールドはJavaScriptと組み合わせることで、動的な日付制限や値の取得・変換が実装できます。

<!-- 今日の日付から将来の日付のみ選択可能にする -->
<label for="checkin">チェックイン日</label>
<input type="date" id="checkin" name="checkin">

<label for="checkout">チェックアウト日</label>
<input type="date" id="checkout" name="checkout">

<script>
  var checkinInput = document.getElementById('checkin');
  var checkoutInput = document.getElementById('checkout');

  // 今日の日付をYYYY-MM-DD形式で取得してminに設定
  var today = new Date().toISOString().split('T')[0];
  checkinInput.min = today;
  checkoutInput.min = today;

  // チェックイン日が変わったらチェックアウト日のminも更新
  checkinInput.addEventListener('change', function() {
    checkoutInput.min = checkinInput.value;
    // チェックアウト日がチェックイン日より前なら初期化
    if (checkoutInput.value < checkinInput.value) {
      checkoutInput.value = '';
    }
  });

  // 日付の値はYYYY-MM-DD形式で取得できる
  checkinInput.addEventListener('change', function() {
    var parts = checkinInput.value.split('-'); // ["2024", "03", "15"]
    console.log(parts[0] + '年' + parts[1] + '月' + parts[2] + '日');
  });
</script>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典