Angular2 дата-дата не работает в IE 11 и краю 13/14

Ответ 1

Это открытая проблема для Angular для этой проблемы - в качестве обходного пути я создал канал для использования форматирования момента вместо встроенный 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);
    }
}

Что можно использовать:

{{exampleDate | datex:'DD/MM/YYYY HH:mm:ss'}}

Дата, в которую вы проходите, должна быть чем-то, что может проанализировать момент (см. соответствующую документацию по времени), а строка формата - момент, а не angular, строка форматирования даты, описанная здесь.

Я тестировал это в IE11, Chrome и Firefox, и он ведет себя последовательно.

Вам нужно будет убедиться, что момент добавлен в ваш пакет .json как зависимость, например:

{
  "name": "demo",
  "version": "0.0.1",
  // snip
  "dependencies": {
    // snip
    "moment": "^2.15.1",
    // snip
  },
  "devDependencies": {
    //snip
  }
}

... и убедитесь, что ваш файл systemjs.config.js обновлен, чтобы он мог найти момент:

map: { 
  'moment': 'npm:moment' 
} 
packages: { 
  moment: { main: './moment.js', defaultExtension: 'js' } 
}

Ответ 2

Из Angular2 Документация API DatePipe.

"эта труба использует API интернационализации, поэтому она надежна только в браузерах Chrome и Opera.

Ответ 3

Относительно ответа от @mark-hughes выше, с момента получения документации по API:

date_expression | Дата [: формат]

выражение - это объект даты или число (миллисекунды с эпохи UTC) или строку ISO

Ссылка

Таким образом, значение должно быть любым типом, и вы можете использовать moment().isValid() для проверки типа значения

@Pipe({name: 'datex'})
export class DatexPipe implements PipeTransform {
    transform(value: any, format: string = ""): string {
       return moment(value).isValid()? moment(value).format(format) : value; 
    }
}

Ответ 4

Если вы работаете с показом AM/PM вместо 24-часового времени, другое допустимое обходное решение - это разбить форматирование на две части и использовать shortTime или mediumTime для отображения временной части:

{{dto.LastExecution | date:'yyyy-MM-dd'}} {{dto.LastExecution | date:'shortTime'}}

Это должно работать во всех основных браузерах, включая IE и Edge.

Ответ 5

Работа в Angular 5.x

В версии 5.x Angular эта проблема корректно работает в Edge (v.38.14393.1066.0) и в IE (v.11.1198.14393.0), протестируйте в своей версии!

Пример в реальном времени: Plunker Angular 5.x

Связанная проблема, которая решила проблему (если я нашел что-то непоследовательное): https://github.com/angular/angular/issues/9524

Ответ, который включает всю операцию Angular DatePipe.

Ответ 6

Нижеприведенное решение отлично работает для IE11 и хром. Нет необходимости создавать пользовательские каналы.

 {{dto.createdTimeLocal | date:'dd MMM yyyy'}} {{dto.createdTimeLocal | date:'shortTime'}}

Ответ 7

moment.js для Angular

Ответ на отличный ответ - это то, что я использовал, пока не нашел это простое решение, которое хорошо документировано.

moment.js для Angular

Этот модуль работает с Angular 2.0 и выше.