使用React DateTime显示选中日期时间时遇异常，求解决方案

问题分析 #

你的代码存在两个核心问题：

1. onChange回调参数错误：React DateTime（react-datetime库）的onChange方法直接返回选中的moment日期对象，而非原生input的event对象，所以(e)=>e.target.value根本取不到正确值，导致state无法更新。
2. 校验逻辑冲突：isValidDate里的current.isAfter(today)会禁止选择今日及之前的日期，但你初始化的state是今日日期，这会让初始值本身不符合校验规则，引发异常。

修复代码 #

调整回调逻辑并修正校验规则（示例允许选择今日及之后的日期，可按需修改）：

import { useState } from 'react';
import Datetime from 'react-datetime';

const YourComponent = () => {
  const [date, setDate] = useState(new Date());

  const handleDateChange = (selectedDate) => {
    setDate(selectedDate);
    // 打印选中的日期对象，方便调试
    console.log('选中的日期：', selectedDate);
    // 若需格式化后存入数据库，可调用moment的format方法
    console.log('格式化后日期（数据库友好格式）：', selectedDate.format('YYYY-MM-DD HH:mm:ss'));
  };

  return (
    <Datetime
      isValidDate={(current) => {
        const today = new Date();
        // 允许选择今日及之后的日期，根据需求调整规则
        return current.isSameOrAfter(today, 'day');
      }}
      dateFormat="DD-MM-YYYY"
      onChange={handleDateChange}
      value={date}
    />
  );
};

export default YourComponent;

关键要点 #

• react-datetime的onChange参数是moment实例，直接传入setDate即可更新state；
• 格式化日期时，用moment的format()方法生成数据库兼容的格式（比如YYYY-MM-DD HH:mm:ss）；
• 初始值必须满足isValidDate的校验规则，否则组件会进入异常状态。

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