Supporting `Date` objects in `value` for `type=date` input tags about react

[egonSchiele]

The HTML spec says the value has to be a string (see here), and it looks like React strongly wants all values to be strings to comply with this spec.

There's a check to make sure the value attribute is a string.

Values get coerced to strings here.

@types/react says the type of value is:

value?: string | ReadonlyArray<string> | number | undefined

[naveen521kk]

The HTML spec says the value has to be a string (see here), and it looks like React strongly wants all values to be strings to comply with this spec.

I thought it would be better if react supported doing so, could avoid some issues. Is there any reason why React wants all values to be string?

[KrishKuChhabra]

import "./styles.css";
import React,{useState} from "react";

export default function App() {
const [a, setA] = useState();
return (
<input
type="date"
value={a}
onChange={(e) => {
setA(e.target.value);
}}
/>
);
}

[Almas456]

You are correct that passing a Date object directly to the value prop of a date picker component in React can be problematic. This is because the value prop expects a string in a specific format, and passing a Date object directly will result in an incorrect format that the browser cannot understand.

To avoid this issue, you can use a library like moment.js or date-fns to format the Date object into a string that can be understood by the date picker component. These libraries provide functions to format dates in a variety of formats, including the format required by the date picker.

Alternatively, if you don't want to use a library, you can manually format the Date object using the built-in Date methods. For example, you could use the getFullYear(), getMonth(), and getDate() methods to get the year, month, and day of the Date object, and then concatenate them into a string in the format required by the date picker.

It would be nice if React had built-in support for passing Date objects directly to the value prop of a date picker component, but at the moment, manual conversion is still required to ensure that the date is displayed correctly.

[naveen521kk]

It would be nice if React had built-in support for passing Date objects directly to the value prop of a date picker component

That's why I opened this issue 🙂