Question

我刚刚发现了ag-grid。我在angular2 +上使用它并从api加载数据。日期是字段之一，但格式为ISO。我一直在尝试对其进行格式化，是否有任何方法可以这样做，是否可以添加管道或其他方式？通常我会这样{{someISODate |日期：'dd.MM.yyyy HH：mm'}}。我真的必须在显示之前手动在组件中对其进行格式化吗？我也想知道是否有可能在一栏下添加两个字段。为什么？好吧，我有专栏作者，在从api中获取的数据中，我有author.firstname和author.lastname，现在我想在同一列中显示两个字段。任何提示或示例都受到欢迎。

columnDefs = [
    {headerName: 'Datum kreiranja', field: 'createdAt' }, //<-- wanna format it
    {headerName: 'Vrsta predmeta', field: 'type.name' },
    {headerName: 'Opis', field: 'description'},
    {headerName: 'Kontakt', field: 'client.name'},
    {headerName: 'Autor', field: 'author.firstname'}, //<-- wanna display author.lastname in same cell
    {headerName: 'Status', field: 'status.name'}
];

Answer 1

您可以使用cellRenderer和moment库来完成此操作。

 {
      headerName: 'Datuk kreiranja', field: 'createdAt',
      cellRenderer: (data) => {
          return moment(data.createdAt).format('MM/DD/YYYY HH:mm')
      }
 }

如果您不想使用moment，那么下面是您的操作方法。

cellRenderer: (data) => {
     return data.value ? (new Date(data.value)).toLocaleDateString() : '';
}

对于Author字段，

cellRenderer: (data) => {
     return data.author.firstname + ' ' + data.author.lastname;
}

参考： ag-grid: Cell Rendering

Answer 2

如果使用的是AdapTable，则可以通过其Format Column函数来实现，该函数可以在设计时或运行时应用。在这里，您可以选择几乎任何所需的DateTime格式。 https://demo.adaptabletools.com/style/aggridformatcolumndemo

Answer 3

您可以使用valueFormatter

{headerName: 'Datuk kreiranja', field: 'createdAt', valueFormatter: this.dateFormatter},

创建一个小函数：

dateFormatter(params) {
  return moment(params.value).format('MM/DD/YYYY HH:mm');
}

Answer 4

首先感谢Paritosh。我面临的问题是我从API接收的日期字段采用以下格式

“ endDateUTC”：“ 2020-04-29T12：00：00”，

我一直使用cellrenderer和力矩库来遵循Paritosh解决方案，但是出于某种原因，该值总是格式化为今天的日期。

以下解决方案是将 valueFormatter与矩型库一起使用。

这是Angular2 +版本的。工作真的很简单

在您的.ts文件中：

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('D MMM YYYY');
    },
},

您将获得的输出是：

结束日期： 2020年4月29日

请随时更改所需的日期格式。

希望这对某些人有帮助。

Answer 5

对于Angular，如果您想在没有moment.js的情况下执行此操作，则可以尝试以下操作：

import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-xyz'
})
export class xyzComponent implements OnInit {

  constructor( @Inject(LOCALE_ID) private locale: string ) {
  }

