https://github.com/ljmerza/ngx-dayjs
dayjs pipes for Angular
https://github.com/ljmerza/ngx-dayjs
angular dayjs dayjs-pipes javascript library module pipe time timzone
Last synced: about 1 year ago
JSON representation
dayjs pipes for Angular
- Host: GitHub
- URL: https://github.com/ljmerza/ngx-dayjs
- Owner: ljmerza
- License: mit
- Created: 2018-04-27T17:02:55.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-14T16:03:43.000Z (about 8 years ago)
- Last Synced: 2025-04-12T08:52:46.760Z (about 1 year ago)
- Topics: angular, dayjs, dayjs-pipes, javascript, library, module, pipe, time, timzone
- Language: TypeScript
- Homepage: https://github.com/xx45/dayjs
- Size: 199 KB
- Stars: 8
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-dayjs
dayjs pipes for Angular
[](https://travis-ci.org/ljmerza/ngx-dayjs)
Installation
------------
`npm install --save ngx-dayjs`
### For System.js users:
First you need to install dayjs:
`npm install dayjs --save`
Don't forget to update your systemjs.config.js:
```
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'dayjs': {
main: './dayjs.js',
defaultExtension: 'js'
},
'ngx-dayjs': {
main: './index.js',
defaultExtension: 'js'
}
}
```
Usage
-----
Import `dayjsModule` into your app's modules:
``` typescript
import { dayjsModule } from 'ngx-dayjs';
@NgModule({
imports: [
dayjsModule
]
})
```
This makes all the `ngx-dayjs` pipes available for use in your app components.
Available pipes
---------------
## amFromUnix pipe
``` typescript
@Component({
selector: 'app',
template: `
Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
`
})
```
Prints `Last updated: 01:46PM`
## amParse pipe
Parses a custom-formatted date into a dayjs object that can be used with the other pipes.
``` typescript
@Component({
selector: 'app',
template: `
Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}
`
})
```
Prints `Last updated: January 24, 2016`
## amDifference pipe
``` typescript
@Component({
selector: 'app',
template: `
Expiration: {{nextDay | amDifference: today :'days' : true}} days
`
})
```
Prints `Expiration: 1 day`
## amAdd and amSubtract pipes
Use these pipes to perform date arithmetics. See [dayjsjs docs](http://dayjsjs.com/docs/#/manipulating/add/) for details.
``` typescript
@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`
``` typescript
@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`
Complete Example
----------------
``` typescript
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { dayjsModule } from 'ngx-dayjs';
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amSubtract:timeLeft}}
`
})
export class AppComponent {
myDate: Date;
constructor() {
this.myDate = new Date();
}
}
@NgModule({
imports: [
BrowserModule,
dayjsModule
],
declarations: [ AppComponent ]
bootstrap: [ AppComponent ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```