How to format date in Angular Kendo Grid

if you have a big project and you have to use the same format multiple times then a directive is the way to go.

This is super important for the usability and in case you decided to change the format you use (Maintenance)

import { Directive, OnInit } from '@angular/core';
import { ColumnComponent } from '@progress/kendo-angular-grid';

@Directive({
  selector: '[kendo-grid-column-date-format]'
})
export class KendoGridColumnDateFormatDirective implements OnInit {
  constructor(private element: ColumnComponent) {
  }

  ngOnInit() {
    this.element.format = "{0:dd.MM.yyyy}";
  }  
}

and you can use it like this

<kendo-grid-column field="yourField"
                   title="your title"
                   kendo-grid-column-date-format>
</kendo-grid-column>

Super important do not forget to register the directive

Try this:

<kendo-grid-column field="dateField" width="220" title="Open Date">
    <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.dateField | date: 'MM/dd/yyyy'}}
    </ng-template>
</kendo-grid-column>

You can also use short or other formats provided by angular Date Pipe

The Grid data needs to contain actual JavaScript Date objects as opposed to some string representations. Then built-in formatting, sorting, filtering and editing will treat the dates as such and will work as expected:

Docs

Map the data so that it contains actual dates.

EXAMPLES:

String Date