当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ngx-moment

moment.js pipes for Angular

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者单于奇略

操作系统跨平台

开源组织无

适用人群未知

软件概览

ngx-moment

moment.js pipes for Angular

This module works with Angular 7.0.0 and newer.

For older Angular versions, please install angular2-moment. For the AngularJS, please check out angular-moment.

Installation

npm install --save moment ngx-moment

or if you use yarn:

yarn add moment ngx-moment

Usage

Import MomentModule into your app's modules:

import { MomentModule } from 'ngx-moment';

@NgModule({
  imports: [
    MomentModule
  ]
})

If you would like to supply any NgxMomentOptions that will be made available to the pipes you can also use:

import { MomentModule } from 'ngx-moment';

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

This makes all the ngx-moment pipes available for use in your app components.

Available pipes

amTimeAgo pipe

Takes an optional omitSuffix argument that defaults to false and another optional formatFn function which can be used to customise the format of the time ago text.

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

Prints Last updated: a few seconds ago

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

Prints Last updated: a few seconds

amCalendar pipe

Takes optional referenceTime argument (defaults to now)and formats argument that could be output formats object or callback function.See momentjs docs for details.

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

Prints Last updated: Today at 14:00 (default referenceTime is today by 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);
  }
}

Prints Last updated: Yesterday at 14:00 (referenceTime is tomorrow)

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

Prints Last updated: Same Day at 2:00 PM

amDateFormat pipe

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

Prints Last updated: January 24, 2016

amParse pipe

Parses a custom-formatted date into a moment object that can be used with the other pipes.

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

Prints Last updated: January 24, 2016

The pipe can also accept an array of formats as 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����ss', 'DD/MM/YYYY HH:mm'];

  constructor() { }

}

Prints Last updated: January 24, 2016

amLocal pipe

Converts UTC time to local time.

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

Prints Last updated 2016-01-24 12:34

amLocale pipe

To be used with amDateFormat pipe in order to change locale.

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

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

Note: The locale might have to be imported (e.g. in the app module).

import 'moment/locale/de';

amFromUnix pipe

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

Prints Last updated: 01:46PM

amDuration pipe

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

Prints Uptime: 6 minutes

amDifference pipe

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

Prints Expiration: 1 days

amAdd and amSubtract pipes

Use these pipes to perform date arithmetics. See momentjs docs for details.

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

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

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

amFromUtc pipe

Parses the date as UTC and enables mode for subsequent moment operations (such as displaying the time in UTC). This can be combined with amLocal to display a UTC date in local time.

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

Prints Last updated: 2017-01-01

It's also possible to specify a different format than the standard ISO8601.

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

Or even an array of 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����ss', 'DD/MM/YYYY HH:mmZZ'];

  constructor() { }

}

Both examples above will print Last updated: 2017-01-01

amUtc pipe

Enables UTC mode for subsequent moment operations (such as displaying the time in UTC).

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

Prints Last updated: 2017-01-01

amParseZone pipe

Parses a string but keeps the resulting Moment object in a fixed-offset timezone with the provided offset in the string.

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

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

amIsBefore and amIsAfter pipe

Check if a moment is before another moment. Supports limiting granularity to a unit other than milliseconds, pass the units as second parameter

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

Prints Today is before tomorrow: true

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

Prints Tomorrow is after today: true

NgxMomentOptions

An NgxMomentOptions object can be provided to the module using the forRoot convention and will provide options for the pipes to use with the moment instance, these options are detailed in the table below:

prop	type	description
relativeTimeThresholdOptions	Dictionary key: string value: number	Provides the `relativeTimeThreshold` units allowing a pipe to set the `moment.relativeTimeThreshold` values. The `key` is a unit defined as one of `ss`, `s`, `m`, `h`, `d`, `M`. See Relative Time Thresholds documentation for more details.

Complete Example

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

See online demo on StackBlitz

使用案例

js_moment

js 一、moment.js Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面就是我对moment.js使用过程中的整理，方便以后查阅。 // require 方式 var moment = require('moment'); 二、设定
nodejs的moment操作时间

var moment = require('moment'); console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间（24小时制） console.log(moment().add(1, "hours").format("YYYY-MM-DD HH:mm:ss")); //当前时间增加1小时 console.log(
nginx ngx_times

/* * Copyright (C) Igor Sysoev */ #ifndef _NGX_TIMES_H_INCLUDED_ #define _NGX_TIMES_H_INCLUDED_ #include <ngx_config.h> #include <ngx_core.h> typedef struct { time_t sec; ngx_uint_t ms
momentjs如何格式化时间差值

在实际应用中，我们经常需要计算两个时间的差值，用来确定消逝的时间，如下： var m1 = moment('2017-12-18 10:00:20'), m2 = moment('2017-12-18 10:10:00'), du = moment.duration(m2 - m1, 'ms'); // 输出结果为“10 分钟” console.log(du.locale('zh
nodejs moment模块使用

