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

Question

我在1个单元格中显示2个日期，我想改变这2个日期的格式。我可以只用一个日期，但当涉及到2个日期时，我就很难做到了。这里是我的ag-grid的截图。

我试着创建一个新的函数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

您可以使用一个自定义单元格渲染器组件贸易开始列实现这一点。

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

dat-cell-renderer.component.html。

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

dat-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 函数必须采取 一个 而不是两个参数，在函数里面。

1. 你必须使用regexpattern或自定义函数将两个日期字符串分离成两个字符串。
2. 将每个字符串解析为一个日期格式
3. 最后用时刻将两个日期相加，并返回它

我不能给你代码，因为你的截图没有显示所有的日期。