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

Showing content from http://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/valueAsDate below:

HTMLInputElement: valueAsDate プãƒãƒ‘ティ - Web API

Baseline Widely available

valueAsDate は HTMLInputElement インターフェイスのプロパティで、<input> 要素の現在の値を Date として表します。変換が不可能な場合は null となります。

このプロパティは直接設定することもでき、例えば、何らかの条件に基づく既定の日付を指定する場合などに使用します。指定された値が null でも Date オブジェクトでもない場合、TypeError が発生します。指定された値が null または無効な日付である場合、入力値は空文字列に設定されます。

このプロパティは、日付または時刻に基づかない入力フィールドでアクセスされた場合、常に null を返します。このような入力でこのプロパティを設定しようとすると、InvalidStateError の DOMException が発生します。

Date オブジェクトで、変換ができない場合は null です。

この例では、valueAsDate プロパティを <input> の week 型に対してアクセスする様子を紹介します。

<input> の week 型を設置します。

<label for="date">日付を選んでください:</label>

<input name="date" id="date" type="week" />

<pre id="log"></pre>

日付が選択されていない場合、空の入力フィールドは null に解決されます。選択が行われるたびに change イベントが発行され、<pre> の内容は、このフォームコントロールの HTMLInputElement.value とその値を日付としたものを比較して表示します。

const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `初期値: ${inputElement.valueAsDate}`;

inputElement.addEventListener("change", () => {
  logElement.innerText = `${inputElement.value} は ${inputElement.valueAsDate} に解決します`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

この例は、Date のメソッドを <input> の date 型の valueAsDate プロパティに直接適用しています。

<input> の date 型を設置します。

<label for="date2">日付を選択:</label>

<input name="date2" id="date2" type="date" />

<pre id="log"></pre>

日付が選択されていない場合、空文字列は null に変換されます。選択が行われるたびに、change イベントが発行されます。次に、選択された日付を、Date オブジェクトの toLocaleDateString() メソッドを使用してフォーマットし、ログに記録します。

const logElement = document.getElementById("log");
const inputElement = document.getElementById("date2");
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

logElement.innerText = `初期値: ${inputElement.valueAsDate}`;

inputElement.addEventListener("change", () => {
  if (inputElement.valueAsDate !== null) {
    logElement.innerText = `${inputElement.valueAsDate.toLocaleDateString("ja-JP", options)}を選択しました`;
  } else {
    logElement.innerText = `${inputElement.value} は ${inputElement.valueAsDate} に解決します`;
  }
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

地域時間帯によっては、日付がずれる場合があります。

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