How do you use moment.js inside a view in Ionic?

Hey guys, how do you use moment.js inside a view in Ionic 3. I already loaded moment in my ts file.

What I’m looking for {{ store.created_at }} to output something like Martes 23.

Thank you all!

1 Like

Just so you know: The consensus on this board seems to be that date-fns is a better library right now than moment.js. It’s what I use, anyway. If you need timezone, moment.js is better. If you don’t need timezone, and you want a faster, lighter bundle, date-fns is better.

Thank you, i’ll check it out!

Also, how do you integrate it into your views? (I’m interested in the localization)

I don’t know what this means.

Date-fns works with local timezones just fine, just not necessarily arbitrary ones. Its i18n documentation is here.

Isn’t the issue that a timezone in moment can contain multiple offsets, while date-fns just uses offsets? I don’t need anything fancy, so I haven’t looked at this in detail.

inside your html using -> {{ }}

But what’s the question? What pipe to use?

Hmm. I’m not sure what you mean by “multiple offsets”. The biggest PITA when dealing with timezones is that many of them haven’t behaved consistently over time. The GMT offset of today in a certain TZ might not be what it was exactly 10 years ago today, and most JavaScript TZ algorithms just punt on that and pretend that it would have been. moment may get that right, I’m not sure. Here seems to be the date-fns issue tracker on the topic.

BTW, here’s my date-fns-based formatting pipe, which incidentally seems to have happened in a milestone thread.

Daylight Standard Time and Daylight Savings Time in the same timezone package. Functions that modify the GMT offset.

If creating a specific date with a specific GMT offset is all that’s needed, yes, date-fns can do that. You can just stick a +XX or -XX on the end of an ISO8601 string to indicate GMT offset.

Can I say “use this offset from Jan to June, and this other offset from July to December”?

Yes, exactly. I’d like to know which one to use within the html views using date-fns.

Oh, now I think I understand what you mean by “multiple”. Since an ISO string is by definition a single instant, only one GMT offset makes sense for it, so I guess the answer would be “no”. But Jan/June and July/Dec is the easy part of timezones. As I was alluding to earlier, if you’re really going to be able to do accurate arithmetic with dates in a timezone, you have to worry about the fact that (for example) today Indianapolis is UTC-5:00, whereas 25 years ago today it would have been UTC-4:00, yet 50 years ago today would have been UTC-5:00 again.

Yeah, fortunately my primary interest is time stamps for cache coherence. So format(stamp, 'X') is almost the only thing I use. Except for the ago pipe, and I’m thinking I should modify your pipe to an ago pipe because of the i18n issue you mentioned the other day.

@afeldman you can just use the standard Angular date pipes, or the one @rapropos just posted. Unless you’re doing something nonstandard. Or maybe I still don’t understand your question, sorry.

If you do want to use moment specifically (I have been using it in my projects, mostly because I didn’t know of the existence of date-fns so I went with moment and it’s working fine for what I need).

Install the node package
npm install moment --save

// this part is probably optional if you don’t need translations
Import into app.component.ts
import moment from 'moment';

Set locale on platform ready
moment.locale('en');

Import into any components you need and start using it
this.timeAgo = moment.utc(this.note.created_at).fromNow();

3 Likes

How do I add that into my html view?, what I want is to translate dates into Spanish ie: Wednesday to Miércoles.

date-fns’ format has i18n support, and a Spanish locale in particular. You don’t need all the bloat of moment for this.

Could you provide me with an code snippet example if that’s not too much to ask?

I just did. Read the link.