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.
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!
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!
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.
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?
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.
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
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?
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.
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.
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?
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.
Hi @Andy_i, 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.
