如何在用户进入ag-grid单元格编辑时修改值的展示形式？

这个需求在AG Grid里很好实现，核心就是区分单元格显示层和编辑层的数据格式转换，我给你两种常见的实现方式，看你实际存储的日期格式来选：

情况1：字段存储的是ISO格式（如2018-01-15） #

这种情况最简单，非编辑时用valueFormatter转成15-Jan-2018显示，编辑时直接展示原始的ISO格式让用户修改：

// 列配置示例
const columnDefs = [
  {
    headerName: '日期',
    field: 'date',
    // 非编辑模式：把ISO格式转成目标显示格式
    valueFormatter: (params) => {
      if (!params.value) return '';
      const date = new Date(params.value);
      // 生成15-Jan-2018格式的字符串
      return date.toLocaleDateString('en-GB', {
        day: '2-digit',
        month: 'short',
        year: 'numeric'
      }).replace(',', ''); // 去掉默认生成的逗号，适配目标格式
    },
    // 使用默认文本编辑器
    cellEditor: 'agTextCellEditor',
    // 编辑时直接展示原始的ISO格式值
    cellEditorParams: {
      getValue: (params) => params.value
    }
  }
];

情况2：字段存储的是短格式（如15-Jan-2018） #

如果你的字段本身存的就是显示用的短格式，那编辑时需要先把它转成ISO格式展示，编辑完成后再转回短格式存回去：

// 先写两个工具函数处理格式转换
function shortDateToISO(dateStr) {
  const monthMap = {
    Jan: '01', Feb: '02', Mar: '03', Apr: '04',
    May: '05', Jun: '06', Jul: '07', Aug: '08',
    Sep: '09', Oct: '10', Nov: '11', Dec: '12'
  };
  const [day, month, year] = dateStr.split('-');
  return `${year}-${monthMap[month]}-${day}`;
}

function isoToShortDate(dateStr) {
  const date = new Date(dateStr);
  return date.toLocaleDateString('en-GB', {
    day: '2-digit',
    month: 'short',
    year: 'numeric'
  }).replace(',', '');
}

// 列配置示例
const columnDefs = [
  {
    headerName: '日期',
    field: 'date',
    // 非编辑模式直接显示存储的短格式
    // 编辑时的配置
    cellEditor: 'agTextCellEditor',
    cellEditorParams: {
      // 编辑前：把短格式转成ISO格式展示在编辑器里
      getValue: (params) => shortDateToISO(params.value),
      // 编辑完成后：把用户输入的ISO格式转回短格式存回字段
      setValue: (params) => {
        const formattedDate = isoToShortDate(params.newValue);
        params.setValue(formattedDate);
      }
    }
  }
];

注意事项 #

• 日期转换时要考虑浏览器兼容性，尽量用手动解析的方式（比如上面的shortDateToISO函数），避免依赖new Date()对非标准格式的解析差异。
• 如果用户输入的日期格式不符合要求，建议加一层校验逻辑，比如在setValue里判断输入的是否是合法的ISO日期，再进行转换。

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