Главная страница>Связанные с программированием>Другой исходный код
Скачать

ngx-moment

момент.

Этот модуль работает с Angular 7.0.0 и новее.

Для старых угловых версий, пожалуйста, установите Angular2-Moment. Для Angularjs, пожалуйста, ознакомьтесь с Angular-Moment.

Установка 

npm install --save moment ngx-moment

или если вы используете пряжу: 

yarn add moment ngx-moment

Использование

Импортируйте MomentModule в модули вашего приложения: 

 import { MomentModule } from 'ngx-moment' ;

@ NgModule ( {
  imports : [
    MomentModule
  ]
} )

Если вы хотите поставить какие -либо NgxMomentOptions , которые будут доступны для труб, которые вы также можете использовать: 

 import { MomentModule } from 'ngx-moment' ;

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

Это делает все трубы ngx-moment доступными для использования в компонентах вашего приложения.

Доступные трубы

Амтиаго труба

Принимает дополнительный аргумент omitSuffix , который по умолчанию по false и еще одной необязательной функции formatFn , которую можно использовать для настройки формата текста времени. 

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

Отпечатки Last updated: a few seconds ago 

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

Отпечатки Last updated: a few seconds

Амкалендарная труба

Принимает необязательный аргумент referenceTime (по умолчанию сейчас) и formats аргумента, которые могут быть форматами вывода объекта или функции обратного вызова. Смотрите Momentjs Docs для деталей. 

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

Отпечатки Last updated: Today at 14:00 (сегодня по умолчанию сегодня по умолчанию) 

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

Отпечатки Last updated: Yesterday at 14:00 (Ссылка на завтра) 

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

Отпечатки Last updated: Same Day at 2:00 PM

Amdateformat Tipe 

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

Отпечатки Last updated: January 24, 2016

Amparse Tipe

Подготовки дата пользовательской в ​​формате в мгновение, который можно использовать с другими трубами. 

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

Отпечатки Last updated: January 24, 2016

Труба также может принять массив форматов в качестве параметра. 

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

}

Отпечатки Last updated: January 24, 2016

Амлокальная труба

Конвертирует UTC времени в местное время. 

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

Отпечатки Last updated 2016-01-24 12:34

Амлокальная труба

Использоваться с трубой Amdateformat для изменения локали. 

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

Отпечатки Last updated: January 24th 2016, 2:23:45 pm

Примечание: локаль может быть импортирован (например, в модуле приложения). 

 import 'moment/locale/de' ;

Amfromunix труба 

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

Отпечатки Last updated: 01:46PM

Амдуктационная труба 

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

Отпечатает Uptime: 6 minutes

Амдифферентная труба 

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

Отпечатки Expiration: 1 days

Amadd и Amsubtract Pipes

Используйте эти трубы, чтобы выполнить дату арифметики. Смотрите Momentjs Docs для деталей. 

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

Отпечатки Last updated: 2012-03-17 16:55

Amfromutc Tipe

Подбирает дату как UTC и позволяет режим для последующих операций момента (например, отображение времени в UTC). Это может быть объединено с amLocal для отображения даты UTC в местное время. 

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

Отпечатки Last updated: 2017-01-01

Также возможно указать другой формат, чем стандартный ISO8601. 

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

Или даже множество форматов: 

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

}

Оба примера выше будут напечатать Last updated: 2017-01-01

AMUTC Tipe

Включает режим UTC для последующих операций момента (например, отображение времени в UTC). 

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

Отпечатки Last updated: 2017-01-01

Amparsezone Tipe

Подготовки строки, но сохраняет полученный объект момента в фиксированном часовом поясе с предоставленным смещением в строке. 

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

Отпечатки Last updated: Saturday, December 31, 2016 11:00 PM (-03:00)

Amisbefore и Amisafter Pipe

Проверьте, протекает ли момент перед другим моментом. Поддерживает ограничение гранулярности до единицы, отличного от миллисекундов, передайте единицы в качестве второго параметра 

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

Отпечатки Today is before tomorrow: true 

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

Отпечатки Tomorrow is after today: true

Ngxmomentoptions

Объект NgxMomentOptions может быть предоставлен для модуля с использованием forRoot Convent, и будет предоставить варианты для использования труб с помощью moment , эти параметры подробно описаны в таблице ниже:

проп тип описание
RELATIVETIMETHETHRESHOLDOPTIONS Словарь
Ключ: строка
Значение: число		 Обеспечивает relativeTimeThreshold единицы, позволяющие трубе установить moment.relativeTimeThreshold RelativeTimethethreshold значений.

key представляет собой единицу, определяемое как один из ss , s , m , h , d , M

См. Документацию по относительным времени времени для более подробной информации.

Полный пример 

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

Демо

Смотрите демо онлайн на Stackblitz

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все