PrimeReact Calendar组件默认值无法显示问题求助

核心问题在于PrimeReact的Calendar组件value属性不支持字符串格式的日期，必须传入Date对象，这就是你硬编码字符串无法显示初始值的原因。

修改后的代码示例 #

const EventForm = (props) => {
  // 将初始值改为Date对象
  const [start, setStart] = useState(new Date('2023-01-02'));

  const handleChange = (e) => {
    // onChange返回的e.value是Date对象，直接更新状态
    setStart(e.value);
  };

  return (
    <>
      <div className="field">
        <span className="p-float-label">
          <Calendar
            name="start"
            value={start}
            onChange={handleChange}
            // 可选：指定日期显示格式，对应你需要的02/01/2023样式
            dateFormat="MM/dd/yyyy"
          />
          <label>Start</label>
        </span>
      </div>
    </>
  );
};

export default EventForm;

额外说明 #

• 如果初始日期是从后端获取的字符串，需要先转换成Date对象再存入状态，比如new Date('2023-01-02')；如果遇到复杂格式的日期字符串，也可以用date-fns、moment这类日期库来解析。
• dateFormat属性用来控制输入框显示的日期格式，按需调整即可，比如dd/MM/yyyy会显示为01/02/2023。
• Calendar组件的onChange事件返回的e.value本身就是Date类型，直接用来更新状态即可。

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