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>

Geochemistry

please refer this link: stackblitz.com/edit/angular-s6xzee?file=app/app.component.ts – Cannabin

First thing is that you should check the docs on the newer style formats - your code looks to be using the JQuery/AngularJS style date format see here: telerik.com/kendo-angular-ui/components/grid/columns/formats/… The next thing is that (per the docs I linked to above) those formats only work if the field is a JavaScript Date() object! This pretty much stinks as the Json objects coming from the server will deliver it as strings unless you re-map them in an interceptor - which kinda sucks see here: github.com/angular/angular/issues/21079 – Dinnage

Answer 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

Counterwork

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'}} – Perimeter

Answer 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

Mama

I've created a modified version of this to accept a string argument to define the format: gist.github.com/fergusonjason/69bc57660237977b03c8dde97b813709 – Halogen

Answer 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

Cannabin