Angular2日期管道在IE 11和边缘13/14中不起作用 [英] Angular2 date pipe does not work in IE 11 and edge 13/14

问题描述

我使用的是Angular 2.0 final，而当我在格式化字符串中添加小时和分钟时，我的日期格式不正确：

组件，我有：

 < th id =lastexecution> {{dto.LastExecution | date：'yyyy-MM-dd HH：mm：ss'}}< / th> 
  

IE 11的输出日期是：

  2016-09-27 15：00：9/27/2016 3:53:46 PM：9/27/2016 3:53:46 PM 
  

使用
{{dto.LastExecution | date：'yyyy-MM-dd'}}

IE 11中的输出日期是正确的：

  2016-09-27 
  

以下是我使用的组件版本在package.json中：

  {
name：ima_sentinel，
version ：1.0.0，
description：文档中的QuickStart package.json，辅以测试支持，
scripts：{
start：tsc& amp ;&同时\tsc -w\\lite-server \，
docker-build：docker build -t ima_sentinel。，
docker ：npm run docker-build&& docker run -it --rm -p 3000：3000 -p 3001：3001 ima_sentinel，
pree2e：npm run webdriver：update，
e2e：tsc&&&&&&&&&&& lint：tslint ./app/**/*.ts -t verbose，
lite：lite-server，
postinstall： typings install，
test：tsc&&同时\tsc -w\\karma start karma.conf.js \，
test-once：tsc&& karma start karma.conf.js --single-run，
tsc：tsc，
tsc：w：tsc -w，
typings： typings，
webdriver：update：webdriver-manager update
}，
keywords：[]，
author：，
license：ISC，
dependencies：{
@ angular / common：2.0.0，
@ angular / compiler：2.0。 0，
@ angular / core：2.0.0，
@ angular / forms：2.0.0，
@ angular / http：2.0 .0，
@ angular / platform-b​​rowser：2.0.0，
@ angular / platform-b​​rowser-dynamic：2.0.0，
@角度/路由器：3.0.0，
@ angular / upgrade：2.0.0，
angular2-in-memory-web-api：0.0.20， 
bootstrap：^ 3.3.6，
core-js：^ 2.4.1，
linqts：^ 1.6.0，
reflect-metadata：^ 0.1.3，
rxjs：5.0.0-beta.12，
signalr：^ 2.2.1，
systemjs：0.19.27，
typescript-collections：^ 1.1.9，
zone.js：^ 0.6.23
} ，
devDependencies：{
concurrently：^ 2.2.0，
lite-server：^ 2.2.0，
typescript： ^ 2.0.2，
typings：^ 1.0.4，
canonical-path：0.0.2，
http-server：^ 0.9.0，
tslint：^ 3.7.4，
lodash：^ 4.11.1，
jasmine-core：〜2.4.1 ，
karma：^ 1.2.0，
karma-chrome-launcher：^ 0.2.3，
karma-cli：^ 0.1。 2，
karma-htmlfile-reporter：^ 0.2.2，
karma-jasmine：^ 0.3.8，
量角器：^ 3.3 .0，
rimraf：^ 2.5.2
}，
repository：{} 
} 
  

解决方案

这是针对此问题的Angular公开问题 - 作为一种解决方法，我创建了一个使用矩格式化器而不是Angular内置的管道：

 从'@ angular / core'导入{Pipe，PipeTransform}; 
导入*从时刻开始; 
 $ b @Pipe（{
 name：'datex'
}）
 
导出类DatexPipe实现了PipeTransform {
 transform（value：any ，format：string =）：string {
 //尝试并解析传入的值。 
 var momentDate = moment（value）; 
 
 //如果时刻不理解该值，则返回未格式化的值。 
 if（！momentDate.isValid（））返回值; 
 
 //否则，按要求返回格式化的日期。 
 return momentDate.format（format）; 
 
 
 $ / code> 

然后可以使用：

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

应该是某个时刻可以解析的东西（请参阅相关时刻文档）和格式字符串是一个时间，而不是角度，日期格式字符串，如这里记录。





我已经在IE11，Chrome和Firefox中测试过了，它的表现一直很稳定。

被添加到你的package.json作为一个依赖，例如：

  {
name：demo， 
version：0.0.1，
 // snip 
dependencies：{
 // snip 
moment：^2.15.1 ，
 // snip 
}，
devDependencies：{
 // snip 
} 
} 
  

...并确保您的systemjs.config.js已更新，以便定位时刻：

  map：{
'moment'：'npm：moment'
} 
 packages：{
 moment：{main：'./moment.js'，defaultExtension：'js' } 
} 
  

I'm using Angular 2.0 final, and I have an incorrect format of dates when I add hours and minutes in the format string:

In the template of the component, I have:

<th id="lastexecution">{{dto.LastExecution | date:'yyyy-MM-dd HH:mm:ss'}}</th>

The output date in IE 11 is:

2016-09-27 15:00:9/27/2016 3:53:46 PM:9/27/2016 3:53:46 PM

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

The output date in IE 11 is correct:

2016-09-27

Here is the components version I use in the package.json:

{
  "name": "ima_sentinel",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ima_sentinel .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ima_sentinel",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "postinstall": "typings install",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "linqts": "^1.6.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "signalr": "^2.2.1",
    "systemjs": "0.19.27",
    "typescript-collections": "^1.1.9",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.0",
    "typescript": "^2.0.2",
    "typings": "^1.0.4",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.2"
  },
  "repository": {}
}

解决方案

This is the open issue against Angular for this problem - 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' } 
}

这篇关于Angular2日期管道在IE 11和边缘13/14中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！