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.
The process of calculating the number of days between two dates includes:
- Calculating the formula between two dates
- Calculating a rental price over a period of days
- Saving dates in your database
Full Transcript of Tutorial
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.
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.