Forum Academy Marketplace Showcase Pricing Features

New Plugin: Relative Time with Moment.js

Hi @andrew.illingworth91, yes, it is unlikely to be a problem with the plugins. It sounds like something about switching to a Group Focus invalidates the date you’re sending to the Relative Time element. If you share a link to your app, either here or in a private message, I can take a look. You will have to switch to a Focus Group again so that I can observe the issue. Otherwise, use the debugger to check the date you’re passing to the element and make sure it is a valid date.

Hey @louisadekoya! My plugin appears to be showing “invalid date” as well now, and I think it only started after I allowed Bubble to update to the most recent version with modified date control. Any idea how to fix this?

Hi @jordan.shotwell, that’s interesting as I’ve updated a couple of my apps to the new Bubble version and I’m not seeing this. Is it possible that the modified date control means that you’re now passing a date that is actually invalid to the plugin? Something like 30th of Feb or 31st of Sep for example?

If you only recently moved to the new Bubble version, would you mind temporarily reverting just to confirm if that is what has caused it?

Otherwise, as I advised above it’s probably worth doing some debugging to see what dates are actually being passed to the plugin element. Also, if you want to send me a PM with the app details, I can take a look tomorrow.

@louisadekoya

Thanks for this plug in, very usefull! i’m trying to use this as a countdown tool, so for example i want to show a text which shows days, hours, and seconds, till arrival of something, in real time.

But i see that this element can only show days or weeks or months at a time, is this correct?

is it possible to extend this plugin so that moment().startOf(‘week’); is available inside the search constraint?

This is correct. The plugin doesn’t do this. You can however do what you need without the plugin, using the same library used by the plugin, plus one other related library.

You will need to put the following in the page header of your page

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment-precise-range.min.js"></script>

You will also need the Toolbox plugin to run some javascript. Place the javascript to bubble element on your page and set things up similar to what I’ve done here.

By the way I did a search for countdown here on the forums and I saw that you got a couple of good answers to your post here. I’m curious as to why those don’t work for you.

Not easily I’m afraid. Not for me anyway, as my JS and plugin dev skills are very limited, unfortunately. Can you tell me a bit more about what it is you’re trying to achieve with this, though?

Hi @louisadekoya, I’m getting this error on my web browser:

Hi @JohnMark,

My attempts to prevent conflicts with other plugins seem to have introduced other errors. Please update to the latest version 2.1.0 and let me know if that has fixed the issue.

Thanks,
Louis

1 Like

Yes it fixed the problem. People have to CLOSE their browser to get it fixed. I will look later if it bring other issue. Thanks.

1 Like

I’m loving this plugin @louisadekoya, thank you for offering it for free.

This may be outside of the scope of this plugin, but I have another use case: the option to add a second date to use as relative time instead of current date time.

Let’s say you have a car. You have a PURCHASED date, and a SOLD date. By allowing a dynamic second date in the plugin, you could calculate something like " you owned this car for 2 years".

Is this a possibility?

Hi @petter, thanks. The plugin doesn’t currently support this feature. It was my original intention to include it right from the start but I couldn’t quite make it work. I’ll take another look during the week and let you know.

1 Like

Awesome @louisadekoya, thanks!

Just started getting a error for every instance of Relativetime in my app. Just checked the demo site and the same error is occurring.

WARNING: Error parsing plugin code for update (Relative Time). Please check
function(a,b,e){var c=b.date_from;b=b.interval;var d=a.data.update_me;a.data.get_relative_time©;null!==b&&(null!=a.data.timer&&(clearInterval(a.data.timer),a.data.timer=null),a.data.timer=setInterval(function(){d©},b))};

This seems to be happening everywhere. I’m currently getting “Error parsing plugin code” errors thrown with Expressions plug-in. There seems to be an overall Bubble bug with plugins at the moment… It’s pretty nasty. I assume the issue is being worked on (another user submitted bug report based on observations over in the Air Date/Time Picker thread…

Thanks for pointing out the error. Looks to have been resolved now (by the Bubble team).

Just confirming that I ran into this bug as well but it seems to be resolved.

It first manifested while I was using version 2.0.0 of this plugin. Upgraded to the new version, 2.1.0 and the issue persisted. But now things are working properly, so also of the belief it’s a Bubble bug. :slight_smile:

1 Like

Hi All,

I have updated the plugin to add:

  1. The ability to hide the suffix. So you can have the current value as “2 days” instead of “2 days ago”. Also works for the prefix, so “2 days” instead of “in 2 days”.

  2. The ability to express your date relative to a defined baseline date instead of current date/time. See @petter’s post above for an example use case. Thanks for the suggestion, Petter.

I have updated the instructions and demo page. I hope you find the update useful.

Louis

3 Likes

Making a great plugin even better. Really appreciate those changes! :smiley:

1 Like

Thanks a lot, really great plugin!

I’m using the Language feature in Bubble, so I’m using Find and Replace to change the words in the plugin into the local language. For those who want the same, here are the strings used:

Range Key Sample Output
0 to 44 seconds s a few seconds ago
44 to 44 seconds ss 44 seconds ago
45 to 89 seconds m a minute ago
90 seconds to 44 minutes mm 2 minutes ago … 44 minutes ago
45 to 89 minutes h an hour ago
90 minutes to 21 hours hh 2 hours ago … 21 hours ago
22 to 35 hours d a day ago
36 hours to 25 days dd 2 days ago … 25 days ago
26 to 45 days M a month ago
45 to 319 days MM 2 months ago … 10 months ago
320 to 547 days (1.5 years) y a year ago
548 days+ yy 2 years ago … 20 years ago
3 Likes