Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-input-element/input-valueasdate.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<title>HTMLInputElement valueAsDate</title>
<link rel="author" title="pmdartus" href="mailto:dartus.pierremarie@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<h3>input_valueAsDate</h3>
<hr>
<div id="log"></div>
<input id="input_date" type="date" />
<input id="input_month" type="month" />
<input id="input_week" type="week" />
<input id="input_time" type="time" />
<script>
"use strict";
function testValueAsDateGetter(type, element, cases) {
for (const [actualValue, expectedValueAsDate] of cases) {
test(
() => {
element.value = actualValue;
const actualValueAsDate = element.valueAsDate;
if (actualValueAsDate instanceof Date) {
assert_equals(
actualValueAsDate.getTime(),
expectedValueAsDate.getTime(),
`valueAsDate returns an invalid date (actual: ${actualValueAsDate.toISOString()}, ` +
`expected: ${expectedValueAsDate.toISOString()})`
);
} else {
assert_equals(actualValueAsDate, expectedValueAsDate);
}
},
`valueAsDate getter on type ${type} (with value: ${JSON.stringify(actualValue)})`
);
}
}
function testValueAsDateSetter(type, element, cases) {
for (const [valueDateStr, expectedValue] of cases) {
test(() => {
element.valueAsDate = new Date(valueDateStr);
assert_equals(element.value, expectedValue);
}, `valueAsDate setter on type ${type} (new Date(${JSON.stringify(valueDateStr)}))`);
}
}
const dateInput = document.getElementById("input_date");
testValueAsDateGetter("date", dateInput, [
["", null],
["0000-12-10", null],
["2019-00-12", null],
["2019-12-00", null],
["2019-13-10", null],
["2019-02-29", null],
["2019-12-10", new Date("2019-12-10T00:00:00.000Z")],
["2016-02-29", new Date("2016-02-29T00:00:00.000Z")] // Leap year
]);
testValueAsDateSetter("date", dateInput, [
["2019-12-10T00:00:00.000Z", "2019-12-10"],
["2016-02-29T00:00:00.000Z", "2016-02-29"] // Leap year
]);
const monthInput = document.getElementById("input_month");
testValueAsDateGetter("month", monthInput, [
["", null],
["0000-12", null],
["2019-00", null],
["2019-12", new Date("2019-12-01T00:00:00.000Z")]
]);
testValueAsDateSetter("month", monthInput, [["2019-12-01T00:00:00.000Z", "2019-12"]]);
const weekInput = document.getElementById("input_week");
testValueAsDateGetter("week", weekInput, [
["", null],
["0000-W50", null],
["2019-W00", null],
["2019-W60", null],
["2019-W50", new Date("2019-12-09T00:00:00.000Z")]
]);
testValueAsDateSetter("week", weekInput, [["2019-12-09T00:00:00.000Z", "2019-W50"]]);
const timeInput = document.getElementById("input_time");
testValueAsDateGetter("time", timeInput, [
["", null],
["24:00", null],
["00:60", null],
["00:00", new Date("1970-01-01T00:00:00.000Z")],
["12:00", new Date("1970-01-01T12:00:00.000Z")],
["23:59", new Date("1970-01-01T23:59:00.000Z")]
]);
testValueAsDateSetter("time", timeInput, [
["1970-01-01T00:00:00.000Z", "00:00"],
["1970-01-01T12:00:00.000Z", "12:00"],
["1970-01-01T23:59:00.000Z", "23:59"]
]);
</script>
</body>
</html>