How to format date in Angular Kendo Grid

Question

I working on Angular Kendo Grid and I am getting server data in format

1900-01-01T00:00:00

But I want it to display in standard format, not sure how to do it. I have applied format='{0:MM/dd/yyyy h:mm a}' in grid column but no effect. What ever data format conversion to do, I need to do at client side of code i.e server date to javascript format!!

<kendo-grid-column field="mydata.openDate" width="220" title="Open Date" filter="date" 
                   format='{0:MM/dd/yyyy h:mm a}'>
</kendo-grid-column>

Solution 1

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

Solution 2

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

Solution 3

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

Comments

[Muheeb]

Correction to date pipe format. lower case m refers to minute in datetime object. In this case we should be using capital case M. {{dataItem.dateField | date: 'MM/dd/yyyy'}}