No, I’m not going to look at your app. Here’s the point:
You have a value. Let’s call it “A”. This is what’s known as a variable, right? Variable A has a type.
In Bubble, variables are most commonly found as Fields in a database object, but you can also have “local” variables such as Custom States stored on an object. A value that we want to store in a variable may come to us from many sources: we might compute a value ourselves and shove it into the database, or a user might supply us with a value via an input, or we might retrieve a value from the database transform it in some way and do something with it.
Let us say that “A” is of type number. You want to know what number is “10 more than A”. Well, that number is just “A+10”, right?
Now let us say that “A” is a date. Dates are more complex objects, but Bubble provides us with a variety of operators for working with them. You want to know what date is “10 days more than A”. In Bubble, that looks like “A+(days):10”.
There is also a “date range” type which is even MORE complex. It’s like the “User” data type in your database. You can’t just print a “User”, right? it has a lot of different fields of various types. But you can print User’s First Name.
Date ranges are like that. A “date range” is also not printable as text. But we can construct and manipulate date range objects anyway. The way this is done is by specifying two different dates.
Let’s look at an example: Here, I’ve created a Text element and then added two Custom States to it. One of these of type date. The other is of type date range:
You will note that “SomeDate” (the date type variable) is currently set to 5/5/2012. This is like YOUR situation. You have a date. In your case, a user supplied it to you via an input.
So both of us have a date. Hooray! What can we do with that date? Lots of things. In your case, you want to know “what date is 10 more days than SomeDate?” Also, you want to construct a date range object that represents the time period from SomeDate to “SomeDate plus 10 days”.
Both of these things are possible. Here’s how we can find the day that is 10 more days than SomeDate (this is exactly like what I did previously with “Current Date/Time”, right?):
In run mode, this will show us:
Groovy. We have two dates!
You ask, “How can I construct a date range object from those two dates? I need to take those dates and store them in the database or something.”
OK, recall that there’s a custom state on my text object of date range type. Let’s put a value in there that represents the date range between SomeDate and “10 more days than SomeDate”. We can do that in a workflow. So I’m just gonna create a button that, when we click it, constructs a date range object and shoves it into that custom state. (This is just like what you want to do, except you want to write the value to the database. But you know how to do that.)
Here’s the button:
And here’s the workflow I associate with that button (this is what will happen when the button is clicked):
Hmm… How do I represent a date range object? Here’s how: We take two date values and combine them with the ← range → operation. So in our case we want SomeDate ranged with SomeDate+10 days:
Ok, so SomeDate and then range with SomeDates+(days):10… Let’s try to set that:
Hey, wait a minute… Where are all my date operations? Well, because of the way expressions are evaluated in Bubble, the “+(days)” operation and others are only available in the first field of the ← range → operator. Not a problem, we’ll just do it like this:
So let’s see if that really constructs a date range object:
See what I did there? As I said, date range objects are not printable, but we can understand them as a “start” and “end” date. Now, when I run this page, I initially see this (there is no date range stored in this element, so we’re just gonna see blanks:
So now I click the button. Clicking the button makes a date range and stores it in this element’s “ADateRange” field. So now we see:
Hooray! Now you know how to make date ranges!