  columnDefs = [

    {headerName: 'Submitted Date', field: 'lastSubmittedDate', cellRenderer: (data) => {
      return  formatDate(data.value, 'dd MMM yyyy', this.locale);
     }];

}

此组件使用的日期格式为角/通用

Answer 6

（此处是日期格式的工作和优化解决方案！）

在Angular 8上使用日期为2019-11-16T04：00：00.000Z的动态数据进行了测试。在Ag-grid中，如果您使用valueFormatter，则无需添加“ field：'Order Date'”。

也跟随Ragavan Rajan的回答。因此，您需要在Angular CLI中安装moment.js。

工作代码和安装如下：

//Install moment.js in angular 8 cli.(no need of --save in latest versions
  npm install moment

//In your component.ts
  import * as moment from 'moment';

//Inside your colDef of ag-grid
  {
    headerName: "Effective Date",
    field: "effectiveDate",
    valueFormatter: function (params){
       return moment (params.value).format ('DD MMM, YYYY');
 }

/*
* This will display formatted date in ag-grid like 16 Nov, 2019.
* field name's value is from server side.(column name).
*/

Answer 7

我只想扩展Vishwajeet从2019年4月起的出色答案。这是我将如何使用他的代码，以及需要使用哪些import命令：

    import { Component, OnInit, ViewChild, LOCALE_ID, Inject } from '@angular/core';

    constructor(@Inject(LOCALE_ID) private locale: string)
    {
    }

    columnDefs = [
        { headerName: 'Last name', field: 'lastName' },
        { headerName: 'First name', field: 'firstName' },
        { headerName: 'DOB', field: 'dob', cellRenderer: (data) => { return formatDate(data.value, 'd MMM yyyy HH:mm', this.locale); }},
        { headerName: 'Policy start', field: 'policyStartDate', cellRenderer: (data) => { return formatDate(data.value, 'd MMM yyyy HH:mm', this.locale); } },
        { headerName: 'Policy end', field: 'policyEndDate', cellRenderer: (data) => { return formatDate(data.value, 'd MMM yyyy HH:mm', this.locale); } }
    ]

您的agGrid将包含以下内容：

  <ag-grid-angular 
      class="ag-theme-material" 
      [rowData]="rowData"
      [columnDefs]="columnDefs" 
  </ag-grid-angular>

这确实很好，但是出于以下几个原因，我决定将日期格式移到它自己的单元格渲染器中：

上面的代码将 null 值显示为“ 1 Jan 1970 01:00”
您需要在使用该代码的任何控件中重复此代码以及导入和@Inject。
它每次都重复逻辑，因此，如果您想在整个应用程序中更改日期格式，则很难做到。另外，如果将来的Angular版本破坏了该日期格式，则您需要为每次出现的情况应用修复程序。

因此，让我们将其移入它自己的单元格渲染器中。

我的 DateTimeRenderer.ts 文件如下所示：

import { Component, LOCALE_ID, Inject } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';
import { formatDate } from '@angular/common';

@Component({
    selector: 'datetime-cell',
    template: `<span>{{ formatTheDate(params.value) }}</span>`
})
export class DateTimeRenderer implements ICellRendererAngularComp {

    public params: ICellRendererParams; 

    constructor(@Inject(LOCALE_ID) public locale: string) { }

    agInit(params: ICellRendererParams): void {
        this.params = params;
    }

    formatTheDate(dateValue) {
        //  Convert a date like "2020-01-16T13:50:06.26" into a readable format
        if (dateValue == null)
            return "";
        return formatDate(dateValue, 'd MMM yyyy HH:mm', this.locale);
    }

    public onChange(event) {
        this.params.data[this.params.colDef.field] = event.currentTarget.checked;
    }

    refresh(params: ICellRendererParams): boolean {
        return true;
    }
}

在我的 app.module.ts 文件中，我需要导入该组件：

import { DateTimeRenderer } from './cellRenderers/DateTimeRenderer';

@NgModule({
  declarations: [
    AppComponent,
    DateTimeRenderer
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([DateTimeRenderer])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

现在，回到使用agGrid的组件中，我可以从此行中删除LOCALE_ID, Inject：

import { Component, OnInit, ViewChild, LOCALE_ID, Inject } from '@angular/core';

..从我们的构造函数中删除它...

constructor()
{
}

..导入我们的新渲染器...

import { DateTimeRenderer } from './cellRenderers/DateTimeRenderer';

..并更改columnDefs以使用新的渲染器：

columnDefs = [
    { headerName: 'Last name', field: 'lastName' },
    { headerName: 'First name', field: 'firstName' },
    { headerName: 'DOB', field: 'dob', cellRenderer: 'dateTimeRenderer' },
    { headerName: 'Policy start', field: 'policyStartDate', cellRenderer: 'dateTimeRenderer' },
    { headerName: 'Policy end', field: 'policyEndDate', cellRenderer: 'dateTimeRenderer' }
]
frameworkComponents = {
    dateTimeRenderer: DateTimeRenderer
}

我只需要确保我的agGrid知道这个新的frameworkComponents部分：

<ag-grid-angular 
      class="ag-theme-material" 
      [rowData]="rowData"
      [columnDefs]="columnDefs" 
      [frameworkComponents]="frameworkComponents"  >
  </ag-grid-angular>

就是这样。

同样，这是一件好事，我可以在代码中的任何地方使用此日期格式化程序，并且所有逻辑都放在一个地方。

令人震惊的是，在2020年，我们实际上需要为诸如agGrid之类的最新网格编写我们自己的日期格式功能……这确实应该包含在agGrid库。

Answer 8

如果您有两个子字段，例如“开始日期”和“结束日期”，则应该这样做：

{
            headerName: "Date Range",
    children: [
      { 
        field: 'StartDate', 
        cellRenderer: (data) => {
          return data ? (new Date(data.value)).toLocaleDateString() : '';
        } 
      },
      {
        field: 'EndDate', 
        cellRenderer: (data) => {
          return data ? (new Date(data.value)).toLocaleDateString() : '';
        } 
      }
    ],

Answer 9

尝试一下：

        {
            headerName: 'Order Date',
            field: 'OrderDate',
            valueFormatter: function (params) {
               var nowDate = new Date(parseInt(params.value.substr(6)));
               return nowDate.format("yyyy-mm-dd");
        }

在将数据显示在Ag-Grid上之前如何格式化数据

9 个答案: