このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTMLInputElement: valueAsDate プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年11月.
valueAsDate はHTMLInputElement インターフェイスのプロパティで、<input> 要素の現在の値をDate として表します。変換が不可能な場合はnull となります。
このプロパティは直接設定することもでき、例えば、何らかの条件に基づく既定の日付を指定する場合などに使用します。指定された値がnull でもDate オブジェクトでもない場合、TypeError が発生します。指定された値がnull または無効な日付である場合、入力値は空文字列に設定されます。
このプロパティは、日付または時刻に基づかない入力フィールドでアクセスされた場合、常にnull を返します。このような入力でこのプロパティを設定しようとすると、InvalidStateError のDOMException が発生します。
値
Date オブジェクトで、変換ができない場合はnull です。
例
日付値の受け取り
この例では、valueAsDate プロパティを<input> のweek 型に対してアクセスする様子を紹介します。
HTML
<input> のweek 型を設置します。
<label for="date">日付を選んでください:</label><input name="date" type="week" /><pre></pre>JavaScript
日付が選択されていない場合、空の入力フィールドは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 のメソッドの使用
この例は、Date のメソッドを<input> のdate 型のvalueAsDate プロパティに直接適用しています。
HTML
<input> のdate 型を設置します。
<label for="date2">日付を選択:</label><input name="date2" type="date" /><pre></pre>JavaScript
日付が選択されていない場合、空文字列は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;}結果
地域時間帯によっては、日付がずれる場合があります。
仕様書
| Specification |
|---|
| HTML # dom-input-valueasdate-dev |