React中如何修改日期格式？使用dateformat包遇格式不匹配错误

这个问题很常见，本质是你没搞清楚两个关键点：HTML date输入框的强制格式要求，以及dateformat包的格式符规则。

先拆解下问题根源：
你看到的错误The specified value "15-30-2020" does not conform to the required format, "yyyy-MM-dd"，一是因为HTML的type="date"输入框要求value必须是yyyy-MM-dd（年-月-日）格式的字符串；二是你用的dateformat格式符写错了——MM在dateformat里代表分钟，不是月份！月份的格式符是mm，所以你写的"dd-MM-yyyy"其实是把日期转成了「日-分钟-年」，这才出现了15-30-2020这种不符合逻辑的日期值。

接下来给你具体的解决方案：

1. 修正初始化状态的日期格式 #

把dateformat的格式字符串改成"yyyy-mm-dd"，这样就能生成符合input要求的yyyy-MM-dd格式，同时确保原始日期是有效的Date对象（如果是字符串先转换）：

import dateFormat from "dateformat";
const EditFinancialInfo = ({ info }) => {
  // 处理原始日期：如果是字符串先转成Date对象
  const originalDueDate = typeof info.moneyToBePaid.dueDate === 'string' 
    ? new Date(info.moneyToBePaid.dueDate) 
    : info.moneyToBePaid.dueDate;

  const [moneyToBePaid, setMoneyToBePaid] = useState({
    dueDate: dateFormat(originalDueDate, "yyyy-mm-dd"),
  });

  const mtpHandleChange = (e) => {
    setMoneyToBePaid(prev => ({ ...prev, dueDate: e.target.value }));
  };

  return (
    <div>
      <input 
        label="Due" 
        type="date" 
        name="dueDate" 
        onChange={mtpHandleChange} 
        value={moneyToBePaid.dueDate} 
      />
    </div>
  );
};

2. 如果需要展示dd-MM-yyyy格式的日期 #

如果你的需求是在input之外（比如页面文本展示）显示dd-MM-yyyy格式，那单独处理一个展示用的变量即可，不要和input的value混用：

// 在组件内定义展示用的日期变量
const displayDueDate = dateFormat(originalDueDate, "dd-mm-yyyy");

// 在需要的地方渲染展示
<p>到期日：{displayDueDate}</p>

额外提醒 #

• HTML的type="date"输入框会根据用户的浏览器语言/系统区域自动调整展示样式（比如中文环境可能显示2020/3/15），但它的value属性必须是yyyy-MM-dd格式，这是W3C的规范，没办法修改。
• 如果原始日期是字符串格式，一定要先转成Date对象再传给dateformat，否则可能出现解析错误。

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