web-dev-qa-db-ja.com

パイプを使用して日付をdd/MM/yyyyとしてフォーマットする

私は日付をフォーマットするためにdateパイプを使用していますが、回避策がなければ欲しい正確なフォーマットを得ることはできません。私はパイプを間違って理解しているのか、それとも不可能なのか？

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <h3>{{date | date: 'ddMMyyyy'}}, should be 
      {{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3>

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
    this.date = new Date();
  }
}

plnkrビュー

dateangularangular-pipedate-pipe
185
Jp_

Angular 2.0.0-rc.2で修正されたパイプ日付フォーマットのバグ このプルリクエスト 。

今度は私達は慣習的な方法をすることができる：

{{valueDate | date: 'dd/MM/yyyy'}}

例：

現在のバージョン：

Example Angular 7.x.x

旧バージョン：

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

ドキュメントDatePipeの詳細情報

332
Fernando Leal

Angular/CommonからDatePipeをインポートしてから、次のコードを使用します。

var datePipe = new DatePipe();
    this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');

userdate はあなたの日付文字列になります。これが助けになるかどうかを確認してください。

日付と年の小文字をメモします。

d- date
M- month
y-year

_編集_

最新の角度で、DatePipeの引数としてlocale文字列を渡す必要があります。角度4.xでテストしました

例えば：

var datePipe = new DatePipe('en-US');
72
Prashanth

これは単純なカスタムパイプを使って実現できます。

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

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'dd/MM/yyyy');
        return value;
    }
}


{{currentDate | dateFormatPipe }}

カスタムパイプを使用する利点は、将来日付フォーマットを更新したい場合、カスタムパイプを更新することができ、それがあらゆる場所に反映されることです。

カスタムパイプの例

17
Prashobh

何らかの理由で日付を使用する必要がある場合は、常にMoment.jsを使用します。

これを試して：

import { Pipe, PipeTransform } from '@angular/core'
import * as moment from 'moment'

@Pipe({
   name: 'formatDate'
})
export class DatePipe implements PipeTransform {
   transform(date: any, args?: any): any {
     let d = new Date(date)
     return moment(d).format('DD/MM/YYYY')

   }
}

そしてビューで：

<p>{{ date | formatDate }}</p>
13
Oriana Ruiz

私はこの一時的な解決策を使っています：

import {Pipe, PipeTransform} from "angular2/core";
import {DateFormatter} from 'angular2/src/facade/intl';

@Pipe({
    name: 'dateFormat'
})
export class DateFormat implements PipeTransform {
    transform(value: any, args: string[]): any {
        if (value) {
            var date = value instanceof Date ? value : new Date(value);
            return DateFormatter.format(date, 'pt', 'dd/MM/yyyy');
        }
    }
}
11
Deepak

MacOSおよびiOS上のSafariブラウザ用TypeScriptを使用するAngular 2では、日付パイプは正しく動作しません。私は最近この問題に直面しました。私は問題を解決するためにここでモーメントjsを使わなければなりませんでした。手短に言えば….

  1. プロジェクトにmomentjs npmパッケージを追加します。

  2. Xyz.component.htmlの下で、（ここでstartDateTimeはデータ型ストリングであることに注意してください）

{{ convertDateToString(objectName.startDateTime) }}

  1. Xyz.component.tsの下で、

import * as moment from 'moment';

convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}
4
Nikhil

私のために働いた唯一の事はここからインスピレーションを得ました： https://stackoverflow.com/a/35527407/2310544

純粋なdd/MM/yyyyの場合、これは角度2ベータ16で私のために働きました：

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}
4
Johan Chouquet

ロケールがDatePipeにハードコードされているからだと思います。このリンクを見なさい：

そして現時点では設定によってこのロケールを更新する方法はありません。

4
Thierry Templier

時間と時間帯で見ている人なら、これはあなたのためです。

 {{data.ct | date :'dd-MMM-yy h:mm:ss a '}}

日付と時刻の形式の最後にタイムゾーンにzを追加

 {{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}
3
ULLAS K

誰もが時間付きの日付をAMで、またはPMを角度6で表示することを検討できれば、これはあなたのためです。

{{date | date: 'dd/MM/yyyy hh:mm a'}}

出力

enter image description here

定義済みフォーマットオプション

例はen-USロケールで与えられています。

'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
'shortDate': equivalent to 'M/d/yy' (6/15/15).
'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
'shortTime': equivalent to 'h:mm a' (9:03 AM).
'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

リファレンスリンク

2
Ahmer Ali Ahsan

このようなことにもmomentjを使うことができます。 Momentjs は、JavaScriptでの日付の解析、検証、操作、および表示に最適です。

私はUrishからこのパイプを使用しました。

https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts

Argsパラメータでは、 "dd/mm/yyyy"のようにあなたの日付フォーマットを置くことができます。

2
Doek

フォーマットなど、日付パイプについての詳細情報は ここ にあります。

あなたがあなたのコンポーネントの中でそれを使いたいならば、あなたは単にすることができます

pipe = new DatePipe('en-US'); // Use your own locale

さて、あなたは単純にそのtransformメソッドを使うことができます。

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');
1
Yushin