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

Posted 2023-02-18

【中文标题】如何在 AG-Grid 中配置日期渲染格式

【英文标题】：How to configure date render format in AG-Grid

【发布时间】：2019-03-19 01:37:38

【问题描述】：

如何在 AG-Grid 中设置日期列的呈现格式？当我查看样本时，我会看到 dd/mm/yyyy 格式的日期，但我的日期列总是以相当长的格式显示，类似于“Sat May 12 2012 01:00:00 GMT+0100 (BST)”。我想要一个 YYYY-MM-dd 的默认格式，让用户能够自己配置他们想要的格式。我发现的示例展示了如何使用比较器和类似的东西进行自定义过滤，但默认设置对我来说很好，除了日期的实际呈现方式。

谢谢， 特洛伊

【参考方案1】：

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

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

希望对你有帮助

【参考方案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

【讨论】：

请原谅我对 javascript 的无知，但 $filter 是什么以及如何注入它。那是 react 提供的类吗？

抱歉回复晚了，我没有看到你的问题。 $filter 是一个角度 API。该链接包含有关它的详细信息。

啊，我正在使用 React。我以为我已经在问题中指定了这一点，但看起来不像。

【参考方案3】：

虽然单元格渲染器和值格式化程序可以工作，但我会为这样的列使用 valueGetter -

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

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

使用 value getter 的好处是现在可以基于 value getter 返回的值对此类列进行排序和过滤。

【讨论】：

如果我理解正确，这个想法是在从服务器获取的字符串中将其作为字符串返回，这就是显示的内容。我能够修改我的 fetch 以将它们适当地反序列化为日期对象，然后进行排序和过滤工作。我看到的方法的缺点是，在将结果发送到客户端之前，需要在服务器端应用 I18N 或自定义格式。这可能不是一件坏事，但如果它需要知道将数据发送给谁并为每个客户端适当地格式化它，它会使服务器端代码不那么通用。

【参考方案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 并动态传递函数，其中包含许多可用的日期格式图书馆。

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

先转换成Date，然后使用上面的值格式化函数

例子：

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

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

【讨论】：

对我来说，这种方式最终会在单元格中显示“无效日期”... :(

@TheCuBeMan 那么我认为你的价值是字符串。您必须先将其转换为 Date ，然后使用上述功能

更新了我的答案，供您参考。请检查

我将值作为真正的 Javascript 日期（而不是字符串）获取，因此使用格式化程序进行格式化似乎是最合适的选择。如果 valueGetter 作为字符串传入并且我需要转换为日期对象，则使用 valueGetter 更合适，但这里不是这种情况，如果我要将日期转换为字符串，则过滤和排序将不起作用。