web-dev-qa-db-ja.com

IE 11およびEdge 13/14でAngular2日付パイプが機能しない

Angular 2.0 finalを使用していますが、形式文字列に時間と分を追加すると、日付の形式が正しくありません。

コンポーネントのテンプレートには、次のものがあります。

<th id="lastexecution">{{dto.LastExecution | date:'yyyy-MM-dd HH:mm:ss'}}</th>

IE 11の出力日付は次のとおりです。

2016-09-27 15:00:9/27/2016 3:53:46 PM:9/27/2016 3:53:46 PM

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

IE 11の出力日付は正しいです：

2016-09-27

Package.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": {}
}
datetimeangularformatpipeinternet-explorer-11
42
Anthony Brenelière

更新- この問題を引き起こす角度の問題 はAngular 5.で解決されます。可能であれば、この問題を回避するためにそれを使用することをお勧めします。

まだAngular 4以前を使用している場合-回避策として、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'}}

渡す日付は、モーメントが解析できるものである必要があり（ 関連するモーメントのドキュメント を参照）、フォーマット文字列は ここに記載されている =。

IE11、ChromeおよびFirefoxでこれをテストしましたが、一貫して動作します。

依存関係としてpackage.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' } 
}
62
Mark Hughes

Angular2 DatePipe APIドキュメントから。

「このパイプは国際化APIを使用しています。したがって、ChromeおよびOperaブラウザーでのみ信頼性があります。

15
Omri L

24時間ではなくAM/PMを表示しても問題ない場合、別の有効な回避策は、書式設定を2つに分割し、shortTimeまたはmediumTimeを使用して時間部分を表示することです。

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

これは、IEおよびEdgeを含むすべての主要なブラウザーで動作するはずです。

10
Andrew Mairose

上記の@ mark-hughesからの回答に関して、APIドキュメントの瞬間から：

date_expression | date [：format]

式は、日付オブジェクトまたは数値（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; 
    }
}
5
Seven

Angular 5.xで作業する

Angularのバージョン5.xでは、この問題は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の操作全体を含む回答。

2
Fernando Leal

以下のソリューションは、IE11およびchromeで正常に機能します。カスタムパイプを作成する必要はありません。

 {{dto.createdTimeLocal | date： 'dd MMM yyyy'}} {{dto.createdTimeLocal | date： 'shortTime'}}
2
Muni Chittem

この{{date:dd/MM/yyyy hh:mm:ss a}}のような形式を記述する必要はありません。
IE11またはEdgeは、この形式でのみ問題が発生します。

いくつかの選択肢があります：

例1：新しい日付と時刻：

var date = new Date().toLocaleDateString();
var time = new Date().toLocaleTimeString();

var datetime = date + " " + time;

例2：既にdatetimeがあり、変換したい場合。下記参照：

datetime = "3/23/2018 11:43:51 AM"

日付と時刻を分割できます。

var date = new Date(datetime).toLocaleDateString();
var time = new Date(datetime).toLocaleTimeString();

var splitdatetime = date + " " + time;

これはAngular4です。すべてのブラウザで正常に動作します。

0
Harish Gilaka

Angular用moment.jsパイプ

マークスの回答は素晴らしいものであり、よく文書化されているこの簡単なソリューションを見つけるまで、私が使用していたものでした。

Angular用moment.jsパイプ

このモジュールは、Angular 2.0以降で動作します。

0
JCPhlux