angular: date pipe formatter doesn't format minutes and seconds properly in IE 11.0.9600.18350 and Edge

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior When using the date pipe In IE 11.0.9600.18350 with minutes/seconds it shows the whole date instead of the minutes and/or seconds.

Examples: Date recieved from service | used binding | result “2016-06-21T10:47:40Z” | {{mydate | date:‘HH’}} | ‎12‎:‎00 “2016-06-21T10:47:40Z” | {{mydate | date:‘mm’}} | ‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM “2016-06-21T10:47:40Z” | {{mydate | date:‘ss’}} | ‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM

“2016-06-21T10:47:40Z” | {{mydate | date:‘HH:mm’}} | ‎12‎:‎00:‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM “2016-06-21T10:47:40Z” | {{mydate | date:‘mm:ss’}} | ‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM:‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM “2016-06-21T10:47:40Z” | {{mydate | date:‘HH:ss’}} | ‎12‎:‎00:‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM

“2016-06-21T10:47:40Z” | {{mydate | date:‘HH:mm:ss’}} | ‎‎12‎:‎00:‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM:‎6‎/‎21‎/‎2016‎ ‎12‎:‎47‎:‎40‎ ‎PM

It seems that the minutes and seconds produce an entire date instead of the desired minutes/seconds.

Expected/desired behavior The expected behaviour is that mm only returns the minutes and ss only returns the seconds.

Reproduction of the problem http://plnkr.co/edit/kc8ZEMAvsx1tSbsbXTuv?p=preview

What is the expected behavior? See above.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • Angular version: 2.0.0-rc.2 && 2.0.0-rc.3
  • Browser: [ IE 11.0.9600.18350 && Edge ] this does not occur on the latest versions of Chrome and Firefox. Haven’t tested other browsers.
  • Language: [TypeScript 1.8.10]

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 18
  • Comments: 27 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Any solution guys? If I use date:"dd/MM/yy HH:mm:ss"

It displays the time 3 times

05/10/16 18:00:10/5/2016 6:23:14 PM:10/5/2016 6:23:14 PM

+14
felipedrumond on Oct 6, 2016

Still present in 2.4.1 release. #11054 should not be closed.

+12
ckuetbach on Mar 9, 2017

There is also another work around for this folks which uses the Date pipe as it is something we had to do in our project (it’s not perfect but it’s better than being broken)

I recommend using the ‘short’ (9/3/2010, 12:05 PM) or ‘shortDate’ (9/3/2010) or ‘shortTime’ (12:05 PM) formats (https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html). These do seem to work in IE and Edge, as well as other browsers. They also support locale so you’ll get a formatted date/time for that area. It’s a good workaround while this gets fixed.

+9
jamesmcroft on Oct 20, 2016

Another workaround, if you have moment available, the following creates a datex pipe which uses the moment formatter instead of the angular one:

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

@Pipe({
    name: 'datex'
})

export class DatexPipe implements PipeTransform {
    transform(value: string, format: string = ""): string {
        if (!value || value==="") return "";
        return moment(value).format(format);
    }
}

Usage:

{{exampleDate | datex:'DD/MM/YYYY HH:mm:ss'}}

This will only work correctly where exampleDate is something which can be parsed by the default moment parsing rules - see the moment documentation. It will return am empty string if something falsey is passed in.

+8
mrsheepuk on Oct 20, 2016

There will be a blog post with all of the breaking changes and the best way to migrate your application to v5, so this will definitively be in it.

+3
ocombe on Aug 25, 2017

Am also experiencing an issue with the DatePipe in Angular 2.0.0 on IE 11:

{{exampleDate | date: 'HH:mm'}} if formatted as 10:00:10/19/2016 10:00:00 AM.

+3
danjford on Oct 19, 2016

The pull request contains breaking changes. Hope it will be 5.0 then, not 6.0!

+1
MickL on Aug 9, 2017
Read more comments on GitHub
← angular: Date pipe doesn't ignore details of formatting when using a custom format
angular: DatePipe does not support timezone abbreviations in Angular 5 →