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

question from:https://stackoverflow.com/questions/65650139/angular-slickgrid-date-format-change-only-display-in-grid

Answer 1

You seem to be new to Angular-Slickgrid and SlickGrid in general, I 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 then you can always create 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'll say it again, please visit and consult 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.