Angular2 tubo de fecha no funciona en IE 11 y borde 13/14
Estoy usando Angular 2.0 final, y tengo un formato incorrecto de fechas 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.Última ejecución / fecha: "aaaa-MM-dd"}}
La fecha de salida en IE 11 es correcta:
2016-09-27
Aquí está la versión de 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": {}
}
8 answers
ACTUALIZAR - El problema Angular que causa este problema se resuelve en Angular 5. Si puedes, te recomendaría usar eso para evitar este problema.
Si todavía está usando Angular 4 o más, como solución alternativa, creé una tubería para usar el formateador de momentos en lugar del incorporado en Angular:
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 luego se puede usar:
{{exampleDate | datex:'DD/MM/YYYY HH:mm:ss'}}
La fecha que pase debe ser algo que el momento pueda analizar (ver la documentación relevante del momento ) y el la cadena de formato es una cadena de formato de fecha de momento, no angular, como documenta aquí.
He probado esto en IE11, Chrome y Firefox y se comporta de manera consistente.
Tendrá que asegurarse de que el momento se agrega a su paquete.json como 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 se actualiza para que pueda localizar moment:
map: {
'moment': 'npm:moment'
}
packages: {
moment: { main: './moment.js', defaultExtension: 'js' }
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-14 14:41:26
De la Documentación de la API de Angular2 DatePipe.
"esta tubería utiliza la API de internacionalización. Por lo tanto, solo es confiable en los navegadores Chrome y Opera.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-27 18:48:15
Si está de acuerdo con mostrar AM / PM en lugar de tiempo de 24 horas, otra solución válida es dividir el formato en dos y usar shortTime o mediumTime para mostrar la parte de tiempo:
{{dto.LastExecution | date:'yyyy-MM-dd'}} {{dto.LastExecution | date:'shortTime'}}
Esto debería funcionar en todos los navegadores principales, incluidos IE y Edge.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-24 19:56:05
Con respecto a la respuesta de @mark-hughes anterior, desde el momento de la documentación de la API:
Date_expression / date [: format]
La expresión es un objeto date o un número (milisegundos desde la época UTC) o una cadena ISO
Por lo tanto, 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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-25 14:39:46
Trabajar en Angular 5.x
En la versión 5.x del Angular este problema está funcionando correctamente en Edge (v.38.14393.1066.0) y en IE (v.11.1198. 14393. 0), prueba en tu versión!
Ejemplo en vivo: Émbolo Angular 5.x
Cuestión relacionada que resolvió el problema (si encuentro algo inconsistente): https://github.com/angular/angular/issues/9524
Respuesta que implica la operación completa del DatePipe Angular.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-11 11:40:03
La siguiente solución funciona bien para IE11 y chrome. No hay necesidad de crear tuberías personalizadas.
{{dto.createdTimeLocal | date:'dd MMM yyyy'}} {{dto.createdTimeLocal | date:'shortTime'}}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-29 13:59:29
Momento.tubos js para Angular
Marks la respuesta es genial 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-03 03:28:20
No es necesario escribir un formato como este {{date:dd/MM/yyyy hh:mm:ss a}}.
IE11 o EDGE obtener problema con este formato solamente.
Aquí hay algunas alternativas:
Ex 1: nueva fecha y hora:
var date = new Date().toLocaleDateString();
var time = new Date().toLocaleTimeString();
var datetime = date + " " + time;
Ex 2: Ya tienes un datetime y quieres convertir. ver 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-23 06:50:32