Format Tanggal Angular: Cara Menggunakan Datepipe Angular – Codewithaden

Untuk memformat tanggal dalam sudut, gunakan DatePipe.

DatePipe sudut

Angular DatePipe adalah fungsionalitas bawaan yang memformat nilai tanggal sesuai dengan aturan lokal. Misalnya, menggunakan DatePipe, Anda dapat mengonversi objek tanggal, angka (milidetik dari UTC), atau string tanggal ISO sesuai dengan format tanggal sudut sudut yang telah ditentukan atau format tanggal sudut kustom.

DatePipe diperkenalkan dalam modul @angular/standar. Pipes dalam sudut dapat digunakan untuk memformat data seperti mata uang , Percents , tanggal, dan lebih banyak lagi. Mereka dimaksudkan untuk digunakan dalam templat HTML seperti component.html mengajukan.

DatePipe Angular menerima tiga parameter.

  1. Format
  2. Zona waktu
  3. Lokal
{{ date_Value | date [ : format [ : timezone [ : locale ] ] ] }}
 
ParameterKeterangan
format Anda dapat melewati format tanggal sudut yang telah ditentukan atau format tanggal khusus kami sebagai parameter.

Nilai defaultnya adalah ‘ menengah ‘ (Parameter opsional).

zona waktu Zona waktu default adalah zona waktu sistem lokal dari mesin pengguna.

Untuk mengubah zona waktu dalam Angular, lewati Offset zona waktu (‘ 0530 ′ ) atau UTC/GMT standar ( Ist ) atau singkatan dari Continental US TimeZone, dan itu adalah parameter opsional.

lokal Ini mewakili aturan format lokal untuk digunakan.

Jika diatur atau tidak ditentukan, nilai default adalah lokasi proyek kami ( en_us ). Parameter opsional.

Hanya en-us Data lokal keluar dari kotak dengan sudut. Untuk melokalisasi tanggal dalam bahasa lain, Anda harus mengimpor data lokal yang relevan. Lihat Panduan i18n untuk informasi lebih lanjut.

Catatan : Hasil pipa ini tidak dievaluasi kembali ketika input bermutasi. Untuk menghindari kebutuhan untuk memformat ulang tanggal pada setiap siklus deteksi perubahan, perlakukan tanggal sebagai objek yang tidak dapat diubah, dan ubah referensi ketika pipa perlu dijalankan lagi.

Berikut adalah contoh sederhana di mana saya memformat tanggal.

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  now = new Date();
}
 

Sekarang, tulis kode berikut di dalam app.component.html mengajukan.

{{now | date}}

Kode di atas akan berlaku tanggal pipa ke tanggal input dalam kasus kami sekarang .

Angular akan menggunakan format tanggal default untuk mengembalikan tanggal yang diformat dalam contoh spesifik itu.

Keluaran

Jul 15, 2020 

Untuk menampilkan hanya 4 digit tahun dalam tanggal, gunakan yang berikut.


{{now | date:'yyyy'}}

Keluaran

2020 

Anda juga dapat menampilkan tanggal mentah di sudut, seperti yang berikut ini.

{{now}}

Keluaran

Wed Jul 15 2020 17:45:35 GMT+0530 (India Standard Time) 

Sekarang, mari kita tambahkan beberapa nilai datetime saat ini dalam format yang berbeda seperti milidetik, objek tanggal, string datetime, string datetime iso di Angular.

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todaysNumber: number = Date.now();
  todaysDate: Date = new Date();
  todayString: string = new Date().toDateString();
  todayISOString: string = new Date().toISOString();
}
 

Dalam file html komponen aplikasi, saya menampilkannya menggunakan datePipe sudut.


DateTime as Milliseconds : {{todaysNumber}}

DatePipe:{{todaysNumber | date}}

DateTime as Object : {{todaysDate}}

DatePipe:{{todaysDate | date}}

DateTime as String : {{todayString}}

DatePipe:{{todayString | date}}

DateTime as ISO string : {{todayISOString}}

DatePipe:{{todayISOString | date}}

Keluaran

DateTime as Milliseconds : 1594815694582

DatePipe:Jul 15, 2020

DateTime as Object : Wed Jul 15 2020 17:51:34 GMT+0530 (India Standard Time)

