Téléchargement ngx moment - Téléchargement du code source ngx moment

moments ngx

moments.js tuyaux pour angulaire

Ce module fonctionne avec Angular 7.0.0 et plus récent.

Pour les versions angulaires plus anciennes, veuillez installer Angular2-Moment. Pour les AngularJS, veuillez consulter le moment angulaire.

Installation

npm install --save moment ngx-moment

ou si vous utilisez du fil:

yarn add moment ngx-moment

Usage

Importez MomentModule dans les modules de votre application:

 import { MomentModule } from 'ngx-moment' ;

@ NgModule ( {
  imports : [
    MomentModule
  ]
} )

Si vous souhaitez fournir des NgxMomentOptions qui seront mises à la disposition des tuyaux que vous pouvez également utiliser:

 import { MomentModule } from 'ngx-moment' ;

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

Cela rend tous les tuyaux ngx-moment disponibles pour une utilisation dans les composants de votre application.

Tuyaux disponibles

pipe amtimeago

Prend un argument omitSuffix facultatif qui par défaut est false et une autre fonction formatFn facultative qui peut être utilisée pour personnaliser le format du texte il y a.

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

Imprimés Last updated: a few seconds ago

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

Imprimés Last updated: a few seconds

pipe amcalendar

Prend un argument referenceTime facultatif (par défaut maintenant) et un argument formats qui pourrait être un objet de sortie ou une fonction de rappel des formats de sortie. Voir les documents MomentJS pour plus de détails.

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

Imprimés Last updated: Today at 14:00 (la référence par défaut est aujourd'hui par défaut)

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

Impressions Last updated: Yesterday at 14:00 (référence est demain)

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

Imprimés Last updated: Same Day at 2:00 PM

tuyau d'amdateformat

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

Imprimés Last updated: January 24, 2016

pipe d'ampleur

Analyse une date de forme personnalisée dans un objet de moment qui peut être utilisé avec les autres tuyaux.

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

Imprimés Last updated: January 24, 2016

Le tuyau peut également accepter un tableau de formats comme paramètre.

@ 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 ( ) { }

}

Imprimés Last updated: January 24, 2016

pipe amlocale

Convertit le temps UTC en heure locale.

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

Imprimés Last updated 2016-01-24 12:34

pipe amlocale

À utiliser avec un tuyau AMDateFormat afin de changer les paramètres régionaux.

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

Imprimés Last updated: January 24th 2016, 2:23:45 pm

Remarque: le lieu peut être importé (par exemple dans le module d'application).

 import 'moment/locale/de' ;

tuyau amfromunix

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

Imprimés Last updated: 01:46PM

tuyau

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

Imprime Uptime: 6 minutes

tuyau de l'aminférence

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

Expiration: 1 days

Amadd et AmsumberT Pipes

Utilisez ces tuyaux pour effectuer des arithmétiques de date. Voir les documents MomentJS pour plus de détails.

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

Imprimés Last updated: 2012-03-17 16:55

tuyau amfromutc

Analyse la date en tant que UTC et active le mode pour les opérations de moment ultérieures (comme l'affichage de l'heure en UTC). Cela peut être combiné avec amLocal pour afficher une date UTC à l'heure locale.

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

Imprimés Last updated: 2017-01-01

Il est également possible de spécifier un format différent de l'ISO8601 standard.

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

Ou même un éventail de formats:

@ 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 ( ) { }

}

Les deux exemples ci-dessus impriment Last updated: 2017-01-01

tuyau amutc

Permet le mode UTC pour les opérations de moment ultérieures (comme l'affichage de l'heure dans UTC).

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

Imprimés Last updated: 2017-01-01

pipe d'amparseonne

Analyse une chaîne mais conserve l'objet de moment résultant dans un fuseau horaire à décalage fixe avec le décalage fourni dans la chaîne.

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

Imprimés Last updated: Saturday, December 31, 2016 11:00 PM (-03:00)

Amisbefore et Amisafter Pipe

Vérifiez si un moment est avant un autre moment. Prend en charge la limitation de granularité à une unité autre que les millisecondes, passer les unités en deuxième paramètre

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

Les impressions Today is before tomorrow: true

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

Les impressions Tomorrow is after today: true

Ngxmomentoptions

Un objet NgxMomentOptions peut être fourni au module à l'aide de la convention forRoot et fournira des options aux tuyaux à utiliser avec l'instance moment , ces options sont détaillées dans le tableau ci-dessous:

soutenir	taper	description
relativertimethreholdoptions	Dictionnaire clé: chaîne valeur: numéro	Fournit les unités `relativeTimeThreshold` permettant à un tuyau de définir le `moment.relativeTimeThreshold` Relativetimemithrehold les valeurs. La `key` est une unité définie comme l'une des `ss` , `s` , `m` , `h` , `d` , `M` . Voir la documentation relative des seuils de temps pour plus de détails.

Exemple complet

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