datetime - La tubería de fecha Angular2 no funciona en IE 11 y edge 13/14

format pipe

Question

Estoy utilizando Angular 2.0 final, y tengo un formato de fechas incorrecto cuando agrego horas y minutos en la cadena de formato:

En la plantilla del componente, tengo:

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

La fecha de salida en IE 11 es:

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

Con {{dto.LastExecution | fecha: ''aaaa-MM-dd''}}

La fecha de salida en IE 11 es correcta:

2016-09-27

Aquí está la versión de los componentes que uso en el paquete. 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

ACTUALIZACIÓN: el problema angular que causa este problema se resuelve en Angular 5. Si puede, recomendaría usarlo para evitar este problema.

Si todavía está utilizando Angular 4 o una versión anterior, como solución alternativa, creé una tubería para usar el formateador de momentos en lugar del angular incorporado:

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

Que puede ser utilizado:

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

La fecha en que entre debe ser algo que el momento pueda analizar (vea la documentación del momento relevante ) y la cadena de formato es una cadena de formato de fecha de momento, no angular, como se documenta aquí .

Probé esto en IE11, Chrome y Firefox y se comporta de manera consistente.

Deberá asegurarse de que el momento se agregue a su paquete.json como una dependencia, por ejemplo:

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

... y asegúrese de que su systemjs.config.js esté actualizado para que pueda localizar el momento:

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

Answer 2

De la documentación de Angular2 DatePipe API.

"Este tubo utiliza la API de internacionalización. Por lo tanto, solo es confiable en los navegadores Chrome y Opera.

Answer 3

En cuanto a la respuesta de @ mark-hughes anterior, desde el momento en que se realizó la documentación de API:

date_expression | formato de fecha]

expresión es un objeto de fecha o un número (milisegundos desde la época UTC) o una cadena ISO

Reference

Entonces, el valor debe ser de cualquier tipo, y puede usar moment().isValid() para verificar el tipo de valor

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

Answer 4

La siguiente solución funciona bien para IE11 y Chrome. No es necesario crear tubos personalizados.

{{dto.createdTimeLocal | date:''dd MMM yyyy''}} {{dto.createdTimeLocal | date:''shortTime''}}

Answer 5

No es necesario escribir un formato como este {{date:dd/MM/yyyy hh:mm:ss a}} .
IE11 o EDGE teniendo problemas con este formato solamente.

Aquí hay algunas alternativas:

Ej. 1: nueva fecha y hora:

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

var datetime = date + " " + time;

Ej 2: ya tiene una datetime y desea convertir. vea abajo:

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

Podemos dividir la fecha y la hora.

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

var splitdatetime = date + " " + time;

Esto es Angular4. funciona bien para todos los navegadores.

Answer 6

Si está de acuerdo con mostrar AM / PM en lugar de 24 horas, otra solución alternativa válida es dividir el formato en dos y usar shortTime o mediumTime para mostrar la porción de tiempo:

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

Esto debería funcionar en todos los principales navegadores, incluidos IE y Edge.

Answer 7

Trabajar en Angular 5.x

En la versión 5.x de Angular, este problema funciona correctamente en Edge (v.38.14393.1066.0) y en IE (v.11.1198.14393.0), ¡prueba en tu versión!

Ejemplo en vivo: Plunker Angular 5.x

Problema relacionado que resolvió el problema (si encuentro algo inconsistente): https://github.com/angular/angular/issues/9524

Respuesta que involucra la operación completa de la DatePipe Angular.

Answer 8

Tubos moment.js para angular

La respuesta de Marks es excelente y fue lo que estaba usando hasta que encontré esta solución simple que está bien documentada.

Tubos moment.js para angular

Este módulo funciona con Angular 2.0 y superior.