DatePipe:Jul 15, 2020

DateTime as String : Wed Jul 15 2020

DatePipe:Jul 15, 2020

DateTime as ISO string : 2020-07-15T12:21:34.582Z

DatePipe:Jul 15, 2020 

Kami telah mengambil datetime sebagai objek, datetime sebagai string, datetime sebagai string ISO, dan ketika kami menggunakan datePipe, itu akan dikonversi ke satu format standar.

Semua jenis nilai datetime menampilkan tanggal dalam format ‘mmm d, y’, yang merupakan format tanggal sudut default ‘ menengah ‘

Untuk mengubah format datetime dalam sudut, kita harus meneruskan parameter format datetime ke angularpipe.


DateTime as Milliseconds : {{todaysNumber}}

DatePipe:{{todaysNumber | date :'short'}}

DateTime as Object : {{todaysDate}}

DatePipe:{{todaysDate | date :'short'}}

DateTime as String : {{todayString}}

DatePipe:{{todayString | date :'short'}}

DateTime as ISO string : {{todayISOString}}

DatePipe:{{todayISOString | date :'short'}}

Dalam contoh ini, kami menggunakan ekspresi pendek untuk kencan di sudut.

Keluaran

DateTime as Milliseconds : 1594816050572

DatePipe:7/15/20, 5:57 PM

DateTime as Object : Wed Jul 15 2020 17:57:30 GMT+0530 (India Standard Time)

DatePipe:7/15/20, 5:57 PM

DateTime as String : Wed Jul 15 2020

DatePipe:7/15/20, 12:00 AM

DateTime as ISO string : 2020-07-15T12:27:30.572Z

DatePipe:7/15/20, 5:57 PM 

Daftar semua format tanggal yang telah ditentukan dalam sudut

pendek ‘: Ini setara dengan‘ m/d/yy, h: mm a ’(6/15/20, 9:03 pagi).

sedang ‘: Ini setara dengan‘ mmm d, y, h: mm: ss a ’(15 Jun 2020, 9:03:01 pagi).

panjang ‘: Ini setara dengan‘ mmmm d, y, h: mm: ss a z ’(15 Juni 2020 jam 9:03:01 GMT+1).

penuh ‘: Ini setara dengan‘ eeee, mmmm d, y, h: mm: ss a zzzz ’(Senin, 15 Juli 2020, jam 9:03:01 AM GMT+01: 00).

kencan singkat ‘: Setara dengan‘ m/d/yy ’(6/15/20).

menengah ‘ : Setara dengan ‘Mmm D, Y’ (15 Juni 2020).

Longdate ’ : Setara dengan ‘mmmm d, y’ (15 Juni 2020).

Fulldate ‘ : Setara dengan ‘eeee, mmmm d, y’ (Senin, 15 Juni 2020).

waktu singkat ‘: Setara dengan‘ h: mm a ’(9:03 pagi).

menengah ‘: Setara dengan‘ h: mm: ss a ’(9:03:01 pagi).

lama ‘: Ini setara dengan‘ h: mm: ss a z ’(9:03:01 GMT+1).

waktu penuh ‘: Ini setara dengan‘ h: mm: ss a zzzz ’(9:03:01 GMT+01: 00).

Contoh format tanggal sudut

Tulis kode berikut di dalam app.component.html mengajukan

DateTime as Milliseconds : {{todaysNumber}}

DatePipe:{{todaysNumber | date :'short'}}

DateTime as Object : {{todaysDate}}

DatePipe:{{todaysDate | date :'medium'}}

DateTime as String : {{todayString}}

DatePipe:{{todayString | date :'shortTime'}}

DateTime as ISO string : {{todayISOString}}

DatePipe:{{todayISOString | date :'mm:ss'}}

Keluaran

DateTime as Milliseconds : 1594871494181

DatePipe:7/16/20, 9:21 AM

DateTime as Object : Thu Jul 16 2020 09:21:34 GMT+0530 (India Standard Time)

DatePipe:Jul 16, 2020, 9:21:34 AM

DateTime as String : Thu Jul 16 2020

DatePipe:12:00 AM

DateTime as ISO string : 2020-07-16T03:51:34.182Z

DatePipe:21:34 

Itu untuk contoh format tanggal sudut.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *