How To Calculate The Number Of Days Between Two Dates in Bubble.io

Beginner How to’s

28th of October, 2022

This guide will teach you how to calculate the number of days between two separate dates in Bubble. These can either be from dates stored in your database, or from elements on your page. It’s an essential feature if you’re interested in building a booking app, or if you’d ever like to calculate the number of days since someone signed up to your platform.

1. Calculating the formula between two dates

Thankfully, this is one relatively straightforward process. In an example application, we’re going to look at a marketplace for boat rentals called Boast, Boats, Boats.

At this point, the marketplace only allows users to view boat listings but not yet make a booking. On the page, you’ll see that there’s two existing date/time picker elements; one is known as the ‘from date’, and the other as the ‘to date’. These date/time picker elements will allow users to select a period in which they’ll be renting a boat on our platform.

What I’d like to do with our date/time picker elements is calculate the total days between the ‘from’ date and the ‘to date’, then find the total cost of the rental based on a boats daily rate.

Let’s open Bubble and set this up.

With my Bubble editor, you’ll see I have a text element below my two date/time pickers. It’s within this text element that I’d like to calculate my formula.

If I choose to insert dynamic data, I’ll start by referencing the value selected in my ‘to’ date/time picker. Then from here, I’m going to subtract the value selected in the ‘from’ date/time picker.

If we were to run a preview of our app, you’ll now see that I choose the ‘from’ value to the 17th, then set the ‘to’ value to be the 19th, our text element will now display the number two as there’s two days between these dates.

If you’d like, it’s also possible to format this number as hours, minutes, or seconds. In my example, if I was to format this formula to display the count as hours, you’d now see that the same two-day period is now displayed as 48 hours.

2. Calculating the rental price over a period of days

Now that we understand how to calculate the number of days between two dates, we can take this one step further and calculate the total cost of renting something over a period of days.

When it comes to displaying the total cost of a rental, I’ll once again add another text element to my page. Within this text element, I’ll choose to insert dynamic data, then perform a calculation.

Within the formula, I’ll once again start by referencing the ‘to date’, then subtract from this the ‘from date’. I’ll choose to format this as a number of days, then we can multiply this number by the current rental products daily rate.

Finally, we can format the calculated number as a currency, allowing us to see a dollar amount.

If we were to take a preview at our application once again, we’ll see that when we select to rent a boat that costs $100 per day, for the space of two days, the grand total is now $200.

Subscribe to Building with Bubble Newsletter

3. Saving dates in your database

Once you’ve performed a calculation on a series of dates, how is it possible ot store this data in your database?

If were to open my data tab in Bubble, you’ll see that I have a data type called ‘booking’. Each time a user books a boat from our marketplace, I’ll create a new entry in our database.

Within our overall booking data type, I have a field that stores both the total number of days for the booking, the actual dates that someone has booked, as well as the total cost of the booking.

Back in our design tab, I’m going to add a button to my page. When this button is clicked, we’ll build a workflow that creates a new booking in our database.

Once in our workflow tab, we’ll select the action to ‘create a new thing’. The type of thing we’ll want to create is a booking.

Now, we’ll just need to match the fields in our database with the relevant fields on our page.

I’ll start by registering the total booking dates for this rental. This will be set as the values selected in my date/time picker elements.

Next, I’ll then perform a calculation to store the total number of days that someone has booked.

Finally, I can then perform a calculation to determine the price a user will pay for this booking.

And just like that, we’ve successfully built a feature that allows user’s to make a booking within our marketplace app.

As you can see, it’s never been easier to calculate the number of days between two dates, all without having to write a single line of code in Bubble.

Get Bubble Crash Course for FREE

Related blog posts

How to Setup Your Custom Database in Bubble

How to Setup Your Custom Database in Bubble

How To Create Multiple User Roles In Bubble.io (And Restrict Features)

In this post, you will learn everything about creating multiple user roles, then how to restrict features to select users.

How To Use ‘Intersect With’ Between Two Lists In Bubble.io (Complete Guide)

In this guide, you’ll learn how to use the ‘intersect with’ operator inside of Bubble. To put this feature simply, it allows you to recognize if items from two separate lists overlap with each other.

How To Create A Leaderboard Feature That Ranks Users In Bubble.io (Complete Guide)

In this guide, you’ll learn how to create a custom leaderboard feature with Bubble. Leaderboards are a great way to drive user engagement, as well as encourage certain behaviour within your app.

This website uses cookies. Cookies are used to collect information about site visits, improve website performance, and offer relevant content and ads to users. For more information, please see our Cookie Terms of Use. Read more.