Как я могу решить проблему с часовым поясом с помощью трубки даты Angular 4?

У меня есть значение даты в каждом из моих объектов, которое я могу напечатать следующим образом:

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

И вот как это выглядит:

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

Чтобы изменить формат, чтобы сделать его более читаемым, я использую протокол даты Angular:

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

С помощью этого результата:

30/05/1931

Как вы можете видеть, он отображает предыдущий день (30 мая, а не 31 мая).

Насколько я понимаю, проблема связана с часовым поясом, так как я в Аргентине, и у нас есть GMT-3, тогда 00:00 31-го минута 3 часа будет 30 мая в 9 вечера.

Итак, как я могу заставить это взять время буквально, а не обрабатывать его на основе часового пояса, но все равно применить формат в трубе?

Ответы

Ответ 1

За кулисами DatePipe использует локаль для отображения даты в часовом поясе пользователя. Попробуйте использовать клиент данные часового пояса:

1931-05-31T00:00:00.000-0300 вместо 1931-05-31T00:00:00.000+0000.

Вы можете получить смещение клиента за считанные минуты, используя (new Date()).getTimezoneOffset()

На самом деле это известная проблема/ограничение DatePipe. Сообщество знает об этом. В будущем вы сможете указать часовой пояс в качестве одного из параметров ({{ value | date:format:zone }}).

Вот проблема на GitHub: https://github.com/angular/angular/issues/9324

Для более сложных манипуляций с датами я рекомендую moment.js (меньше головной боли, лучшая согласованность, меньше тестирование, более простое обслуживание).

РЕДАКТИРОВАТЬ: было добавлено:

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

Код: https://github.com/angular/angular/blob/5.0.4/packages/common/src/pipes/date_pipe.ts#L137 Docs: https://angular.io/api/common/DatePipe

Ответ 2

для angular 5 и выше, вы можете попытаться добавить часовой пояс в pipeе,

По умолчанию он принимает локальный часовой пояс пользовательского компьютера.

и вы можете указать его в минутах, например, для GMT-2, часовой пояс: '-120'

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

Ответ 3

Вы можете легко достичь этого, если используете angular 4.0 и выше

  <p>Or if you prefer, {{today | date:'dd/MM/yyyy'}}</p>

В пакете @angular/common есть DatePipe

LIVE DEMO

Ответ 4

Я тоже столкнулся с той же проблемой. перед сохранением данных преобразуйте формат даты в тот, который используется в сервисе. Например, в моем случае в Java это было "ГГГГ-ММ-ДД". Поэтому перед сохранением всех данных под углом: где дата рождения привязана к полю вашего шаблона или просто отображается.

this.birthdate = this.datePipe.transform(birthDate, 'yyyy-MM-dd'); где дата рождения - это не объект даты, а строковая дата.

Теперь, когда вам нужно показать дату использования пользовательского интерфейса:

                let dd = (new Date(data.birthDate)).getUTCDate().toString();

                let mm = ((new Date(data.birthDate)).getMonth()).toString();
                let yy = (new Date(data.birthDate)).getFullYear().toString();

                this.birthDate = new Date(Number(yy), Number(mm), Number(dd));