change - ¿Cómo puedo lidiar con el problema de la zona horaria con el canal de fecha de Angular 4?

title angular

Question

Tengo un valor de fecha en cada uno de mis objetos que puedo imprimir de esta manera:

<td> {{competition.compStart }}</td>

Y aquí está cómo se ve:

1931-05-31T00:00:00.000+0000

Para cambiar el formato y hacerlo más legible, estoy usando el canal de fecha Angular:

<td> {{competition.compStart | date : "dd/MM/yyyy"}}</td>

Con este resultado:

30/05/1931

Como puede ver, se muestra el día anterior (30 de mayo en lugar del 31 de mayo).

Por lo que entiendo, el problema está relacionado con la zona horaria, ya que estoy en Argentina y tenemos GMT-3, entonces 00:00 de las 31 horas menos 3 serían el 30 de mayo a las 9 PM.

Entonces, ¿cómo puedo hacer que se tome el tiempo literalmente y no lo procese en función de la zona horaria, pero aún así aplique el formato en la tubería?

Answer 1

Detrás de las escenas, DatePipe utiliza la configuración regional para mostrar la fecha en la zona horaria del usuario. Pruebe con los datos de la zona horaria del cliente :

1931-05-31T00:00:00.000-0300 lugar de 1931-05-31T00:00:00.000+0000 .

Puede obtener la compensación del cliente en minutos utilizando (new Date()).getTimezoneOffset()

Este es en realidad el problema / limitación conocido de DatePipe . La comunidad es consciente de ello. En el futuro, podrá especificar la zona horaria como uno de los parámetros ( {{ value | date:format:zone }} ).

Aquí está el problema en github: github.com/angular/angular/issues/9324

Para manipulaciones de fecha más avanzadas, recomiendo moment.js (menos dolores de cabeza, mejor consistencia, menos pruebas, mantenimiento más sencillo).

EDITAR : Se ha añadido:

date_expression | date[:format[:timezone[:locale]]]

Código: https://github.com/angular/angular/blob/5.0.4/packages/common/src/pipes/date_pipe.ts#L137 Docs: https://angular.io/api/common/DatePipe

Answer 2

para el ángulo 5 y superiores, puede intentar agregar una zona horaria en la tubería,

Por defecto toma la zona horaria local de la máquina del usuario.

y puede especificarlo en minutos, por ejemplo, para GMT-2, zona horaria: ''-120''

{{ competition.compStart | date: ''short'' : ''-120''}}