如何更新ag-grid日期编辑器修改后的单元格值

AG Grid自定义日期编辑器值同步方案 #

你遇到的日期修改后无法写入AG Grid的核心问题是方法名配置错误，以及缺少日期类型适配，按以下调整即可正常使用：

• 核心错误修正：AG Grid要求自定义编辑器暴露getValue方法来获取最终编辑值，你之前写的getDate是AG Grid日期组件的方法，不适用于单元格编辑器，修改方法名即可让AG Grid正常读取你选择的日期值。
• 日期格式适配：原生type="date"的input只接受YYYY-MM-DD格式的字符串，初始化和返回值时要做Date对象和字符串的格式转换，避免类型不匹配导致的赋值失效。
• 你观察到的setDate方法不触发是正常现象：该方法仅在AG Grid需要主动给编辑器覆写值的场景下调用，普通用户编辑操作不会触发，不属于代码问题。

修正后完整代码 #

import React, {
  forwardRef,
  useImperativeHandle,
  useState,
  useRef
} from "react";

export const DateEditor = forwardRef((props, ref) => {
  // 初始化时处理Date类型转成input兼容的YYYY-MM-DD字符串
  const initDate = props.value instanceof Date 
    ? props.value.toISOString().split('T')[0]
    : props.value || '';
  const [date, setDate] = useState(initDate);

  const onDateChanged = (e) => {
    setDate(e.target.value);
  };

  useImperativeHandle(ref, () => ({
    // AG Grid编辑器关闭时自动调用该方法获取最终值回填到单元格
    getValue: () => {
      // 若你的表格列绑定的是字符串类型，直接返回date即可
      return date ? new Date(date) : null;
    },
    setDate: (dt) => {
      const formatDt = dt instanceof Date ? dt.toISOString().split('T')[0] : dt;
      setDate(formatDt);
    },
    isCancelAfterEnd: () => {
      return !date;
    }
  }));

  return (
    <div className="ag-custom-component-popup">
      <input
        type="date"
        style={{ width: "100%" }}
        value={date}
        onChange={onDateChanged}
      />
    </div>
  );
});

DateEditor.displayName = "DateEditor";

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