Search code examples
angularkendo-ui-angular2

The pipe 'kendoDate' could not be found


trying to format some dates in a kendo grid, using the following code

import { IntlService } from '@progress/kendo-angular-intl';
@Component({
  selector: 'app-casesearchcomponent-root',
  templateUrl: './casesearch.component.html',
  styleUrls: ['./casesearch.component.css']
})
export class CaseSearchComponent implements AfterViewInit {
  constructor(private _intl: IntlService){}
}

My page consumes it in the following fashon...

<div class="col-md-2 case-data">{{dataItem.Patient.DateOfBirth | kendoDate: 'M/dd/yyy'}}</div>
<div class="col-md-2 case-label">Scheduled Time</div>
<div class="col-md-2 case-data">{{dataItem.ScheduledDateTime | kendoDate: 'M/dd/yyy' }}</div>

According to the Doco on Teleriks internationalization page this should work, but it throws the following JavaScript error..(https://www.telerik.com/kendo-angular-ui/components/internationalization/)

compiler.js:486 Uncaught Error: Template parse errors: The pipe 'kendoDate' could not be found ("="col-md-1 case-label">DOB {{[ERROR ->]dataItem.Patient.DateOfBirth | kendoDate: 'M/dd/yyy'}} Scheduled Time {{[ERROR ->]dataItem.ScheduledDateTime | kendoDate: 'M/dd/yyy' }}


Solution

  • Just for anyone's information, if internationalization is not mission critical, you can use mast3rd3mon's advice and do the following and it will work just fine in a kendo grid.

    <div class="case-data">{{dataItem.Patient.DateOfBirth | date : 'dd/MM/yyyy}}</div>
    <div class="case-label">Scheduled Time</div>
    <div class="case-data">{{dataItem.ScheduledDateTime | date : 'dd/MM/yyyy' }}</div>