Descargar ngx moment - Descargar el código fuente ngx moment

ngx-moment

momento.js tuberías para angular

Este módulo funciona con Angular 7.0.0 y más nuevo.

Para versiones angulares más antiguas, instale Angular2-Moment. Para los AngularJS, consulte Angular-Moment.

Instalación

npm install --save moment ngx-moment

o si usas hilo:

yarn add moment ngx-moment

Uso

Importar MomentModule en los módulos de su aplicación:

 import { MomentModule } from 'ngx-moment' ;

@ NgModule ( {
  imports : [
    MomentModule
  ]
} )

Si desea suministrar cualquier NgxMomentOptions que se ponga a disposición de las tuberías que también puede usar:

 import { MomentModule } from 'ngx-moment' ;

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

Esto hace que todas las tuberías ngx-moment estén disponibles para su uso en los componentes de su aplicación.

Tuberías disponibles

tubería de amtimeago

Toma un argumento opcional omitSuffix que predeterminado es false y otra función formatFn opcional que se puede usar para personalizar el formato del texto del tiempo.

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

Impresiones Last updated: a few seconds ago

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

Impresiones Last updated: a few seconds

tubería amcalendar

Toma el argumento opcional referenceTime (predeterminados ahora) y argumento formats que podría ser el objeto de formato de salida o la función de devolución de llamada. Ver MomentJs Docs para más detalles.

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

Impresiones Last updated: Today at 14:00 (la referencia predeterminada es hoy de forma predeterminada)

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

Impresiones Last updated: Yesterday at 14:00 (ReferenceTime es mañana)

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

Impresiones Last updated: Same Day at 2:00 PM

tubería amdateformat

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

Impresiones Last updated: January 24, 2016

pipa

Analiza una fecha de formato personalizado en un objeto de momento que se puede usar con las otras tuberías.

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

Impresiones Last updated: January 24, 2016

La tubería también puede aceptar una variedad 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 ( ) { }

}

Impresiones Last updated: January 24, 2016

tubería amlocal

Convierte la hora de UTC en la hora local.

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

Impresiones Last updated 2016-01-24 12:34

tubería de amlocala

Para ser utilizado con tubería amdateformat para cambiar la localidad.

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

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

Nota: La localidad podría tener que importarse (por ejemplo, en el módulo de la aplicación).

 import 'moment/locale/de' ;

tubería amfromunix

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

Impresiones Last updated: 01:46PM

tubería de amdurecimiento

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

Impresa Uptime: 6 minutes

tubería de amdifferencia

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

Impresión Expiration: 1 days

tubos de amadd y amsubtract

Use estas tuberías para realizar aritméticos de fecha. Ver MomentJs Docs para más detalles.

@ 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'}}
  `
} )

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

tubería amfromutc

Analiza la fecha como UTC y habilita el modo para operaciones de momento posteriores (como mostrar el tiempo en UTC). Esto se puede combinar con amLocal para mostrar una fecha UTC en la hora local.

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

Impresiones Last updated: 2017-01-01

También es posible especificar un formato diferente al estándar ISO8601.

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

O incluso una variedad 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 ejemplos anteriores imprimirán Last updated: 2017-01-01

tubería de amutc

Habilita el modo UTC para operaciones de momento posteriores (como mostrar el tiempo en UTC).

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

Impresiones Last updated: 2017-01-01

tubería de amppero

Analiza una cadena pero mantiene el objeto de momento resultante en una zona horaria de desplazamiento fijo con el desplazamiento provisto en la cadena.

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

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

amisbefore y pipa de amisafter

Compruebe si un momento es antes de otro momento. Admite limitar la granularidad a una unidad que no sea milisegundos, pase las unidades como segundo parámetro

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

Las impresiones Today is before tomorrow: true

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

Impresiones Tomorrow is after today: true

Ngxmomentociones

Se puede proporcionar un objeto NgxMomentOptions al módulo utilizando la convención forRoot y proporcionará opciones para que las tuberías usen con la instancia moment , estas opciones se detallan en la tabla a continuación:

apuntalar	tipo	descripción
relativetiMethRoLoLOPTions	Diccionario Clave: cadena Valor: número	Proporciona las unidades `relativeTimeThreshold` que permiten que una tubería establezca el `moment.relativeTimeThreshold` . La `key` es una unidad definida como una de `ss` , `s` , `m` , `h` , `d` , `M` Consulte la documentación de los umbrales de tiempo relativo para obtener más detalles.

Ejemplo completo

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