HTMLInputElement: valueAsDate 屬性
HTMLInputElement 介面的 valueAsDate 屬性表示 <input> 元素的當前值，形式為 Date 物件，如果無法轉換則為 null。
此屬性也可以直接設定，例如基於某些條件設定預設日期。如果提供的值既不是 null 也不是 Date 物件，則會丟擲 TypeError。如果提供的值是 null 或 無效日期，則輸入值為設定為空字串。
當在非日期或時間輸入上訪問此屬性時，它始終返回 null。當在此類輸入上設定此屬性時，會丟擲 InvalidStateError DOMException。
值
一個 Date 物件，如果無法轉換則為 null。返回的日期應始終解釋為 UTC 時間——例如，使用 getUTCDate() 等方法而不是 getDate()。如果不小心，結果可能會相差 1 天——例如，如果使用者居住在 UTC 偏移量為負數（例如美國）的地區，則將日期解釋為本地日期將導致比使用者選擇的日期早一天。
month、date 和 week 輸入型別返回一個 UTC 日期，該日期表示輸入時間段的第一個瞬間——即，它們始終是 UTC 午夜。對於 month，日期是該月份的第一天。對於 week，日期是該周的星期一。time 輸入型別始終將日期設定為 1970-01-01。
datetime-local 輸入型別不支援 valueAsDate 屬性，因為它表示本地時區中的日期和時間（牆上時鐘時間），而 Date 物件表示絕對時間點。但是，某些瀏覽器可能提供非標準實現。WHATWG 正在努力將 Temporal API 與日期/時間輸入整合，以處理這種情況。
示例
檢索日期值
此示例演示瞭如何訪問型別為 week 的 <input> 元素的 valueAsDate 屬性。
HTML
我們包含了一個型別為 week 的 <input> 元素
<label for="date">Pick a date and time:</label>
<input name="date" id="date" type="week" />
<pre id="log"></pre>
JavaScript
當未選擇日期或時間時，空輸入解析為 null。每次做出選擇時，都會觸發一個 change 事件，更新顯示錶單控制元件的 HTMLInputElement.value 與其作為日期值進行比較的 <pre> 內容。
const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");
logElement.innerText = `Initial value: ${inputElement.valueAsDate}`;
inputElement.addEventListener("change", () => {
logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsDate}`;
});
結果
使用 Date 方法
此示例演示瞭如何將 Date 方法直接應用於型別為 date 的 <input> 元素的 valueAsDate 屬性。
HTML
我們包含了一個型別為 date 的 <input> 元素
<label for="date2">Pick a date:</label>
<input name="date2" id="date2" type="date" />
<pre id="log"></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 = `Initial value: ${inputElement.valueAsDate}`;
inputElement.addEventListener("change", () => {
if (inputElement.valueAsDate !== null) {
logElement.innerText = `You selected ${inputElement.valueAsDate.toLocaleDateString("en-US", options)}`;
} else {
logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsDate}`;
}
});
結果
由於您所在的本地時區，日期可能相差一天。
規範
| 規範 |
|---|
| HTML # dom-input-valueasdate-dev |
瀏覽器相容性
載入中…