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

【问题标题】：Format 2 dates in 1 cell在 1 个单元格中格式化 2 个日期
【发布时间】：2020-09-19 21:18:22
【问题描述】：

我在 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;
    });
  }
}

希望能得到你的帮助。

【问题讨论】：

调用moment(...).format(...) 两次并连接到dateFormatterr

标签： javascript angular typescript ag-grid date-formatting

【解决方案1】：

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

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

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]
    )
  ]
})

【讨论】：

【解决方案2】：

dateFormatterr函数必须带一个参数而不是两个，在函数内部：

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

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

【讨论】：