为什么我收到此警告消息，不符合 ReactJS 中所需的格式“yyyy-MM-dd”？

Question

我尝试为日期（输入）分配一个值。但我收到了警告消息，并且日期字段也没有使用分配的值进行更新。

警告消息：指定的值“Sun May 23 2021 16:06:23 GMT+0530（印度标准时间）”不符合所需的格式“yyyy-MM-dd”。

如何使用 useState() 钩子将值（日期）分配给 React 中的日期输入字段？

请让我知道您的建议。谢谢。

使用状态：

const todayDate = new Date();
const [ expenseDate, setExpenseDate ] = useState(todayDate);

JSX 部分：

<label htmlFor="date-val">
    <input type="date" name="date-val" value={expenseDate} onChange={onDateChangeHandler} required />
</label>

Answer 1

您需要将日期转换为特定yyyy-mm-dd格式

尝试这个

const todayDate = new Date(); 
const formatDate = todayDate.getDate() < 10 ? `0${todayDate.getDate()}`:todayDate.getDate();
const formatMonth = todayDate.getMonth() < 10 ? `0${todayDate.getMonth()}`: todayDate.getMonth();
const formattedDate = [todayDate.getFullYear(), formatMonth, formatDate].join('-');
const [expenseDate, setExpenseDate] = useState(formattedDate);

结果值包括年、月和日，但不包括时间

为了更好地理解，请查看官方文档