Forum Documentation Showcase Pricing Learn more

New Plugin: Relative Time with Moment.js


#10

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:


#11

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


#12

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.is/page?type=page&name=replacerelativetime&id=louisforum&tab=tabs-1

Louis


#13

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?


#14

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


#15

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


#16

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?


#17

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?


#18

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


#19

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.


#20

Hi @louisadekoya, okay no problem!

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

Thanks
Andy


#21

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.


#22

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?


#23

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.


#24

@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?


#25

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


#26

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/moment-precise-range-plugin@1.3.0/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.


#27

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?


#28

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


#29

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