如何在 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 日期过滤器。

使用值 getter 的好处是现在可以根据值 getter.

返回的值对此类列进行排序和过滤

Answer 4

这适用于 Angular2+ 版本。如果您在应用程序中使用 moment 库。那么这个工作真的很简单

在您的 .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 并使用许多可用的日期格式动态传递该函数从时刻库。

如果您的值是字符串格式：

首先将其转换为日期，然后使用上面的值格式化函数

示例：

  this.firstTaskDate = moment(this.firstTaskDate, 'DD/MM/YY')
                .utc()
                .toDate();

希望这对某些人有所帮助。

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

How to configure date render format in AG-Grid

javascript

ag-grid

ag-grid-react