React should recognize the `valueAsDate` property on DOM elements

[kreba]

The valueAsDate property on the ES6 definition of HTMLInputElement is not yet recognized by React. It should be, though.

The valueAsDate property relieves the pain of having to deal with both browsers that support HTML5 date inputs and those who don't; the former require the value property to be of the form "YYYY-MM-DD" and the latter require a nicely formatted date (e.g. "MM/DD/YYYY") since the user will see exactly that. (React won't even allow that in conjunction with type="date", though, and proclaim that the machine readable format should be used.) The browsers that do support HTML5 date input (should) alternatively support the date being passed in through the valueAsDate property. If we use that, we can always put a nicely formatted date in the value property. Pain relieved! (And also React should allow any format in the value property in that case.)

As indicated above, browser support is still lacky at best, even with the most avant garde browsers. Hence this is not an urgent issue for React. It will get relevant, though, and is herein duly noted.

[paulirwin]

Along the lines of this, since React is one-way (so we don't have to worry about what happens to value after render), why not allow binding Date objects straight to value if input type is date? Seems like a straightforward change (although I'm not familiar with the React rendering code):

if (type === "date" && typeof value === "object" && value instanceof Date) {
    value = value.toISOString().substring(0, 10);
}

[ju1ius]

Thanks @kreba for pointing this out ! For reference, the relevant part of the spec. Seems like both valueAsDate and valueAsNumber should be supported on input[type=date|time|datetime-local].

[wesleytodd]

Is there a status on this? +1 for those input types to utilize valueAsDate in the dom update if value instanceof Date or valueAsNumber for a number.

[nhunzaker]

I think this could be cool. There are a few things to figure out:

1. How should React handle the presence of value and valueAsDate or valueAsNumber?
2. How should React handle converting the value into an attribute. Like if you assign valueAsDate={new Date(), should React set the value attribute like node.setAttribute('value', node.value)?
3. What happens if you assign valueAsNumber to a non-number input. Likewise for valueAsDate? Should the DOMException that is raised by the browser be allowed to throw? Or should React sift this out?
4. How does this work with defaultValue? Does it?

This might be a good candidate for an RFC: https://github.com/reactjs/rfcs

What do you all think?

[Sora2455]

How should React handle the presence of value and valueAsDate or valueAsNumber?

My personal suggestion would be to extend the value prop to also accept date and number values. If the input is a date/time/datetime input and the prop is a date, set valueAsDate. If the input is a number input and the prop is a number, set valueAsNumber. Otherwise, call toString on the input and set the value to that. That way, we don't have to worry about which attribute takes precedence.

How should React handle converting the value into an attribute. Like if you assign valueAsDate={new Date(), should React set the value attribute like node.setAttribute('value', node.value)?

I think that would be simplest.

What happens if you assign valueAsNumber to a non-number input. Likewise for valueAsDate? Should the DOMException that is raised by the browser be allowed to throw? Or should React sift this out?

My first suggestion would take care of this issue...

How does this work with defaultValue? Does it?

I suggest giving defaultValue the same treatment as value, as above.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[spudly]

please don't close

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any additional information, please include with in your comment!

[paulirwin]

This request has 13 upvotes and comments in support of it. I'm voting to not close this issue, to keep the stale bot at bay.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[kreba]

bump

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[kreba]

I'm no longer coding with React. Still think this would be a valuable addition. Thus I'm bumping this one last time.

[rsgilbert]

Whats the status on this issue?

[SavchukSergey]

You can use following construct

const innerProps = {
    valueAsDate: value
};

return (
    <input type="date" {...innerProps} onChange={handleChange} />
);

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[Sora2455]

I guess Facebook doesn't think this is important, given it's gone stale 4 times now? But I still think it is.

[wraybowling]

const innerProps = { valueAsDate: value };

Per React 16 docs, normal HTML attributes should no longer be skipped and thus supported, so that the following SHOULD work...

<input type="date" placeholder="mm/dd/yyyy" valueAsDate={start_time} onChange={event => setStartTime(event.target.valueAsDate)} />

...but once rendered to the DOM, I am seeing all attribute names being changed to all lowercase like so:

<input type="date" placeholder="mm/dd/yyyy" valueasdate="1655569348462">

As you can read at the bottom of the docs page, there's a selected list of supported attributes and all others are considered "custom" and forced to be lowercase. A lowercase valueasdate does not work, thus the proposed solution does not work. Facebook would need to acknowledge valueAsDate as a vital addition. Dealing with date/time math and localized formatted IS NOT FUN so I hope they support it SOON. Surely someone here could find the list of supported attributes and add it and make a PR.