angular slickgrid date format change only display in grid

Question

  this.columnDefinitions = [
          {
            id: 'edit',
            field: 'id',
            excludeFromColumnPicker: true,
            excludeFromGridMenu: true,
            excludeFromHeaderMenu: true,
            formatter: Formatters.editIcon,
            minWidth: 30,
            maxWidth: 30,
            onCellClick: (e: Event, args: OnEventArgs) => {
              this.router.navigate(['/transaction/transaction-detail/' + args.dataContext.id]);
            }
          },
         
      { id: 'cin', field: 'customer.cin', name: 'CIN', filterable: true, sortable: true, formatter: Formatters.complexObject },
      { id: 'branch', field: 'branch.name', name: 'Branch', filterable: true, sortable: true, formatter: Formatters.complexObject },
      { id: 'valueDate', field: 'valueDate', name: 'Transaction Date ',  dateFormat: 'DD-MM-YYYY'},
      { id: 'amount', field: 'amount', name: 'Amount', sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber }  },  
  ];

<div class="card-body">
    <div class="form-group row" id="grid-container">
        <angular-slickgrid gridId="transactionGrid" [columnDefinitions]="columnDefinitions"
                                [gridOptions]="gridOptions" [dataset]="dataset"
                                (onAngularGridCreated)="angularGridReady($event)">
        </angular-slickgrid>
    </div>
</div>

I need to change the date format to DD-MM-YYYY OR DD/MM/YYYY ( remove time)

How to do that in angular slickgrid

Now showng like below...date coming in date format..is we can use pipe to convert date as string

Answer 1

You might be new to Angular-Slickgrid and SlickGrid in general and I simply say this because there is no such dateFormat property (I'm surprised TypeScript didn't warn you), however formatter does exist and so the answer is simple, you just need to use the appropriate Formatter. There are a few built-in Formatters and if you can't find the exact format that you want you also have the choice creating your own Custom Formatter.

I strongly suggest you to go through all the Wikis, for example the Formatters - Wiki would have give you the answer by looking at the list of all built-in Formatters and there's also a section to show you how to create a Custom Formatter if needed.

In your case, I think you can achieve the Format you want by doing 2 things, first call the Formatters.dateEuro which will give you this format DD/MM/YYYY and if you want to replace the / by a - then you can achieve that by using the formatterOptions grid option

this.columnDefinitions: Column[] = [
   // ...
   { id: 'valueDate', field: 'valueDate', name: 'Transaction Date ',  formatter: Formatters.dateEuro },
];

this.gridOptions: GridOption = {
    // you can customize the date separator through "formatterOptions"
    formatterOptions: {
      // What separator to use to display a Date, for example using "." it could be "2002.01.01"
      dateSeparator: '-', // can be any of '/' | '-' | '.' | ' ' | ''
    }
};

I want to emphasis again all the Wikis, I spent a lot of time writing them to answers most questions, yours included. Also note, Angular-Slickgrid is wrapper on top of a jQuery library, so Angular pipes won't work neither help with your question.