datetime - La tubería de fecha Angular2 no funciona en IE 11 y edge 13/14
format pipe (8)
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'' }
}
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": {}
}
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.
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
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;
}
}
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''}}
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.
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.
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.
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.
Este módulo funciona con Angular 2.0 y superior.