Combining 2 dates into a single cell format

Question

Combining 2 dates into a single cell format

I'm struggling to change the date format of two dates displayed in one cell using ag-grid. I have tried creating a new function called dateFormatterr with two parameters, but it doesn't seem to work. Below is a snippet of my code and a screenshot of the ag-grid in question:

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

Your assistance with this issue is greatly appreciated. Thank you.

javascript angular typescript ag-grid date-formatting

Answer 1

Answer №1

To implement a custom cell renderer component for the Trade Start column, follow these steps:

Develop an ag-grid custom cell render component that implements ICellRendererAngularComp interface.
Specify the DateCellRendererComponent as the cellRendererFramework in the column definition of the Trade Start column.
Ensure to register the custom cell render component in your application module.

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

To implement a custom cell renderer component for the Trade Start column, follow these steps:

Develop an ag-grid custom cell render component that implements ICellRendererAngularComp interface.
Specify the DateCellRendererComponent as the cellRendererFramework in the column definition of the Trade Start column.
Ensure to register the custom cell render component in your application module.

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 3

Answer №2

The function dateFormatter should only accept a single parameter instead of two. Here are the steps to follow within the function:

Using regex/pattern or a custom function, split the two date strings into separate strings.
Convert each string into a date format.
Sum the two dates using moment and return the result.

I am unable to provide the code as your screenshot does not display all the necessary date information.

Answer 4

The function dateFormatter should only accept a single parameter instead of two. Here are the steps to follow within the function:

Using regex/pattern or a custom function, split the two date strings into separate strings.
Convert each string into a date format.
Sum the two dates using moment and return the result.

I am unable to provide the code as your screenshot does not display all the necessary date information.

Combining 2 dates into a single cell format

Answer №1

Answer №2

Similar questions

Combining attributes of objects in an array

What is the purpose of running "npm install" if the "node_modules" directory already exists?

The key to subscribing only once to an element from AsyncSubject in the consumer pattern

What is the best way to make sure the embedded object fills the entire height of the container div?

How can you delay the return of a function until after another asynchronous call has finished executing?

Avoiding Re-renders in an Angular2 Countdown Component

Hiding the C3 tooltip after engaging with it

Tips for efficiently storing data in the Laravel database using Ajax

Unable to dynamically load a component into page.tsx within Next.js

Utilizing the correct method for binding checkboxes in Vue JS for effective two-way communication

Facing issues with Angular 13 migration: Schema validation encountered errors stating that the data path "/error" needs to be a string

How can I determine if a URL in react js includes a specific string?

The transitions on my jQuery Mobile page are not functioning correctly

Analyzing two arrays and utilizing ng-style to highlight matching entries within the arrays

Creating a dynamic slider using jQuery

Determine the Button's State by Monitoring Changes in the TextBox Text

The command npm install -g . fails to copy the package

Is it possible to initiate a request action in both the constructor and ngOnInit method?

Choosing Angular.json setups while executing a Docker multi-stage construction

Omit assets in final version