Angular2 日期管道在 IE 11 和 edge 13/14 中不起作用 [英] Angular2 date pipe does not work in IE 11 and edge 13/14
问题描述
我使用的是 Angular 2.0 final,当我在格式字符串中添加小时和分钟时,日期格式不正确:
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>
IE 11 中的输出日期为:
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
有{{dto.LastExecution |日期:'yyyy-MM-dd'}}
With {{dto.LastExecution | date:'yyyy-MM-dd'}}
IE 11 中的输出日期是正确的:
The output date in IE 11 is correct:
2016-09-27
这是我在 package.json 中使用的组件版本:
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": {}
}
推荐答案
更新 - Angular 问题导致此问题 在 Angular 5 中得到解决.如果可以,我建议使用它来避免此问题.
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.
如果您仍在使用 Angular 4 或更早版本 - 作为一种解决方法,我创建了一个管道来使用 moment 格式化程序而不是 Angular 内置的:
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);
}
}
然后可以使用:
{{exampleDate | datex:'DD/MM/YYYY HH:mm:ss'}}
你传入的日期应该是moment可以解析的(参见相关moment文档) 并且格式字符串是一个时刻,而不是有角度的日期格式字符串,如 在此处记录.
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.
我已经在 IE11、Chrome 和 Firefox 中对此进行了测试,并且表现一致.
I've tested this in IE11, Chrome and Firefox and it behaves consistently.
您需要确保将 moment 作为依赖项添加到您的 package.json 中,例如:
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
}
}
...并确保您的 systemjs.config.js 已更新,以便它可以定位时刻:
... 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 和 edge 13/14 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!