it-swarm.com.de

Angular2 Date Pipe funktioniert nicht in IE 11 und Rand 13/14

Ich verwende Angular 2.0 final und habe ein falsches Datumsformat, wenn ich Stunden und Minuten in der Formatzeichenfolge hinzufüge:

In der Vorlage der Komponente habe ich:

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

Das Ausgabedatum in IE 11 ist:

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

Mit {{dto.LastExecution | Datum: 'JJJJ-MM-TT'}}

Das Ausgabedatum in IE 11 ist korrekt:

2016-09-27

Hier ist die Komponentenversion, die ich in package.json verwende:

{
  "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": {}
}
42

UPDATE - Das Angular-Problem, das dieses Problem verursacht wurde in Angular 5 behoben. Wenn Sie können, würde ich empfehlen, dies zu vermeiden, um dieses Problem zu vermeiden.

Wenn Sie noch Angular 4 oder älter verwenden - als Problemumgehung habe ich eine Pipe erstellt, um den Moment-Formatierer anstelle des integrierten Angular-Formats zu verwenden:

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);
    }
}

Was kann dann verwendet werden:

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

Das Datum, an dem Sie übergeben werden, sollte etwas sein, das der Moment analysieren kann (siehe die relevante Dokumentation für Momente ), und die Formatzeichenfolge ist eine Moment- und keine Winkelformat-Datumsformatierungszeichenfolge als hier dokumentiert .

Ich habe dies in IE11, Chrome und Firefox getestet und verhält sich konsequent.

Sie müssen sicherstellen, dass Ihrem package.json ein Moment als Abhängigkeit hinzugefügt wird, z. B .:

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

... und vergewissern Sie sich, dass Ihre systemjs.config.js aktualisiert ist, damit sie den Moment ermitteln kann:

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

Aus der Angular2 DatePipe API-Dokumentation.

"Diese Pipe verwendet die Internationalisierungs-API. Daher ist sie nur in Chrome- und Opera-Browsern zuverlässig.

15
Omri L

Wenn Sie mit dem Anzeigen von AM/PM anstelle von 24 Stunden zufrieden sind, besteht eine andere gültige Problemumgehung darin, die Formatierung in zwei Teile zu unterteilen und shortTime oder mediumTime zum Anzeigen des Zeitabschnitts zu verwenden:

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

Dies sollte in allen gängigen Browsern funktionieren, einschließlich IE und Edge.

9
Andrew Mairose

Zu der Antwort von @ mark-hughes oben, ab dem Moment der API-Dokumentation:

datumsausdruck | Datumsformat]

ausdruck ist ein Datumsobjekt oder eine Zahl (Millisekunden seit UTC-Epoche) oder eine ISO-Zeichenfolge 

Referenz

Der Wert sollte also ein beliebiger Typ sein und Sie können moment().isValid() verwenden, um den Werttyp zu überprüfen

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

Arbeiten in Angular 5.x

In Version 5.x von Angular) funktioniert dieses Problem in Edge (v.38.14393.1066.0) und in IE (v.11.1198.14393.0) ordnungsgemäß. , teste in deiner Version!

Live-Beispiel: Plunker Angular 5.x


Verwandte Ausgabe, die das Problem löste (wenn ich etwas Inkonsistentes fand): https://github.com/angular/angular/issues/9524


Antwort, die den gesamten Vorgang der Angular DatePipe betrifft.

2
Fernando Leal

Die untenstehende Lösung funktioniert gut für IE11 und Chrom. Sie müssen keine benutzerdefinierten Pipes erstellen.

 {{dto.createdTimeLocal | Datum: 'TT MMM JJJJ'}} {{dto.createdTimeLocal | date: 'shortTime'}} 
2
Muni Chittem

Sie müssen kein Format wie dieses {{date:dd/MM/yyyy hh:mm:ss a}} schreiben.
IE11 oder Edge-Problem nur bei diesem Format.

Hier sind ein paar alternativen:

Ex 1: neues Datum und neue Uhrzeit:

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

var datetime = date + " " + time;

Beispiel 2: Sie haben bereits eine datetime und möchten konvertieren. siehe unten:

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

Wir können Datum und Uhrzeit aufteilen.

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

var splitdatetime = date + " " + time;

Dies ist Angular4. es funktioniert gut für alle Browser.

0
Harish Gilaka

moment.js Pipes für Angular

Die Antwort von Marks ist großartig und es war, was ich verwendet habe, bis ich diese einfache Lösung gefunden habe, die gut dokumentiert ist.

moment.js Pipes für Angular

Dieses Modul funktioniert mit Angular 2.0 und höher.

0
JCPhlux