ngx moment
6.0.2
Moment.js tubos para angular
Este módulo funciona com o Angular 7.0.0 e mais recente.
Para versões angulares mais antigas, instale o Angular2-Moment. Para os angulares, confira o momento angular.
npm install --save moment ngx-momentou se você usar o fio:
yarn add moment ngx-moment Importar MomentModule para os módulos do seu aplicativo:
import { MomentModule } from 'ngx-moment' ;
@ NgModule ( {
imports : [
MomentModule
]
} ) Se você deseja fornecer quaisquerações NgxMomentOptions que serão disponibilizadas para os tubos que você também pode usar:
import { MomentModule } from 'ngx-moment' ;
@ NgModule ( {
imports : [
MomentModule . forRoot ( {
relativeTimeThresholdOptions : {
'm' : 59
}
} )
]
} ) Isso disponibiliza todos os tubos ngx-moment para uso em seus componentes do aplicativo.
Tomar um argumento opcional omitSuffix que os padrões são false e outra função formatFn opcional que pode ser usada para personalizar o formato do tempo atrás do texto.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amTimeAgo}}
`
} ) Impressões Last updated: a few seconds ago
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amTimeAgo:true}}
`
} ) Impressões Last updated: a few seconds
Leva o argumento opcional referenceTime (padrões agora) e formats argumento que pode ser o objeto de formatos de saída ou função de retorno de chamada. Consulte os documentos do MOMPEJS para obter detalhes.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amCalendar}}
`
} ) Impressões Last updated: Today at 14:00 (a referência padrão é hoje por padrão)
@ 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 ) ;
}
} Impressões Last updated: Yesterday at 14:00 (ReferenceTime é amanhã)
@ Component ( {
selector : 'app' ,
template : `
Last updated: <time>{{myDate | amCalendar:{sameDay:'[Same Day at] h:mm A'} }}</time>
`
} ) Impressões Last updated: Same Day at 2:00 PM
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amDateFormat:'LL'}}
`
} ) Impressões Last updated: January 24, 2016
Analisa uma data formatada personalizada em um objeto de momento que pode ser usado com os outros tubos.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}
`
} ) Impressões Last updated: January 24, 2016
O tubo também pode aceitar uma matriz de formatos como parâmetro.
@ 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 ( ) { }
} Impressões Last updated: January 24, 2016
Converte o tempo da UTC para a hora local.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
} ) Impressões Last updated 2016-01-24 12:34
Para ser usado com o tubo amdateformat para alterar o localidade.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{'2016-01-24 14:23:45' | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}
`
} ) Impressões Last updated: January 24th 2016, 2:23:45 pm
NOTA: O local pode ser importado (por exemplo, no módulo App).
import 'moment/locale/de' ; @ Component ( {
selector : 'app' ,
template : `
Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
`
} ) Impressões Last updated: 01:46PM
@ Component ( {
selector : 'app' ,
template : `
Uptime: {{ 365 | amDuration:'seconds' }}
`
} ) Imprime Uptime: 6 minutes
@ Component ( {
selector : 'app' ,
template : `
Expiration: {{nextDay | amDifference: today :'days' : true}} days
`
} ) Expiration: 1 days
Use esses tubos para executar a aritmética da data. Consulte os documentos do MOMPEJS para obter detalhes.
@ Component ( {
selector : 'app' ,
template : `
Expiration: {{'2017-03-17T16:55:00.000+01:00' | amAdd: 2 : 'hours' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
} ) 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'}}
`
} ) Impressões Last updated: 2012-03-17 16:55
Analisa a data como UTC e permite o modo para operações de momento subsequente (como exibir o tempo no UTC). Isso pode ser combinado com amLocal para exibir uma data da UTC na hora local.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amFromUtc | amDateFormat: 'YYYY-MM-DD' }}
`
} ) Impressões Last updated: 2017-01-01
Também é possível especificar um formato diferente do ISO8601 padrão.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: 'DD/MM/YYYY HH:mmZZ' | amDateFormat: 'YYYY-MM-DD' }}
`
} )Ou mesmo uma variedade de formatos:
@ 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 ( ) { }
} Ambos os exemplos acima serão impressos Last updated: 2017-01-01
Ativa o modo UTC para operações de momento subsequente (como exibir o tempo no UTC).
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amUtc | amDateFormat: 'YYYY-MM-DD' }}
`
} ) Impressões Last updated: 2017-01-01
Analisa uma string, mas mantém o objeto de momento resultante em um fuso horário de deslocamento fixo com o deslocamento fornecido na sequência.
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '2016-12-31T23:00:00.000-03:00' | amParseZone | amDateFormat: 'LLLL (Z)' }}
`
} ) Impressões Last updated: Saturday, December 31, 2016 11:00 PM (-03:00)
Verifique se um momento é antes de outro momento. Suporta limitar a granularidade a uma unidade que não seja milissegundos, passe as unidades como segundo parâmetro
@ Component ( {
selector : 'app' ,
template : `
Today is before tomorrow: {{ today | amIsBefore:tomorrow:'day' }}
`
} ) Impressões Today is before tomorrow: true
@ Component ( {
selector : 'app' ,
template : `
Tomorrow is after today: {{ tomorrow | amIsAfter:today:'day' }}
`
} ) Impressões Tomorrow is after today: true
Um objeto NgxMomentOptions pode ser fornecido ao módulo usando a Convenção forRoot e fornecerá opções para os tubos usarem com a instância moment , essas opções são detalhadas na tabela abaixo:
| prop | tipo | descrição |
|---|---|---|
| RelativeTimeThesHoldOptions | Dicionário Chave: String Valor: Número | Fornece as unidades relativeTimeThreshold , permitindo que um tubo defina o moment.relativeTimeThreshold .A key é uma unidade definida como uma de ss , s , m , h , d , MConsulte a documentação dos limiares de tempo relativos para obter mais detalhes. |
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 ) ; Veja a demonstração online no Stackblitz
