解决material-ui-pickers KeyboardDatePicker与moment配合的编辑异常问题

数据老陈

2026-5-6

解决Material-UI KeyboardDatePicker搭配Moment的编辑乱码/无效格式问题

我之前也踩过这个坑！核心问题是你混用了原生Date对象和moment实例，导致组件在解析输入内容时出现类型冲突——虽然调整@date-io/moment版本修复了显示问题，但编辑时的解析逻辑依然因为状态类型不匹配而报错。

具体修复步骤

统一状态的日期类型
因为你使用了MomentUtils，组件内部期望的状态值是moment实例，而非原生Date对象。把初始状态从new Date()改成moment()，确保整个组件生命周期中状态的类型一致。
显式处理onChange的moment实例
虽然组件会自动传递moment对象作为onChange的参数，但显式定义处理函数可以避免潜在的类型混淆问题。

修改后的完整代码

import React, { Fragment, useState } from "react";
import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from "moment";

function KeyboardDatePickerExample(props) {
  // 初始状态改为moment实例，与组件期望的类型统一
  const [selectedDate, setSelectedDate] = useState(moment());
  
  const handleDateChange = (date) => {
    // date是组件传递的moment实例，直接更新状态
    setSelectedDate(date);
  };

  return (
    <Fragment>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <KeyboardDatePicker
          autoOk={true}
          showTodayButton={true}
          value={selectedDate}
          format="D MMM, YYYY"
          onChange={handleDateChange}
          minDate={moment().subtract(6, "months")}
          maxDate={moment()}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}
export default KeyboardDatePickerExample;