Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

NGX-Moment

momen.js pipa untuk sudut

Modul ini berfungsi dengan sudut 7.0.0 dan lebih baru.

Untuk versi sudut yang lebih tua, silakan pasang momen Angular2. Untuk AngularJS, silakan periksa momen angular.

Instalasi 

npm install --save moment ngx-moment

atau jika Anda menggunakan benang: 

yarn add moment ngx-moment

Penggunaan

Impor MomentModule ke modul aplikasi Anda: 

 import { MomentModule } from 'ngx-moment' ;

@ NgModule ( {
  imports : [
    MomentModule
  ]
} )

Jika Anda ingin menyediakan NgxMomentOptions apa pun yang akan tersedia untuk pipa yang juga dapat Anda gunakan: 

 import { MomentModule } from 'ngx-moment' ;

@ NgModule ( {
  imports : [
    MomentModule . forRoot ( {
      relativeTimeThresholdOptions : {
        'm' : 59
      }
    } )
  ]
} )

Ini membuat semua pipa ngx-moment tersedia untuk digunakan dalam komponen aplikasi Anda.

Pipa yang tersedia

Pipa Amtimeago

Mengambil argumen Opsional omitSuffix yang default ke false dan fungsi formatFn opsional lainnya yang dapat digunakan untuk menyesuaikan format teks waktu yang lalu. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{myDate | amTimeAgo}}
  `
} )

Cetakan Last updated: a few seconds ago 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{myDate | amTimeAgo:true}}
  `
} )

Cetakan Last updated: a few seconds

Pipa amcalendar

Mengambil argumen referenceTime opsional (default ke sekarang) dan formats argumen yang bisa menjadi format output objek atau fungsi panggilan balik. Lihat MomenJS Documents untuk detailnya. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{myDate | amCalendar}}
  `
} )

Cetakan Last updated: Today at 14:00 (ReferenceTime default hari ini secara default) 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: <time>{{myDate | amCalendar:nextDay }}</time>
  `
} )
export class AppComponent {
  nextDay : Date ;

  constructor ( ) {
      this . nextDay = new Date ( ) ;
      nextDay . setDate ( nextDay . getDate ( ) + 1 ) ;
  }
}

Cetakan Last updated: Yesterday at 14:00 (Referencetime besok) 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: <time>{{myDate | amCalendar:{sameDay:'[Same Day at] h:mm A'} }}</time>
  `
} )

Cetakan Last updated: Same Day at 2:00 PM

Pipa AmdateFormat 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{myDate | amDateFormat:'LL'}}
  `
} )

Cetakan Last updated: January 24, 2016

Pipa Amparse

Purse tanggal yang diformat khusus menjadi objek momen yang dapat digunakan dengan pipa lain. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}
  `
} )

Cetakan Last updated: January 24, 2016

Pipa juga dapat menerima array format sebagai parameter. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{'24/01/2014 22:00' | amParse: formats | amDateFormat:'LL'}}
  `
} )
export class App {

  formats : string [ ] = [ 'DD/MM/YYYY HH:mm:ss' , 'DD/MM/YYYY HH:mm' ] ;

  constructor ( ) { }

}

Cetakan Last updated: January 24, 2016

Pipa amlokal

Mengubah waktu UTC ke waktu setempat. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}}
  `
} )

Cetakan Last updated 2016-01-24 12:34

Pipa amlocale

Untuk digunakan dengan pipa amdateformat untuk mengubah lokal. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{'2016-01-24 14:23:45' | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}
  `
} )

Cetakan Last updated: January 24th 2016, 2:23:45 pm

Catatan: Lokal mungkin harus diimpor (misalnya dalam modul aplikasi). 

 import 'moment/locale/de' ;

Pipa Amfromunix 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
  `
} )

Cetakan Last updated: 01:46PM

Pipa Amdurasi 

@ Component ( {
  selector : 'app' ,
  template : `
    Uptime: {{ 365 | amDuration:'seconds' }}
  `
} )

Cetak Uptime: 6 minutes

Pipa Amdifference 

@ Component ( {
  selector : 'app' ,
  template : `
    Expiration: {{nextDay | amDifference: today :'days' : true}} days
  `
} )

Cetak Expiration: 1 days

PIPA AMADD DAN AMSUBRACT

Gunakan pipa -pipa ini untuk melakukan aritmetik tanggal. Lihat MomenJS Documents untuk detailnya. 

@ Component ( {
  selector : 'app' ,
  template : `
    Expiration: {{'2017-03-17T16:55:00.000+01:00' | amAdd: 2 : 'hours' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
  `
} )

Cetak Expiration: 2017-03-17 18:55 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{'2017-03-17T16:55:00.000+01:00' | amSubtract: 5 : 'years' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
  `
} )

