Short solution for short problems

Angular: date pipe not showing in IE when using time filter.

I'm having a lot of IE11 problems today with Angular 4. I understand that the framework focusses more one real browsers, unfortunately in the corporate world IE11 is still not dead. During development I use Chrome, at test phase the users use IE 11 and then the problems come.

Today I already had some difficulties on this subject. No the date pipe of Angular is not working as expected in IE11. When I set the date format to: dd/MM/yyyy HH:mm for example, it works in Chrome. But in IE it is showing nothing. It has something to do with a bug in the browser, when using the minutes (mm) it stops working. If you only use the date format (dd/MM/yyyy) in the pipe, it works for IE11.

So, after some lookup I decided to make my own pipe. Because for example the momentJS was to heavy to use only for this problem.

This is how the pipe code looks:

import { Pipe, PipeTransform } from '@angular/core';
name: 'dateNLBE'
export class DateNlBePipe implements PipeTransform {
transform(value: Date, type: string = ''): string {
if (value !== null) {
return `${value.toLocaleDateString('nl-BE')} ${value.getHours() < 10 ? '0' + value.getHours() : '' + value.getHours()}:
${value.getMinutes() < 10 ? '0' + value.getMinutes() : '' + value.getMinutes()}`;
return '';

Now you can use it in your code like this:

<td>{{o.CreatedOn | dateNLBE }}</td>

And this works both in IE and Chrome.

blog comments powered by Disqus