1. 技术文章
  2. Angular2 date pipe does not work in IE 11 and edge 13/14

Angular2 date pipe does not work in IE 11 and edge 13/14

由 ￡可爱￡侵袭症＋ 提交于 2019-11-27 19:59:07

UPDATE - The Angular issue that causes this issue is resolved in Angular 5. If you can, I would recommend using that to avoid this problem.

If you are still using Angular 4 or older - as a workaround, I created a pipe to use the moment formatter instead of the Angular built-in one:

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 {
        // Try and parse the passed value.
        var momentDate = moment(value);

        // If moment didn't understand the value, return it unformatted.
        if (!momentDate.isValid()) return value;

        // Otherwise, return the date formatted as requested.
        return momentDate.format(format);
    }
}

Which can then be used:

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

The date you pass in should be something which moment can parse (see the relevant moment documentation) and the format string is a moment, not angular, date formatting string, as documented here.

I've tested this in IE11, Chrome and Firefox and it behaves consistently.

You'll need to ensure moment is added to your package.json as a dependency, e.g.:

{
  "name": "demo",
  "version": "0.0.1",
  // snip
  "dependencies": {
    // snip
    "moment": "^2.15.1",
    // snip
  },
  "devDependencies": {
    //snip
  }
}

... and ensure your systemjs.config.js is updated so it can locate moment:

map: { 
  'moment': 'npm:moment' 
} 
packages: { 
  moment: { main: './moment.js', defaultExtension: 'js' } 
}

From Angular2 DatePipe API Documentation.

"this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers.

If you are okay with showing AM/PM instead of 24 hour time, another valid workaround is to break the formatting into two, and use shortTime or mediumTime for displaying the time portion:

{{dto.LastExecution | date:'yyyy-MM-dd'}} {{dto.LastExecution | date:'shortTime'}}

This should work in all major browsers, including IE and Edge.

Seven

Regarding the answer from @mark-hughes above, from the moment API documentation:

date_expression | date[:format]

expression is a date object or a number (milliseconds since UTC epoch) or an ISO string

Reference

So the value should be any type, and you can use moment().isValid() to check the value type

@Pipe({name: 'datex'})
export class DatexPipe implements PipeTransform {
    transform(value: any, format: string = ""): string {
       return moment(value).isValid()? moment(value).format(format) : value; 
    }
}

Work in Angular 5.x

In version 5.x of the Angular this problem is working correctly in Edge (v.38.14393.1066.0) and in IE (v.11.1198.14393.0), test in your version!

Live example: Plunker Angular 5.x

Related issue that solved the problem (if I found something inconsistent): https://github.com/angular/angular/issues/9524

Answer that involves the entire operation of the Angular DatePipe.

The below solution works fine in for IE11 and chrome. No need to create custom pipes.

 {{dto.createdTimeLocal | date:'dd MMM yyyy'}} {{dto.createdTimeLocal | date:'shortTime'}}

moment.js pipes for Angular

Marks answer is great and it was what I was using till I found this simple solution that is well documented.

moment.js pipes for Angular

This module works with Angular 2.0 and above.

Harish Gilaka

No need to write format like this {{date:dd/MM/yyyy hh:mm:ss a}}.
IE11 or EDGE getting issue with this format only.

Here are some alternatives:

Ex 1: new date and time:

var date = new Date().toLocaleDateString();
var time = new Date().toLocaleTimeString();

var datetime = date + " " + time;

Ex 2: Already you have a datetime and you want to convert. see below:

datetime = "3/23/2018 11:43:51 AM"

We can split the date and time.

var date = new Date(datetime).toLocaleDateString();
var time = new Date(datetime).toLocaleTimeString();

var splitdatetime = date + " " + time;

This is Angular4. it work fine for all browsers.

标签
datetime
angular
format
pipe
internet-explorer-11
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!