Cetakan Last updated: 2012-03-17 16:55

PIPA AMFROMUTC

Parse tanggal sebagai UTC dan memungkinkan mode untuk operasi momen berikutnya (seperti menampilkan waktu di UTC). Ini dapat dikombinasikan dengan amLocal untuk menampilkan tanggal UTC di waktu setempat. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amFromUtc | amDateFormat: 'YYYY-MM-DD' }}
  `
} )

Cetakan Last updated: 2017-01-01

Dimungkinkan juga untuk menentukan format yang berbeda dari ISO8601 standar. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: 'DD/MM/YYYY HH:mmZZ' | amDateFormat: 'YYYY-MM-DD' }}
  `
} )

Atau bahkan serangkaian format: 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: formats | amDateFormat: 'YYYY-MM-DD' }}
  `
} )
export class App {
  
  formats : string [ ] = [ 'DD/MM/YYYY HH:mm:ss' , 'DD/MM/YYYY HH:mmZZ' ] ;

  constructor ( ) { }

}

Kedua contoh di atas akan mencetak Last updated: 2017-01-01

pipa amutc

Mengaktifkan mode UTC untuk operasi momen berikutnya (seperti menampilkan waktu di UTC). 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amUtc | amDateFormat: 'YYYY-MM-DD' }}
  `
} )

Cetakan Last updated: 2017-01-01

Pipa Amparsezone

Parse string tetapi menjaga objek momen yang dihasilkan dalam zona waktu tetap dengan offset yang disediakan di string. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '2016-12-31T23:00:00.000-03:00' | amParseZone | amDateFormat: 'LLLL (Z)' }}
  `
} )

Cetakan Last updated: Saturday, December 31, 2016 11:00 PM (-03:00)

Pipa Amisbefore dan Amisafter

Periksa apakah sesaat sebelum momen lain. Mendukung pembatasan granularitas ke unit selain milidetik, lulus unit sebagai parameter kedua 

@ Component ( {
  selector : 'app' ,
  template : `
    Today is before tomorrow: {{ today | amIsBefore:tomorrow:'day' }}
  `
} )

Cetakan Today is before tomorrow: true 

@ Component ( {
  selector : 'app' ,
  template : `
    Tomorrow is after today: {{ tomorrow | amIsAfter:today:'day' }}
  `
} )

Cetakan Tomorrow is after today: true

NGXMomentOptions

Objek NgxMomentOptions dapat disediakan untuk modul menggunakan konvensi forRoot dan akan memberikan opsi untuk pipa untuk digunakan dengan contoh moment , opsi ini dirinci dalam tabel di bawah ini:

menopang jenis keterangan
RELATIVETIMETHRESHOLDOPtions Kamus
Kunci: String
Nilai: Angka		 Menyediakan unit relativeTimeThreshold yang memungkinkan pipa untuk mengatur moment.relativeTimeThreshold Nilai Relativetimethreshreshold.

key adalah unit yang didefinisikan sebagai salah satu dari ss , s , m , h , d , M

Lihat Dokumentasi Ambang Waktu Relatif untuk lebih jelasnya.

Contoh Lengkap 

 import { NgModule , Component } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' ;
import { MomentModule } from 'ngx-moment' ;

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: <b>{{myDate | amTimeAgo}}</b>, <b>{{myDate | amCalendar}}</b>, <b>{{myDate | amDateFormat:'LL'}}</b>
  `
} )
export class AppComponent {
  myDate : Date ;

  constructor ( ) {
    this . myDate = new Date ( ) ;
  }
}

@ NgModule ( {
  imports : [
    BrowserModule ,
    MomentModule
  ] ,
  declarations : [ AppComponent ]
  bootstrap : [ AppComponent ]
} )
class AppModule { }

platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ;

Demo

Lihat demo online di StackBlitz

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua