Angular2 date de la pipe ne fonctionne pas dans IE 11 et le bord 13/14
J'utilise Angular 2.0 final, et j'ai un format incorrect de dates quand j'ajoute des heures et des minutes dans la chaîne de format:
Dans le modèle de composant, j'ai:
<th id="lastexecution">{{dto.LastExecution | date:'yyyy-MM-dd HH:mm:ss'}}</th>
la date de sortie dans IE 11 est:
2016-09-27 15:00:9/27/2016 3:53:46 PM:9/27/2016 3:53:46 PM
Avec {{dto.LastExecution / date: 'yyyy-MM-JJ'}}
la date de sortie dans IE 11 est correcte:
2016-09-27
Voici la version des composants que j'utilise dans le paquet.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": {}
}
8 réponses
UPDATE-The problème angulaire qui cause ce problème est résolu à L'Angle 5. Si vous le pouvez, je vous recommande de l'utiliser pour éviter ce problème.
si vous utilisez toujours Angular 4 ou plus ancien - comme solution de contournement, j'ai créé un tuyau pour utiliser le formatteur moment au lieu de L'Angular intégré:
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);
}
}
qui peut alors être utilisé:
{{exampleDate | datex:'DD/MM/YYYY HH:mm:ss'}}
La date dans doit être quelque chose qui peut analyser (voir pertinentes documentation du moment) et la chaîne de format est une chaîne de formatage moment, pas angulaire, date, comme documentée ici.
j'ai testé cela dans IE11, Chrome et Firefox et il se comporte de manière cohérente.
vous devez vous assurer que moment est ajouté à votre paquet.json en tant que dépendance, par exemple:
{
"name": "demo",
"version": "0.0.1",
// snip
"dependencies": {
// snip
"moment": "^2.15.1",
// snip
},
"devDependencies": {
//snip
}
}
... et pour assurer votre systemjs.config.js est mis à jour de sorte qu'il peut localiser moment:
map: {
'moment': 'npm:moment'
}
packages: {
moment: { main: './moment.js', defaultExtension: 'js' }
}
From Angular2 Datapipe API Documentation.
" cette pipe utilise L'API D'internationalisation. Par conséquent, il n'est fiable que dans les navigateurs Chrome et Opera.
si vous êtes d'accord pour montrer AM/PM au lieu de 24 heures, une autre solution valable est de casser le formatage en deux, et d'utiliser shortTime ou mediumTime pour afficher la portion time:
{{dto.LastExecution | date:'yyyy-MM-dd'}} {{dto.LastExecution | date:'shortTime'}}
cela devrait fonctionner dans tous les principaux navigateurs, y compris IE et Edge.
en ce qui concerne la réponse de @mark-hughes ci-dessus, à partir de la documentation API du moment:
date_expression / date [: format]
l'expression est un objet date ou un nombre (millisecondes depuis L'époque UTC)) ou une chaîne ISO
ainsi la valeur devrait être n'importe quel type, et vous pouvez utiliser moment().isValid() pour vérifier la valeur, tapez
@Pipe({name: 'datex'})
export class DatexPipe implements PipeTransform {
transform(value: any, format: string = ""): string {
return moment(value).isValid()? moment(value).format(format) : value;
}
}
travailler en angle 5.x
dans la version 5.x de L'angle ce problème fonctionne correctement dans le bord (v. 38.14393.1066.0) et dans IE (v. 11.1198.14393.0), testez dans votre version!
Live exemple: Plunker Angulaire 5.x
question qui a résolu le problème (si j'ai trouvé quelque chose d'incohérent): https://github.com/angular/angular/issues/9524
réponse qui implique tout le fonctionnement du tube de mesure angulaire.
la solution ci-dessous fonctionne très bien pour IE11 et chrome. Pas besoin de créer des tuyaux.
{{dto.createdTimeLocal | date:'dd MMM yyyy'}} {{dto.createdTimeLocal | date:'shortTime'}}
moment.js tuyaux Angulaire
points la réponse est excellente et c'est ce que j'utilisais jusqu'à ce que je trouve cette solution simple et bien documentée.
ce module fonctionne avec Angular 2.0 et au-dessus.
Pas besoin d'écrire des format comme ceci {{date:dd/MM/yyyy hh:mm:ss a}}.
IE11 ou EDGE obtenir problème avec ce format seulement.
Voici quelques alternatives:
Ex 1: nouvelle date et heure:
var date = new Date().toLocaleDateString();
var time = new Date().toLocaleTimeString();
var datetime = date + " " + time;
Ex 2: Vous avez déjà un datetime et vous voulez vous convertir. voir ci-dessous:
datetime = "3/23/2018 11:43:51 AM"
nous pouvons partager la date et l'heure.
var date = new Date(datetime).toLocaleDateString();
var time = new Date(datetime).toLocaleTimeString();
var splitdatetime = date + " " + time;
ici Angular4. il beau travail pour tous les navigateurs.