如何在AG-Grid中配置日期渲染格式

Question

如何设置AG-Grid中日期列的呈现格式？查看样本时，我看到的日期格式为dd / mm / yyyy，但是我的日期列始终以相当长的格式显示，例如“ Sat May 12 2012 01:00:00 GMT + 0100（BST）”。我想使用YYYY-MM-dd的默认格式，并且可以让用户自己配置所需的格式。我发现的样本显示了如何使用比较器之类的东西进行自定义过滤，但是默认值对我来说很好，除了实际呈现日期的方式。

谢谢， 特洛伊

Answer 1

解决此问题的最佳方法是使用格式化程序

https://www.ag-grid.com/javascript-grid-value-getters/

希望这会有所帮助

Answer 2

我为此创建了一个单元格渲染器：

cellRendererFormattedDate = params => {
   var date = $filter("date")(params.value, 'yyyy-MM-dd h:mm:ss a');
   return `<div style="text-align:right;">${date}</div>`;
}

在控制器中，请确保已注入$ filter。
在您的columnDefs中，请确保定义cellRenderer：cellRendererFormattedDate

Answer 3

尽管单元格渲染器和值格式化程序可以工作，但我还是将valueGetter用于类似这样的列-

headerName: "Issue Date",
valueGetter: function dateValueGettter(params) {
  var date = $filter("date")(params.getValue("issueDate"), 'yyyy-MM-dd');
  return date;
}

上面的示例使用的是Angular日期过滤器。

使用值获取器的好处在于，现在可以基于值获取器返回的值对此类列进行排序和过滤。

Answer 4

这是Angular2 +版本的。如果您在应用程序中使用矩型库。然后工作真的很简单

在您的.ts文件中：

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('yyyy-MM-dd');
    },
},

您将获得的输出是：

结束日期： 2019-10-05

还具有为用户配置日期格式的能力：您可以在应用程序的某些位置添加一个下拉菜单，并允许他们选择其日期样式并使用上述valueFormatter并动态传递该函数，此后具有许多可用的日期格式图书馆。

希望这对某些人有帮助。