Di AngularJS, saya dapat menggunakan filter (pipa) di dalam layanan dan pengontrol menggunakan sintaksis yang mirip dengan ini:

$filter('date')(myDate, 'yyyy-MM-dd');

Apakah mungkin menggunakan pipa dalam layanan / komponen seperti ini di Angular?

Seperti biasa di Angular, Anda dapat mengandalkan injeksi ketergantungan:

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

class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

Tambahkan DatePipeke daftar penyedia Anda di modul Anda; jika Anda lupa melakukan ini, Anda akan mendapatkan kesalahan no provider for DatePipe:

providers: [DatePipe,...]

Perbarui Angular 6 : Angular 6 sekarang menawarkan hampir semua fungsi pemformatan yang digunakan oleh pipa secara publik. Misalnya, Anda sekarang dapat menggunakan formatDatefungsi secara langsung.

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

class MyService {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}

Sebelum Angular 5 : Berhati-hatilah karena DatePipeia mengandalkan API Intl hingga versi 5, yang tidak didukung oleh semua browser (periksa tabel kompatibilitasnya ).

Jika Anda menggunakan versi Angular yang lebih lama, Anda harus menambahkan Intlpolyfill ke proyek Anda untuk menghindari masalah. Lihat pertanyaan terkait ini untuk jawaban yang lebih terperinci.

Jawaban ini sekarang sudah usang

merekomendasikan menggunakan pendekatan DI dari jawaban lain alih-alih pendekatan ini

Jawaban asli:

Anda harus dapat menggunakan kelas secara langsung

new DatePipe().transform(myDate, 'yyyy-MM-dd');

Misalnya

var raw = new Date(2015, 1, 12);
var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');
expect(formatted).toEqual('2015-02-12');

Ya, itu mungkin dengan menggunakan pipa kustom sederhana. Keuntungan menggunakan pipa kustom adalah jika kita perlu memperbarui format tanggal di masa depan, kita dapat pergi dan memperbarui satu file.

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, 'MMM-dd-yyyy');
        return value;
    }
}

{{currentDate | dateFormatPipe }}

Anda selalu dapat menggunakan pipa ini di mana saja, komponen, layanan dll

Sebagai contoh

export class AppComponent {
  currentDate : any;
  newDate : any;
  constructor(){
    this.currentDate = new Date().getTime();
    let dateFormatPipeFilter = new dateFormatPipe();
    this.newDate = dateFormatPipeFilter.transform(this.currentDate);
    console.log(this.newDate);
}

Jangan lupa untuk mengimpor dependensi.

import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'

Contoh Pipa Kustom dan info lainnya

Jawaban lain tidak bekerja di sudut 5?

Saya mendapat kesalahan karena DatePipe bukan penyedia, jadi tidak bisa disuntikkan. Salah satu solusinya adalah dengan menempatkannya sebagai penyedia dalam modul aplikasi Anda, tetapi solusi pilihan saya adalah dengan instantiate.

Instantiate itu di mana diperlukan:

Saya melihat kode sumber DatePipe untuk melihat bagaimana ia mendapatkan lokal: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Saya ingin menggunakannya di dalam pipa, jadi contoh saya adalah di dalam pipa lain:

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

@Pipe({
    name: 'when',
})
export class WhenPipe implements PipeTransform {
    static today = new Date((new Date).toDateString().split(' ').slice(1).join(' '));
    datePipe: DatePipe;

    constructor(@Inject(LOCALE_ID) private locale: string) {
        this.datePipe = new DatePipe(locale);
    }
    transform(value: string | Date): string {
        if (typeof(value) === 'string')
            value = new Date(value);

        return this.datePipe.transform(value, value < WhenPipe.today ? 'MMM d': 'shortTime')
    }
}

Kuncinya di sini adalah mengimpor Suntikan, dan LOCALE_ID dari inti sudut, dan kemudian menyuntikkannya sehingga Anda dapat memberikannya ke DatePipe untuk membuat instantiate dengan benar.

Jadikan DatePipe sebagai penyedia

Di modul aplikasi Anda, Anda juga bisa menambahkan DatePipe ke array penyedia Anda seperti ini:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Sekarang Anda bisa menyuntikkannya ke konstruktor di mana diperlukan (seperti dalam jawaban cexbrayat).

Ringkasan:

Salah satu solusi yang berhasil, saya tidak tahu yang mana sudut akan dianggap paling "benar" tetapi saya memilih untuk instantiate secara manual karena sudut tidak menyediakan datepipe sebagai penyedia itu sendiri.

Jika Anda tidak ingin melakukan 'myPipe baru ()' karena Anda menyuntikkan dependensi ke pipa, Anda dapat menyuntikkan komponen seperti penyedia dan digunakan tanpa yang baru.

Contoh:

// In your component...

import { Component, OnInit } from '@angular/core';
import { myPipe} from './pipes';

@Component({
  selector: 'my-component',
  template: '{{ data }}',
  providers: [ myPipe ]
})
export class MyComponent() implements OnInit {
  data = 'some data';
  constructor(private myPipe: myPipe) {}

  ngOnInit() {
    this.data = this.myPipe.transform(this.data);
  }
}

Jika Anda ingin menggunakan pipa kustom di komponen Anda, Anda dapat menambahkan

@Injectable({
  providedIn: 'root'
})

penjelasan untuk pipa kustom Anda. Kemudian, Anda dapat menggunakannya sebagai layanan

Pada Angular 6 Anda dapat mengimpor formatDatedari @angular/commonutilitas untuk digunakan di dalam komponen.

Itu diterobos di https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

Saya dapat digunakan sebagai:

import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');

Meskipun lokal harus disediakan

Anda dapat menggunakan formatDate () untuk memformat tanggal di layanan atau komponen ts. sintaksis:-

formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string

impor formatDate () dari modul umum seperti ini,

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

dan gunakan saja di kelas seperti ini,

formatDate(new Date(), 'MMMM dd yyyy', 'en');

Anda juga dapat menggunakan opsi format yang disediakan oleh sudut seperti ini,

formatDate(new Date(), 'shortDate', 'en');

Anda dapat melihat semua opsi format yang telah ditentukan di sini,

https://angular.io/api/common/DatePipe