最常用的时间格式化： moment().format(‘YYYY-MM-DDTHH:mm:ssZ’);//(Z表示时区) //2016-03-04T07:00:00+08:00 moment().format(‘YYYY-MM-DD HH:mm:ss’); //2016-03-04 07:00:00 标题经常用到的两种不同的时间字符串装换方式，分别表示0时区和当前所在的时区 moment().to
【JS】moment.min.js

!function(e,t){“object"typeof exports&&“undefined”!=typeof module?module.exports=t():"function"typeof define&&define.amd?define(t):e.moment=t()}(this,function(){“use strict”;var e,i;function c(){retur
moment.js使用方法总结

文章转自：https://www.cnblogs.com/Jimc/p/10591580.html Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面就是我对moment.js使用过程中的整理，方便以后查阅。 1|0一、引入moment.js
浅谈ngx.exit,ngx.eof,ngx.timer.at

最近要快速搭建日志采集服务端，想到了基于openresty。这里主要介绍下ngx.exit,ngx.eof,ngx.timer.at这三者的区别。 1.ngx.exit 立即中断当前http请求，后续lua代码将不会再执行，底层socket通道还存在，只要没超过保活时间，如果用了proxypass做子请求，不影响。 2.ngx.eof 立即中断当前http请求，后续的lua代码将继续执行，底层so
moment.js对时间的取值

@当前月的第一天和最后一天当天 let now = new Date() 当月第一天 let firstDay = new Date(now .getFullYear(), now .getMonth(), 1) 当月最后一天 let lastDay = new Date(now .get
nodejs 操作moment时间

var moment = require('moment'); console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间（24小时制） console.log(moment().add(1, "hours").format("YYYY-MM-DD HH:mm:ss")); //当前时间增加1小时 console.log(moment(
nodejs使用Moment.js操作日期时间

文档：http://momentjs.cn/ 1.简介 Moment 被设计为在浏览器和 Node.js 中都能工作。所有的代码都应该在这两种环境中都可以工作，并且所有的单元测试都应该在这两种环境中运行。 CI 系统当前使用以下的浏览器：Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的
vue中使用Moment.js

1.安装模块 npm install moment --save 2.在main.js中引入 import moment from 'moment'; //导入模块 moment.locale('zh-cn'); //设置语言或 moment.lang('zh-cn'); Vue.prototype.$moment = moment;//赋值使用 3.使用 this.$moment('2
moment的使用

1.下载moment模块 npm install moment 2.引入 import moment from 'moment' 3.常用格式化日期 moment(new Date()).format('YYYY-MM-DD, hh:mm:ss'); //1997-08-08,03:21:34 moment(new Date()).format("YYYY-MM-DD HH:m
moment常用操作

日历时间 moment().calendar(); //Today at 3:02 PM moment().subtract(9,"days").calendar(); // 当前时间前9天，2021/11/07 moment().subtract(4,"days").calendar(); // 当前时间前4天，上星期五10:00 mom
npm moment 时间转换

npm install moment --save # npm http://momentjs.cn/官网 // 计算时间 export const calcTimeByNumber = _cachedFn( function calcTimeByNumber (timeNumber) { return moment(+timeNumber).utcOffset(8).format(
moment.js时间处理

序：项目中或多或少的都会有些时间的处理，下面推荐款常用插件使用，以便提高工作效率，有更多时间摸摸鱼，嘿嘿~ 安装依赖： npm install moment --save 使用： 'use strict' let moment = require('moment'); //获取当前时间 let now = moment().toDate(); console.log(now) //格式
Node.js中使用moment

http://momentjs.cn/ moment官网 Moment格式化时间默认格式为当地时区的时间。如果格式化的结果与当地时间有差值，一般原因是：要格式化的时间带有时间标志，如：UTC 、GMT等。经过Moment格式化后，会变成时间标志所表示的时区的时间。此时，只需要改变时间偏移量即可。使用 utcOffset() utcOffset() 接收数字，时间偏移量，单位：分钟例如，要
vue3中如何使用moment

1、npm i momet 2、直接在用到的页面 import moment from "moment" 3、直接在上边就可用{{ moment(item.end_time).fromNow() }}//判断这是多久之前

ngx-moment

ngx-moment

Installation

Usage

Available pipes

amTimeAgo pipe

amCalendar pipe

amDateFormat pipe

amParse pipe

amLocal pipe

amLocale pipe

amFromUnix pipe

amDuration pipe

amDifference pipe

amAdd and amSubtract pipes

amFromUtc pipe

amUtc pipe

amParseZone pipe

amIsBefore and amIsAfter pipe

NgxMomentOptions

Complete Example

Demo

同类工具

相关阅读

相关文章

相关问答

相关文档