Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/input/date below:

<input type="date"> - HTML | MDN

Baseline Widely available

<input> 要素の type="date" は、ユーザーが日付を入力できる入力フィールドを作成します。 日付選択入力 UI の表示は、ブラウザーやオペレーティングシステムによって異なります。 値は yyyy-mm-dd 形式に正規化されます。

結果の値には年、月、日が含まれますが、時刻は含まれません。 time および datetime-local 入力型は時刻や日付と時刻の入力に対応しています。

<label for="start">Start date:</label>

<input
  type="date"
  id="start"
  name="trip-start"
  value="2018-07-22"
  min="2018-01-01"
  max="2018-12-31" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

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

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

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

メモ: 表示される日付の書式は実際の value とは異なります。 — 表示される日付はユーザーのブラウザーに設定されたロケールに基づいた書式になりますが、解釈される value は常に yyyy-mm-dd の書式です。

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 のようなほかの制約を除けば）どの値でも許可されます。

メモ: ユーザーによって入力されたデータが step 設定に従っていない場合、ユーザーエージェントは最も近い有効な値に丸める可能性があり、同じ距離の値が 2 つあった場合は、正の方向の値を優先します。

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

メモ: any を step 属性の値として指定すると、 1 を date 入力欄に設定したのと同じ効果になります。

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

この節では、<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: "✓";
}

警告: クライアント側のフォーム検証は、サーバー上の検証の代用にはなりません。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。

この例では、ネイティブの <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: " ✓";
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4