<input type="date">

入力欄に入力された日付を表す文字列です。日付は日付文字列形式に従って書式化されます。

次のように、日付の入力欄の既定値を value 属性に設定することができます。

<input type="date" value="2017-06-01" />

JavaScript での日付値を取得したり設定したりするには、次のように HTMLInputElement の value および valueAsNumber プロパティで行うことができます。

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // "2017-06-01" と表示
console.log(dateControl.valueAsNumber); // 1496275200000 と JavaScript タイムスタンプを表示

このコードは <input> 要素のうち type が date である最初のものを探し、値を 2017-06-01 （2017 年 6 月 1 日）に設定します。それからその値を文字列と数字の書式で読み直しています。

すべての <input> 要素に共通する属性は date 入力型にも適用されますが、その表示に影響を与えないかもしれません。例えば、 size や placeholder は動作しないかもしれません。 date 入力には以下の追加属性があります。

受け付ける最も遅い日付です。要素に入力された value がこれ以降になった場合、要素は制約検証に失敗します。 max 属性の値が yyyy-mm-dd の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。

max と min の両方の属性を設定する場合、この値は min 属性にあるものより遅いか、同じ日付文字列でなければなりません。

受け付ける最も早い日付です。要素に入力された value がこれ以前になった場合、要素は制約検証に失敗します。 min 属性の値が yyyy-mm-dd の書式のありうる日付でない場合、要素は最小の日付値を持ちません。

max と min の両方の属性を設定する場合、この値は max 属性で指定されたものより早いか、同じ日付である必要があります。

step 属性は値が準拠する粒度を指定する数値、または後述する特殊な値 any です。刻みの基準値（指定されていれば min、そうでなければ value、どちらも提供されていなければ適切な既定値）に等しい値のみが有効となります。

文字列値の any は刻みがないことを意味し、（min や max のようなほかの制約を除けば）どの値でも許可されます。

date 入力欄では、 step の値は日単位で指定します。また、 86,400,000 に step を乗じた値に等しいミリ秒数として扱われます（数値はミリ秒単位であるため）。 step の既定値は 1 であり、 1 日を表します。

日付入力は日付を選ぶための簡単なインターフェイスを提供し、ユーザーのロケールに関係なくサーバーに送信されるデータ形式を正規化します。

この節では、<input type="date"> の基本的な使用方法から、より複雑な使用方法まで見ていきます。

もっとも単純な <input type="date"> の使用方法は、次のように基本的な <input> と <label> 要素の組み合わせです。

<form action="https://example.com">
  <label>
    誕生日を入力してください。
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>

この HTML は入力された日付を bday キーに入れて https://example.com に送ります。 — 結果の URL は https://example.com/?bday=1955-06-08 のようになります。

min および max 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を 2017-04-01 に、日付の最大値を 2017-04-30 に設定しています。

<form>
  <label
    >希望するパーティーの日を選んでください。
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

この結果は、 2017 年の 4 月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで 4 月以外にスクロールすることができなくなります。

step 属性を使用すると、日付が加算するたびに飛ばす日数を設定できます（例えば、土曜日のみを選択できるようにしたい場合など）。

<input type="date"> は size のような寸法に関する属性には対応していません。寸法を変更するには CSS を推奨します。

既定で、 <input type="date"> は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。

min および max を使用して有効な日付を制限すると（日付の最大値と最小値の設定を参照）、このフォームコントロールでは不正な日付を無効化し、範囲を外れた日付を送信しようとしたときにエラーを表示するでしょう。

required 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。

日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。

<form>
  <label>
    推奨したいパーティーの日を選択してください (必須、4 月 1 日～ 20 日):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>送信</button>
  </p>
</form>

不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。

上記の例で使用されている CSS です。 :valid および :invalid 擬似要素を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の <span> に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

この例では、ネイティブの <input type="date"> ピッカーを使用して日付ピッカーを作成します。

HTML は次のようになります。

<form>
  <div class="nativeDatePicker">
    <label for="bday">誕生日を入力してください。</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

CSS は次のようになります。

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

• 全般的な <input> およびその操作に使用するHTMLInputElement インターフェイス
• 日付と時刻の選択のチュートリアル
• HTML で使われる日付や時刻の形式
• CSS プロパティの互換性