React ag-grid日期列编辑格式不一致，如何统一为yyyy-mm-dd？

要实现编辑时显示dd-mm-yyyy、非编辑时显示yyyy-mm-dd，且全网格操作统一基于yyyy-mm-dd格式的需求，完全可以通过AG Grid自带的列配置项实现，无需自定义单元格模板。以下是具体实现步骤：

核心配置思路 #

利用AG Grid的valueFormatter、cellEditorParams、valueParser和comparator四个核心配置项，分别控制显示格式、编辑器行为、数据存储格式和排序逻辑：

1. 非编辑状态的显示格式（valueFormatter） #

通过valueFormatter将存储的日期值（无论是日期对象还是yyyy-mm-dd字符串）格式化为yyyy-mm-dd显示在单元格中：

valueFormatter: params => {
  if (!params.value) return '';
  const date = new Date(params.value);
  // 处理无效日期，避免显示NaN
  if (isNaN(date.getTime())) return params.value;
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

2. 编辑模式的格式控制（cellEditorParams） #

使用AG Grid内置的agDateCellEditor编辑器，通过format指定编辑时的显示格式为dd-mm-yyyy，同时用parser确保输入的日期能被正确解析为日期对象：

editable: true,
cellEditor: 'agDateCellEditor',
cellEditorParams: {
  format: 'dd-mm-yyyy',
  // 将输入的dd-mm-yyyy字符串解析为标准日期对象
  parser: input => {
    const [day, month, year] = input.split('-');
    return new Date(`${year}-${month}-${day}`);
  }
}

3. 编辑完成后的存储格式（valueParser） #

编辑完成后，将编辑器返回的日期对象转换为yyyy-mm-dd格式的字符串，确保网格数据存储的格式统一：

valueParser: params => {
  const date = params.newValue;
  if (!date) return '';
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

4. 全网格操作的格式统一（comparator） #

为了确保排序、过滤等操作基于正确的日期逻辑，自定义比较器将存储的yyyy-mm-dd字符串转换为日期对象后再比较：

comparator: (valueA, valueB) => {
  const dateA = new Date(valueA);
  const dateB = new Date(valueB);
  return dateA - dateB;
}

完整列定义示例 #

将以上配置整合到列定义中：

const columnDefs = [
  {
    headerName: '日期',
    field: 'date',
    valueFormatter: params => {
      if (!params.value) return '';
      const date = new Date(params.value);
      if (isNaN(date.getTime())) return params.value;
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    editable: true,
    cellEditor: 'agDateCellEditor',
    cellEditorParams: {
      format: 'dd-mm-yyyy',
      parser: input => {
        const [day, month, year] = input.split('-');
        return new Date(`${year}-${month}-${day}`);
      }
    },
    valueParser: params => {
      const date = params.newValue;
      if (!date) return '';
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    comparator: (valueA, valueB) => {
      const dateA = new Date(valueA);
      const dateB = new Date(valueB);
      return dateA - dateB;
    }
  }
];

效果验证 #

• 非编辑状态：单元格稳定显示yyyy-mm-dd格式
• 进入编辑模式：编辑器自动切换为dd-mm-yyyy格式展示当前值，输入时遵循该格式
• 编辑完成：数据自动转换为yyyy-mm-dd格式存储，单元格回到对应显示
• 排序/过滤：基于日期实际值处理，不受显示格式影响，保证全网格操作一致性

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