valueAsTemporal: date/time input integration with JavaScript Temporal API

[o-t-w]

What problem are you trying to solve?

Now that Temporal is on its way to stage 4, it is worth considering how <input type="date">, <input type="time">, <input type="week">, <input type="month"> could integrate with this API.

What solutions exist today?

Getting the value of a date input with valueAsDate returns a Date object. The value of a date input can be set by providing a Date object to valueAsDate. Converting between a Date object and Temporal is possible but not ideal. Alternatively you have to work with string values.

How would you solve it?

Previous discussion: tc39/proposal-temporal#107 Below is the strawman from that thread updated with the current syntax (the Civil prefix has been changed to Plain).

Add a valueAsTemporal getter/setter to HTMLInputElement
<input type=date> accepts/returns PlainDate
<input type=time> accepts/returns PlainTime
<input type=datetime-local> accepts/returns PlainDateTime
<input type=month> accepts/returns PlainYearMonth

<input type=week> does not have a mapping.

Alternatively, separate valueAsPlainDate, valueAsPlainTime, valueAsPlainDateTime, valueAsPlainYearMonth.