在 1 个单元格中格式化 2 个日期

Question

我在 1 个单元格中显示 2 个日期，我想更改 2 个日期的格式。 我可以只用一次约会，但当谈到 2 时，我很挣扎。 这是我的 ag-grid 的屏幕截图：

我尝试创建新的 function dateFormatterr，它接受 2 个参数并在 columnDefs 中使用它，但它没有用。 这是我的代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
import { DealsService } from './services/deals.service';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  title = 'app';
  gridOptions = {
    rowHeight: 70
  }
  columnDefs = [{
      headerName: "Block \n Deal",
      cellRenderer: function(params) {
        return params.data.BLOCKID + '<br/>' + params.data.DEALID
      },
      width: 150,
      resizable: true,
      filter: true
    },
    {
      headerName: 'Class \n Type',
      cellRenderer: function(params) {
        return params.data.DEALCLASS + '<br/>' + params.data.DEALTYPE
      },
      width: 150,
      resizable: true,
      filter: true
    },
    {
      headerName: 'Trade \n Start',
      cellRenderer: function(params) {
        return params.data.TRADEDATE + '<br/>' + params.data.STARTDATE
      },
      valueFormatter: this.dateFormatterr('TRADEDATE', 'STARTDATE'),
      width: 150,
      resizable: true,
      filter: true,
    },
    {
      headerName: 'Folder \n Cpty',
      cellRenderer: function(params) {
        return params.data.FOLDERSHORTNAME + '<br/>' + params.data.CPTYSHORTNAME
      },
      width: 150,
      resizable: true,
      filter: true
    },
    {
      headerName: 'ShortName \n Name',
      cellRenderer: function(params) {
        return params.data.INSTRSHORTNAME + '<br/>' + params.data.INSTRNAME
      },
      width: 150,
      resizable: true,
      filter: true,
    },
    {
      headerName: 'Quantity \n Settl.Amt',
      cellRenderer: function(params) {
        return params.data.QUANTITY + '<br/>' + params.data.SETTLEAMT
      },
      width: 150,
      resizable: true,
      filter: true
    },
    {
      headerName: 'Rate \n Fees',
      cellRenderer: function(params) {
        return params.data.FLOATINGRATESSHORTNAME + '<br/>' + params.data.RENTSPREADFIXEDRATE
      },
      width: 150,
      resizable: true,
      filter: true
    },
    {
      headerName: 'Category \n Status',
      cellRenderer: function(params) {
        return params.data.DEALCAT + '<br/>' + params.data.WORKFLOWSTATE
      },
      width: 150,
      resizable: true,
      filter: true
    },
    {
      headerName: 'End',
      field: 'ENDDATE',
      valueFormatter: this.dateFormatter,
      width: 140,
      resizable: true,
      filter: true
    },
  ];
  rowData: any;
  constructor(private service: DealsService) {}
  dateFormatter(params) {
    return moment(params.value).format('DD/MM/YYYY');
  }
  dateFormatterr(params1, params2) {
    return moment(params1.value + params2.value).format('DD/MM/YYYY');
  }
  ngOnInit() {
    this.service.getDealsList().subscribe(data => {
      this.rowData = data;
    });
  }
}

我希望能得到你的帮助。

Answer 1

您可以使用 Trade Start 列的自定义单元格渲染器组件来实现此目的。

1. 创建一个实现 ICellRendererAngularComp 的 ag-grid 自定义单元格渲染组件
2. 在 Trade Start 列的列定义中添加 DateCellRendererComponent 作为 cellRendererFramework
3. 在您的应用模块中注册自定义单元格渲染组件。

date-cell-renderer.component.html

<p>{{trDate}} <br />{{strtDate}}</p>

date-cell-renderer.component.ts

    import { Component } from '@angular/core';
    import { ICellRendererAngularComp } from 'ag-grid-angular';
    import * as moment from 'moment';

    @Component({
       selector: 'app-comment-cell-renderer',
       templateUrl: './comment-cell-renderer.component.html',
       styleUrls: ['./comment-cell-renderer.component.scss']
    })
    export class DateCellRendererComponent implements ICellRendererAngularComp {
       params: any;
       trDate: string;
       strtDate: string;

       refresh(params: any): boolean {
            return false;
       }

       agInit(params: any): void {
            this.params = params;
            this.trDate = moment(params.data.TRADEDATE).format('DD/MM/YYYY');
            this.strtDate = moment(params.data.STARTDATE).format('DD/MM/YYYY');
       }

       constructor() { }
   }

app.component.ts

columnDefs = [
    {
      headerName: 'Trade \n Start',
      cellRendererFramework: DateCellRendererComponent,
      width: 150,
      resizable: true,
      filter: true,
    }
];

app.module.ts

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  imports: [
    AgGridModule.withComponents(
      [ DateCellRendererComponent]
    )
  ]
})

Answer 2

dateFormatterr function 必须采用一个参数而不是两个参数，在 function 内部：

1. 您必须使用正则表达式/模式或自定义 function 将两个日期字符串分成两个字符串。
2. 将每个字符串解析为日期格式
3. 最后使用 moment 将两个日期相加并返回

我不能给你密码； 因为您的屏幕截图没有显示所有日期。