Forum Academy Marketplace Showcase Pricing Features

New Plugin: Relative Time with Moment.js

Hi All,

I have just published my first plugin. It addresses a request that I’ve seen a few times here in the forums. The plugin uses the excellent Moment.js to display a date and time relative to the current time. It allows you to express dates as ‘time ago’, e.g. “2 days ago”, “one week ago”, “a few seconds ago” and so on. It even works for future dates - “in a month” or “in 2 days” etc. So you’ll be able to show that a message was “sent 2 hours ago” instead of simply showing the created date itself. I hope a few of you find this useful.

A big shout out to @mishav for helping get over a blocking issue.

Plugin page: https://bubble.io/plugin/relative-time-with-momentjs-1492117803371x414476256717570050

Demo page: https://louisbubbleplugins.bubbleapps.io/version-test/relativetimedemo

26 Likes

This is great! Thank you.

2 Likes

Awesome plugin, @louisadekoya! I was just setting up custom states and many conditional statements to get the ‘time ago’ format. This will make things much easier! Thank you! :slight_smile:

2 Likes

Thanks, @JohnMark.

Yes, @fayewatson, so was I - until I found Moment.js. Glad you like the plugin. Thanks.

1 Like

Good stuff! I was building the same thing using jqeury-timeago but wasn’t especially pleased with how it turned out. This looks like a better implementation!

1 Like

Awesome!

1 Like

This is great.
One function that I would love would be conditional formatting based on these timers.
For instance, show or hide a group when a timer = 0.
I played around with this a bit, but couldn’t achieve it with this element.

Maybe I’m missing something obvious?

Thanks,

Nathan

1 Like

Thanks @stvnsnthn . That is an interesting use case. It’s not one that I had considered for this plugin to be honest, I guess because I don’t really think of the plugin as a timer, though I see now how one might see it as such. It is more of a visual element to display a date/time in the ‘time ago’ format.

I see however that Moment.js has a ‘diff’ function to return the difference between two dates/times in minutes, which could probably be used for what you’re after but, it does feel like a different plugin, or at least a different element. If enough people want this I can dig into it some more, but I think it is already fairly easy to compare two dates in Bubble without a plugin and use the result in a conditional statement. Is there a particular reason why this wouldn’t work for your use case? Or have I completed misunderstood your request? :slight_smile:

Thanks,
Louis

This is awesome. Solves something that had been one of my ongoing pain points. Much appreciation!

1 Like

Hey Louis,
I’m currently setting a custom state “current date and time” every second.
I use this for an in-page countdown timer (this thing “expires in X minutes).
I also use conditional formatting for group visibility.
For example: when (thing’s creation date + X seconds - “current date and time) > 0 Group A is visible.

Your plugin greatly simplifies the handling of minutes, hours, days, etc vs using modulo to handle remainders.

Perhaps this is an opportunity to rethink my visibility conditions. :slight_smile:

1 Like

hey @louisadekoya, just want to say thanks so much for the plugin, very very easy to set up and works terrific!

quick question, is it possible to change the language on the “days ago” or “minutes ago”?

I’d pretty much only want "1d " to represent 1 day ago etc.

Thanks so much again!

Randy

Hi @randyh628,

Thanks. I’m glad you find the plugin useful. Unfortunately the plugin doesn’t currently support this. What you could do though, is use find & replace. It’s not very efficient as you’ll have to think of all the possible variations, but you should only have to do this once. Here is an example, albeit incomplete - https://bubble.io/page?type=page&name=replacerelativetime&id=louisforum&tab=tabs-1

Louis

1 Like

Hi @louisadekoya

Great plugin! I have a few of these running in my app, but after just pushing an update live, without doing anything to the relative time elements, they are all showing “invalid” date now.

I’ve had a good look and cant see anything wrong/different with their set up, or the date’s being referenced.

Any ideas why they would all show invalid all of a sudden?

Hi @andrew.illingworth91,

I’m sorry to hear you’re having trouble with the plugin. I haven’t had any other reports of this and all of my instances are okay. Have you recently added or upgraded another plugin to your app/page?

You say this happened after you deployed to live. Are you saying that it works in test but not in live? If you see the issue in test also, can you perhaps duplicate your page or app and remove other plugin elements from your page one at a time? If you’re using a date picker other than the built-in one can you try replacing it with the original built-in one to see if the issue is still there?

If none of the above yields any fruit, please PM me a link to your page - editor and preview and any instructions to see the issue. I should be able to take a look later on in the day.

Louis

Hi @louisadekoya

No problem! It has worked for a long time and is a great tool!

You were right, i had recently subscribed to another plug in. After cloning my page and deleting those elements (3 of them) the correct relativetime was shown again.

The elements are just pie charts, which are quite crucial to my app, is there any way they can co-exist?
They are not looking at the same data, or even database.

Plug in below (the paid version)

Capture

Thanks
Andy

Hey @andrew.illingworth91 and @louisadekoya,

I think this likely falls under the same issue as the thread below… Andy, Chart Tools also uses Moment.js to handle date based data. So we are probably seeing a clash as both plugin scripts make a grab for the Moment.js library. Do you see any errors in your browser’s console? (Chrome: Right-click > Inspect > Console)

Louis, maybe worth us getting some momentum behind that thread and logging bug reports. Would also be interesting to see what happens when only one of the plugins calls the library - we could setup a test on that if you like?

Hi @edwardbutcher, thanks - I was just going to message you to ask if your plugin uses Moment.js :slight_smile:

I think I have a way to isolate the script in this case, because there’s a way to check if moment is loaded.

<script>
    if (!window.moment) {
        document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js">	<\/script>');
    }
</script>

@andrew.illingworth91, can you please try the latest version (2.0) and let me know if it fixes the issue, please?

1 Like

Hi @edwardbutcher , @louisadekoya

Thanks for chasing this up so quickly! Just to add to things, i may have stumbled upon the original issue. I had the pie elements within 1 group focus and just happened to replace the focus group with a normal group element for design purposes and it seemed to fix the problem, all the relative time’s reverted to the correct value.

Now all working correctly, and in my editor mode when i place the pie charts back in a group focus it makes the dates invalid.

Using this version

Hope that helps, i’m happy to update to the new version to test if that fix’s the issue?

Thanks
Andy

Hi @andrew.illingworth91, thanks for the update. I suspect in that case that you had a different issue, not necessarily related to the plugins.

If you don’t mind, please upgrade to the new version and let me know if it works with your current setup. You can then change again to a group focus to see if it resolves your original issue, though I think it is unlikely.

Hi @louisadekoya, okay no problem!

You were right, I upgraded to the new version and the issue remains.

Thanks
Andy