HTMLInputElement: valueAsDate プロパティ - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

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 型を設置します。

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

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

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

JavaScript

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

js
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 型を設置します。

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

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

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

JavaScript

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

js
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

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年10月23日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: valueAsDate プロパティ

In this article

値

例

日付値の受け取り

HTML

JavaScript

結果

Date のメソッドの使用

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN