1

I have an input on my Angular component html like this:

<input id="orderdate" class="form-control" value="{{order.OrderDate | date: 'd.M.yyyy H:mm:ss'}}" disabled />

order.OrderDate has value 2017-06-01T10:52:03.666723, and I expect to see value in format

1.6.2017 10:52:03.

However, what I actually get is

1.6.2017 10:00:6/1/2017 10:52:03 AM:6/1/2017 10:52:03 AM

If I use only date (d.M.yyyy), it works correctly (1.6.2017). Why is the time part showing wrong?

joonash
  • 33
  • 1
  • 8

2 Answers2

0

I think its supposed to be in this format 'd.M.y H:mm:ss'. Angular Date Pipe

Thiagz
  • 121
  • 1
  • 13
  • 1
    I tried to use , now input shows 1.6.2017 10 AM:6/1/2017 10:52:03 AM:6/1/2017 10:52:03 AM. Intresting. – joonash Jun 07 '17 at 08:13
  • My bad, just checked the code on pulker and it gives the same output, but your actual code gives the correct result. Which version of Angular are you running on? – Thiagz Jun 07 '17 at 08:18
  • Angular version 4.0.0 – joonash Jun 07 '17 at 08:29
  • I have never actually used plunker before, but I found this plunker page which already shows date formats (and it also shows datepart wrong): https://embed.plnkr.co/BvQYVodh88zRjF8MCZuQ/?show=app%2Fapp.component.ts&show=preview – joonash Jun 07 '17 at 08:53
  • 1
    Hmm, date pipe seems to be working on Chrome and Firefox, but not in IE or Edge. – joonash Jun 07 '17 at 11:23
  • 1
    Seems like its an open issue in angular. Try using this workaround. https://stackoverflow.com/questions/39728481/angular2-date-pipe-does-not-work-in-ie-11-and-edge-13-14 – Thiagz Jun 08 '17 at 02:30
0

Thanks to comment by Thiagz, I found solution to this problem here: Angular2 date pipe does not work in IE 11 and edge 13/14.

This seems to be bug in IE and Edge, so I had to create my own pipe for date.

DatexPipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({
    name: 'datex'
})

export class DatexPipe implements PipeTransform {
    transform(value: any, format: string = ""): string {
        var momentDate = moment(value);

        if (!momentDate.isValid()) return value;

        return momentDate.format(format);
    }
}

Use it like this:

<input id="orderdate" class="form-control" value="{{order.OrderDate | datex: 'd.M.YYYY H:mm:ss'}}" disabled />
joonash
  • 33
  • 1
  • 8