From e1f7681fbabbcdc0cd5341258c09fd2328affea9 Mon Sep 17 00:00:00 2001 From: Brandon Bodnar Date: Fri, 20 Jan 2017 16:09:51 -0500 Subject: [PATCH] Add UtcPipe to enable UTC mode in pipe chain. --- .gitignore | 3 +++ README.md | 15 +++++++++++ package.json | 4 +++ src/index.ts | 1 + src/moment.module.ts | 4 ++- src/utc.pipe.spec.ts | 61 ++++++++++++++++++++++++++++++++++++++++++++ src/utc.pipe.ts | 12 +++++++++ tsconfig.json | 2 ++ 8 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/utc.pipe.spec.ts create mode 100644 src/utc.pipe.ts diff --git a/.gitignore b/.gitignore index c64125c..766c1a7 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,9 @@ add.pipe.d.ts subtract.pipe.js subtract.pipe.js.map subtract.pipe.d.ts +utc.pipe.js +utc.pipe.js.map +utc.pipe.d.ts *.spec.js *.spec.js.map *.spec.d.ts diff --git a/README.md b/README.md index b08b798..2ef4df8 100644 --- a/README.md +++ b/README.md @@ -190,6 +190,21 @@ Use these pipes to perform date arithmetics. See [Momnet.js documentation](http: *Example for amAdd/amSubtract is needed here, Pull Requests are welcome* +## amUtc pipe + +Enables UTC mode for subsequent moment operations (such as displaying the time in UTC). + +``` typescript +@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` + Complete Example ---------------- diff --git a/package.json b/package.json index 21b0240..1878f39 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,10 @@ "subtract.pipe.js.map", "subtract.pipe.d.ts", "subtract.pipe.metadata.json", + "utc.pipe.js", + "utc.pipe.js.map", + "utc.pipe.d.ts", + "utc.pipe.metadata.json", "CHANGELOG.md" ], "scripts": { diff --git a/src/index.ts b/src/index.ts index 86607d2..68de67d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,3 +5,4 @@ export { DurationPipe } from './duration.pipe'; export { FromUnixPipe } from './from-unix.pipe'; export { MomentModule } from './moment.module'; export { TimeAgoPipe } from './time-ago.pipe'; +export { UtcPipe } from './utc.pipe'; diff --git a/src/moment.module.ts b/src/moment.module.ts index dc7c367..2960a57 100644 --- a/src/moment.module.ts +++ b/src/moment.module.ts @@ -6,8 +6,10 @@ import { DifferencePipe } from './difference.pipe'; import { DurationPipe } from './duration.pipe'; import { FromUnixPipe } from './from-unix.pipe'; import { TimeAgoPipe } from './time-ago.pipe'; +import { UtcPipe } from './utc.pipe'; -const ANGULAR_MOMENT_PIPES = [CalendarPipe, DateFormatPipe, DifferencePipe, DurationPipe, FromUnixPipe, TimeAgoPipe]; +const ANGULAR_MOMENT_PIPES = [CalendarPipe, DateFormatPipe, DifferencePipe, DurationPipe, FromUnixPipe, TimeAgoPipe, + UtcPipe]; @NgModule({ declarations: ANGULAR_MOMENT_PIPES, diff --git a/src/utc.pipe.spec.ts b/src/utc.pipe.spec.ts new file mode 100644 index 0000000..ab1fb60 --- /dev/null +++ b/src/utc.pipe.spec.ts @@ -0,0 +1,61 @@ +import 'es6-shim'; +import 'reflect-metadata'; +import * as moment from 'moment'; +import { DateFormatPipe } from './date-format.pipe'; +import { UtcPipe } from './utc.pipe'; + +describe('UtcPipe', () => { + + describe('#transform', () => { + + let utcDatePipe: UtcPipe; + + beforeEach(() => { + utcDatePipe = new UtcPipe(); + }); + + it('should output an invalid momemt object for a null input', () => { + const utcDate = utcDatePipe.transform(null); + expect(utcDate).toEqual(jasmine.any(moment)); + expect(utcDate.isValid()).toBe(false); + }); + + it('should output a moment object for a moment input', () => { + const momentDate = moment(); + const utcDate = utcDatePipe.transform(momentDate); + expect(utcDate).toEqual(jasmine.any(moment)); + expect(utcDate.isValid()).toBe(true); + }); + + it('should output a moment object for a date input', () => { + const date = new Date(); + const utcDate = utcDatePipe.transform(date); + expect(utcDate).toEqual(jasmine.any(moment)); + expect(utcDate.isValid()).toBe(true); + }); + + it('should output a moment object for a string date', () => { + const dateString = '2016-01-01'; + const utcDate = utcDatePipe.transform(dateString); + expect(utcDate).toEqual(jasmine.any(moment)); + expect(utcDate.isValid()).toBe(true); + }); + + it('should output a moment object for a timestamp', () => { + const timestamp: number = Date.now(); + const utcDate = utcDatePipe.transform(timestamp); + expect(utcDate).toEqual(jasmine.any(moment)); + expect(utcDate.isValid()).toBe(true); + }); + + it('should be pipeable to amDateFormat', () => { + const amDateFormat = new DateFormatPipe(); + const datetimeString = '2015-12-31T23:00:00.000-01:00'; + const momentFormatString = 'YYYY-MM-DD'; + const utcOutput = utcDatePipe.transform(datetimeString); + expect(amDateFormat.transform(utcOutput, momentFormatString)).toEqual('2016-01-01'); + }); + + }); + +}); diff --git a/src/utc.pipe.ts b/src/utc.pipe.ts new file mode 100644 index 0000000..a4b454a --- /dev/null +++ b/src/utc.pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import * as moment from 'moment'; + +// under systemjs, moment is actually exported as the default export, so we account for that +const momentConstructor: (value?: any) => moment.Moment = (moment).default || moment; + +@Pipe({ name: 'amUtc' }) +export class UtcPipe implements PipeTransform { + transform(value: Date | moment.Moment | string | number): moment.Moment { + return moment(value).utc(); + } +} diff --git a/tsconfig.json b/tsconfig.json index 356e7f2..cd99a3e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,6 +27,8 @@ "src/duration.pipe.spec.ts", "src/time-ago.pipe.ts", "src/time-ago.pipe.spec.ts", + "src/utc.pipe.ts", + "src/utc.pipe.spec.ts", "src/moment.module.ts", "src/index.ts" ],