Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<input type="date"> 系

<input type="date"> 系

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週番号』です。

サンプルコード

<!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が初期値として表示されます。

<!-- ブラウザ上での表示イメージ（Chrome）-->
生年月日：    [ 年  /  月  /  日  📅 ]
予約時刻：    [ 時  :  分  🕐 ]
打ち合わせ：  [ 2025/06/01  10:00 📅 ]
開始月：      [ 年  /  月  📅 ]

[ 予約する ]