Le tuyau de date angulaire2 ne fonctionne pas dans IE 11 et le bord 13/14

Question

J'utilise Angular 2.0 final et le format des dates est incorrect lorsque j'ajoute des heures et des minutes dans la chaîne de formatage:

Dans le modèle du 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: 'aaaa-MM-jj'}}

La date de sortie dans IE 11 est correcte:

 2016-09-27
 

Voici la version des composants que j'utilise dans le 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": {}
}
 

Answer 1

Mise à JOUR - Le Angulaires problème qui provoque ce problème est résolu dans Angulaire 5. Si vous le pouvez, je vous conseille d'utiliser que pour éviter ce problème.

Si vous utilisez encore Angulaire 4 ou plus comme une solution de contournement, j'ai créé un tuyau d'utiliser le moment formateur au lieu de l'angle 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 ensuite être utilisé:

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

La date doit être quelque chose qui peut analyser (voir le moment de la documentation) et la chaîne de format est un moment, pas angulaire, la date de formatage de chaîne de caractères, comme indiqué ici.

J'ai testé cela dans IE11, Chrome et Firefox, et il se comporte de manière uniforme.

Vous devez vous assurer que le moment est ajouté à votre forfait.json comme une dépendance, par exemple:

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

... et vous assurer que 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' } 
}

Answer 2

De Angular2 DatePipe API Documentation.

"Ce tube utilise l’API d’internationalisation. Par conséquent, il n’est fiable que dans les navigateurs Chrome et Opera.

Answer 3

Si vous êtes prêt à afficher les horaires AM / PM au lieu de 24 heures, une autre solution de contournement valide consiste à diviser le formatage en deux et à utiliser shortTime ou mediumTime :

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

Cela devrait fonctionner dans tous les principaux navigateurs, y compris IE et Edge.

Answer 4

Concernant la réponse de @marc-hughes ci-dessus, à partir du moment où la documentation de l'API:

date_expression | date[:format]

l'expression est un objet date ou un nombre de millisecondes depuis UTC époque) ou de l'ISO chaîne

Référence

Si la valeur doit être de tout type, et vous pouvez utiliser moment().isValid() pour vérifier le type de la valeur

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

Answer 5

Travailler dans Angulaire 5.x

Dans la version 5.x de l'angle de ce problème est de travailler correctement à Bord (v. 38.14393.1066.0) et dans IE (v. 11.1198.14393.0), l'essai de 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 l'ensemble de l'opération de l'angle de DatePipe.