Невозможно правильно отобразить дату и время в iOS/Safari с помощью ionic2/angular2

Привет, я сталкиваюсь с странной проблемой здесь, получая динамические данные в том, что im также получает дату и время, а im отображает его в html, используя протокол даты в chrome/android, он работает хорошо, но когда я проверяю ios/Safari, он показывает разница во времени

ниже приведены мои json-данные, потребляющие

FromCurrentDate: "2018-01-05T00:00:00"

FromPreviousDate: "2018-01-04T00:00:00"


ToCurrentDate: "2018-01-05T14:00:53.137"

ToPreviousDate: "2018-01-04T14:00:53.137"

im, отображающий дату, подобную этой и в chrome/android он отображается следующим образом

в Ios/safari отображается так: в шаблоне im, используя код ниже

Currrent {{singleTable[0].FromCurrentDate|date: 'dd/MM/yyyy,h:mm:ss a'}} to {{singleTable[0].ToCurrentDate|date: 'dd/MM/yyyy,h:mm:ss a'}}

как я могу решить эту проблему с разницей времени?

ОТВЕТЫ

Ответ 1

В ios/mac фильтр даты не работает, поэтому используйте для этого moment.js.

Я перепробовал много вещей, но я смог сделать лучше всего в moment.js

как: я создал pipeу

<span>{{ActionDate | dateTimeFormatFilter : "MMM DD, YYYY"}}</span>

@Pipe({name: "dateTimeFormatFilter"})
@Injectable()
export class DateTimeFormatPipe implements PipeTransform {
transform(date: any, format: string): any {
        if (date) {
         return moment(date).format(format);
        }
    }
}

Ответ 2

Проблема, с которой вы сталкиваетесь, вызвана API Intl, потому что DatePipe для Angular 2 Release работает нормально только для FireFox и Chrome со строками нестандартного формата. он не работает в Safari из-за отсутствия Intl. так что временный обходной путь заключается в том, чтобы включить Intl polyfill

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Решение 2 Вы можете использовать moment.js, который может отформатировать необходимую дату следующим образом:

moment(singleTable[0].FromCurrentDate).format("dd/MM/yyyy,h:mm:ss a")

Обновление 1

В последних версиях angular они удалили API-интерфейс Intl, и для этого вам необходимо обновить версию 5, ,

Обновление 2 Вот плункер, использующий MomentJs в угловом формате, я добавил ваш формат даты, но не тестировал в сафари, протестированном в Chrome,

Ответ 3

Я столкнулся с той же проблемой на сафари на рабочем столе и сафари/хром на iPhone. Он работает в сафари или в большинстве браузеров, когда в качестве значения используется объект даты. (DatePipe)

Я решил ту же проблему, добавив пользовательский канал для преобразования строки даты и времени в объект даты, а затем канал данных работает, как и ожидалось.

Компонент

someDate1 = "2019-09-01 12:02:14";
someDate2 = "2019-09-01";
someDate3 = "2019-09-01 00:00:00";

Шаблон

{{ someDate1 | toDateObj | date:'MM-dd-yyyy h:mm a' }}

Вот пользовательский канал toDateObj, который я добавил.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'toDateObj'
})

export class ToDateObjPipe implements PipeTransform {

    transform(value: any): any {
        if (value) {
            if (value.toString().indexOf(' ') === -1) {
                value = value + ' 00:00:00';
            }
            const temp = value.toString().replace(' ', 'T');
            return new Date(temp);
        } else {
            return null;
        }
    }

}

Ответ 4

Для меня это работает в Safari и Chrome:

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'customDate'
})

export class DatePipe implements PipeTransform {
  transform(value: string): string {

      let dd = value.substr(8, 2);
      let MM = value.substr(5, 2);
      let yyyy = value.substr(0, 4);
      let date = '${dd}.${MM}.${yyyy}';

      return '${date}';
  }
}

У меня была ошибка рендеринга просмотров в Safari, когда Chrome был в порядке. Позже после отладки я обнаружил, что pipe | дата была проблемой. Поэтому я сделал заказной. Все ответы хороши, но импортируемая библиотека моментов кажется большим файлом IMHO. Просто сделайте экспорт этого класса, сделайте модуль и объявите его там (также экспортируйте его) и используйте в качестве примера: {{_question.created_at | toDateObj: 'dd.MM.yyyy'}}

Надеюсь, это поможет кому-то