How to use moment-timezone in Angular 2 class?

Question

I am trying to use moment-timezone in my class. This is my typings.

"moment": "github:DefinitelyTyped/DefinitelyTyped/moment/moment.d.ts#a1575b96ec38e916750629839d2110cb96210f89",
"moment-timezone": "github:DefinitelyTyped/DefinitelyTyped/moment-timezone/moment-timezone.d.ts#f8a90040348e83926f44e690b209769c4f88b961"

My import:

import * as moment from 'moment';
import * as tz from 'moment-timezone';

My usage:

var jun = moment("2014-06-01T12:00:00Z");
jun.tz('America/Los_Angeles').format('ha z');

My error:

Property 'tz' does not exist on type 'Moment'.

score 13 · Answer 1 · edited May 23 '17 at 11:54

13

Use Typescript @types packages and import it via import * as moment from 'moment-timezone'; You can use all moment methods and member vars as moment-timezone exports them.

I have a complete example using SystemJS at How to use moment-timezone in Angular2 via SystemJs

edited May 23 '17 at 11:54

Community

1
1

answered Oct 04 '16 at 16:27

rynop

50,086
26
101
112

score 13 · Answer 2 · edited May 17 '17 at 07:01

13

Please try this code:

import * as moment from 'moment-timezone';

   export class Page1 {  

     public setdate = moment(); // today date
     constructor(){
       this.setdate.tz("Asia/Singapore").format('YYYY-MM-DD HH:mm:ss');
       console.log(this.setdate.tz("Asia/Singapore").format('YYYY-MM-DD HH:mm:ss'));
     }
   }

edited May 17 '17 at 07:01

HankCa

9,129
8
62
83

answered May 10 '17 at 10:17

HEMANT PATEL

258
2
11

score 10 · Answer 3 · answered Jun 16 '16 at 09:09

I had the same issue and solved it this way:

Typings (ambientDependencies):

"moment": "registry:dt/moment#2.8.0+20160316155526",
"moment-timezone": "github:DefinitelyTyped/DefinitelyTyped/moment-timezone/moment-timezone.d.ts#f8a90040348e83926f44e690b209769c4f88b961"

Import:

import * as moment from 'moment';
import 'moment-timezone'

Usage:

moment("2014-06-01T12:00:00Z")
  .tz('America/Los_Angeles')
  .format('ha z');

So, basically I'm doing .tz() function on moment imported object (which in fact does not exist), but the import of moment-timezone extends it with additional functions.

I'm also using systemjs-plugin-json to properly load json object with timezone definitions inside moment-timezone library.

I hope this helps.

Doing a direct import will add ~1MB to your build size. Careful — Pian0_M4n, Jul 01 '19 at 09:43

HankCa · Answer 4 · 2020-03-18T00:18:51.683

8

I will update this for 2020.

$ npm install moment-timezone @types/moment-timezone

import moment from 'moment-timezone';

...

// do this - outside of any class is fine    
moment.tz.add('America/Los_Angeles|PST PDT|80 70|01010101010|1Lzm0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0');


...

someMethod() {
    const m = moment(the_date);
    ...
    const mFormatted = m.tz('America/Los_Angeles').format('YYYY-MM-DDTHH:mm:ssZZ');
}

Timezone defs can be found at https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json. I use this to define my own rather than read them all in.

edited Mar 18 '20 at 00:18

answered Mar 18 '20 at 00:08

HankCa

9,129
8
62
83

1

Thank you, this was very helpful. However, I found that the index.js file in the latest moment-timezone package loads all of the latest data. So, defining your own is redundant. – Brady Isom Mar 18 '20 at 20:20
Yes but then you are loading all of them unnecessarily. Not hard to add one extra line if that is all you need. At 10 extra lines the pre-defined solution may be better. – HankCa Mar 21 '20 at 02:11

score 0 · Answer 5 · answered Jun 28 '22 at 06:56

Use

import moment from 'moment-timezone';

This import fix a lot of strange issues on my project.

Why?

In moment-timezone package you can see

require("moment-timezone") === require("moment")
export = moment;

at the end of moment-timezone\index.d.ts file.

How to use moment-timezone in Angular 2 class?

5 Answers5

Linked