dateTarihimi biçimlendirmek için boruyu kullanıyorum , ancak geçici bir çözüm olmadan istediğim biçimi tam olarak alamıyorum. Boruları yanlış mı anlıyorum yoksa mümkün değil mi?

//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 görünümü

Boru tarihi biçimi hatası Açısal 2.0.0-rc.2'de düzeltildi, bu Çekme İsteği .

Şimdi geleneksel yolu yapabiliriz:

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

Örnekler:

Şimdiki versiyonu:

Example Angular 8.x.x

Eski versiyonlar:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

Dokümanlarda daha fazla bilgi DatePipe

DatePipe'ı açısal / ortaktan içe aktarın ve ardından aşağıdaki kodu kullanın:

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

burada kullanıcı tarihi sizin tarih dizeniz olacaktır. Bunun yardımcı olup olmadığını görün.

Tarih ve yıl için küçük harfleri not edin:

d- date
M- month
y-year

DÜZENLE

Sen geçmek zorunda localeson açısal içinde DatePipe bir argüman olarak dize. Açısal 4.x'te test yaptım

Örneğin:

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

Bunu basit bir özel boru ile yapabilirsiniz.

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 }}

Özel bir pipo kullanmanın avantajı, gelecekte tarih biçimini güncellemek istiyorsanız, özel piponuzu gidip güncelleyebileceğiniz ve her yeri yansıtacağıdır.

Özel Boru örnekleri

Herhangi bir nedenle tarihleri ​​kullanmam gerektiğinde her zaman Moment.js kullanıyorum.

Bunu dene:

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')

   }
}

Ve bakış açısından:

<p>{{ date | formatDate }}</p>

Bu Geçici Çözümü kullanıyorum:

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');
        }
    }
}

Eğer zaman ve saat dilimi arayan biri varsa, bu tam size göre

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

tarih ve saat biçiminin sonunda saat dilimi için z ekle

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

Açısal: 8.2.11

<td>{{ data.DateofBirth | date }}</td>

Çıktı: 9 Haz 1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy' }}</td>

Çıktı: 09/06/1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy hh:mm a' }}</td>

Çıktı: 09/06/1973 00:00

Benim için işe yarayan tek şey buradan ilham aldı: https://stackoverflow.com/a/35527407/2310544

Saf gg / aa / yyyy için, bu benim için çalıştı, açısal 2 beta 16 ile:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}

Eğer herkes açısal 6'da tarihi AM veya PM olarak tarihle görüntüleyebilirse, bu tam size göre.

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

Çıktı

Önceden tanımlanmış format seçenekleri

Örnekler en-US yerel ayarında verilmiştir.

'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).

Referans Bağlantısı

Ben yerel çünkü içine kodlanmış olduğunu düşünüyorum DatePipe. Bu bağlantıya bakın:

• https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/date_pipe.ts

Ve bu yerel ayarı şu anda yapılandırmayla güncellemenin bir yolu yok.

Tarih boruları, MacOS ve iOS'ta Safari tarayıcı için Typescript ile Açısal 2'de düzgün davranmaz. Son zamanlarda bu sorunla karşılaştım. Burada sorunu çözmek için an js kullanmak zorunda kaldı. Kısaca yaptığımdan bahsetmişken ...

1. Projenize momentjs npm paketini ekleyin.

2. Xyz.component.html altında (Burada startDateTime öğesinin veri türü dizesi olduğunu unutmayın)

{{ convertDateToString(objectName.startDateTime) }}

3. Xyz.component.ts altında,

import * as moment from 'moment';

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

Tarih borusu hakkında formatlar gibi daha fazla bilgiyi burada bulabilirsiniz .

Bileşeninizde kullanmak istiyorsanız,

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

Şimdi, sadece dönüştürme yöntemini kullanabilirsiniz.

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

Yerel ayar dizesini bağımsız değişken olarak DatePipe öğesine iletmeniz gerekir.

var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

Önceden tanımlanmış format seçenekleri:

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

app.component.module.ts içine datepipe ekle

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DatePipe} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    DatePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ayrıca momentjs'i bu tür şeyler için de kullanabilirsiniz. Momentjs , JavaScript'te tarihleri ​​ayrıştırmak, doğrulamak, değiştirmek ve görüntülemek için en iyisidir.

Bu boruyu benim için iyi çalışan Urish'ten kullandım:

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

Args parametresinde tarih biçiminizi şu şekilde koyabilirsiniz: "gg / aa / yyyy"

Benim durumumda, bileşen dosyasında kullanıyorum:

import {formatDate} from '@angular/common';

// Use your preferred locale
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';

// ....

displayDate: string;
registerLocaleData(localeFr, 'fr');
this.displayDate = formatDate(new Date(), 'EEEE d MMMM yyyy', 'fr');

Ve bileşen HTML dosyasında

<h1> {{ displayDate }} </h1>

Benim için iyi çalışıyor ;-)