AngularJS中ag-grid单元格渲染器自动加1小时问题求助

嘿，这个问题我之前碰过类似的，大概率是时区处理的冲突搞的鬼！咱们来拆解一下：

问题核心应该是：ag-grid初次渲染时，内置单元格渲染器和你用的Angular $filter('date') 在时区转换上叠加了——你传的是正确时间，但渲染器可能自动做了一次时区转换，加上$filter的处理，就多了1小时；而刷新后，ag-grid直接读取缓存的格式化结果，就不会重复转换了。

给你几个靠谱的解决办法：

1. 直接指定时区，避免浏览器自动干扰 #

别依赖new Date()的默认解析，用原生JS明确指定EST时区来格式化，这样不管浏览器时区是什么，结果都一致：

function myDate(date) {
  if(date) {
    // 用America/New_York时区（对应EST/EDT）格式化
    return new Date(date).toLocaleString('en-US', {
      timeZone: 'America/New_York',
      month: 'numeric',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: 'numeric',
      hour12: true
    });
  }
  return ''; // 空值记得返回空字符串，避免显示undefined
}

2. 不让ag-grid自动解析日期字段 #

ag-grid默认会尝试解析日期类型的字段，可能导致二次转换。你可以在列定义里用cellRenderer直接处理原始值，跳过内置的自动解析：

var myGrid = [{
  headerName: header,
  field: headField,
  cellRenderer: function(params) {
    // 直接把原始值传给你的格式化函数，不让ag-grid提前处理
    return myDate(params.value);
  }
}];

或者更贴合ag-grid的用法，用valueFormatter代替自定义函数：

var myGrid = [{
  headerName: header,
  field: headField,
  valueFormatter: function(params) {
    if(!params.value) return '';
    return new Date(params.value).toLocaleString('en-US', {
      timeZone: 'America/New_York',
      month: 'numeric',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: 'numeric',
      hour12: true
    });
  }
}];

3. 给Angular的date过滤器强制指定时区偏移 #

如果你一定要用$filter('date')，记得加上时区偏移参数，强制用EST的UTC-5偏移（EDT时是UTC-4，你可以根据需求调整）：

function myDate(date) {
  if(date) {
    // 第三个参数指定EST的时区偏移-0500
    return $filter('date')(new Date(date), 'M/d/yyyy h:mm a', '-0500');
  }
  return '';
}

你可以先试试第一种方法，最稳妥。另外建议在myDate函数里加个console.log，打印一下初次渲染和刷新后的new Date(date)值，确认是不是时区转换的问题——大概率能看到初次渲染时日期对象的时区和刷新后不一样。

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