Next.js中input type='date'的defaultValue不生效问题求助

问题根源 #

HTML原生<input type="date">仅接受**YYYY-MM-DD**格式的字符串作为value或defaultValue，你当前使用的17/11/2022是DD/MM/YYYY格式，不符合规范，因此无法被识别显示。

具体解决步骤 #

1. 转换日期格式

   • 固定初始值直接修改格式：将'17/11/2022'改为'2022-11-17'。
   • 动态日期字符串转换：如果是从其他地方获取的DD/MM/YYYY格式日期，可通过函数转换：

     // 转换DD/MM/YYYY到YYYY-MM-DD
     const formatDate = (dateStr) => {
       const [day, month, year] = dateStr.split('/');
       return `${year}-${month}-${day}`;
     };
     
     const [dDate, setdDate] = useState(formatDate('17/11/2022'));
     

2. 区分受控/非受控组件

   • 非受控组件（用defaultValue）：确保仅设置defaultValue，且值为YYYY-MM-DD格式，不要同时使用value属性。
   • 受控组件（用value）：配合onChange更新状态，保证value始终是YYYY-MM-DD格式：

     const ReactComponent = () => {
       return (
         <input 
           type="date" 
           className="border-2 py-1 px-2 rounded-md" 
           onChange={(e) => handleDepositeDate(e.target.value, index)} 
           value={dDate}
         />
       );
     };
     

3. 全局统一修正
   应用内其他日期输入框同理，只需将所有传入defaultValue或value的日期字符串统一转换为YYYY-MM-DD格式即可解决问题。

内容的提问来源于stack exchange，提问作者kingNodejs