I saw your other message (over in the AD/TP thread) as well. The issue you’re having is a user headspace error (mostly). Before we continue, because you’re working with dates here, you might want to first make sure you understand what a date is. Go watch this (I dare say) excellent introduction first and then come back here.
The part that isn’t a user headspace error is that, in range mode, AD/TP doesn’t let you select a “zero-night” range (a range that starts and ends at the exact same time). However, my commercial plugin, Calendar Grid Pro does let you do this. (CG Pro is not, however, a traditional generic date picker though it can be used as such.)
Also, most range pickers for Bubble are lacking in that they don’t really return back to you all of the things you’d potentially want.
That being said, the issue you are having is that you’re thinking about it wrong. The picker is not the thing giving you a “number of nights” vs a “number of days”. It’s you that’s doing that. And you can decide to interpret the selection of the range however you want to.
What you’re missing is this: The only difference between “the number of nights” and “the number of days” is just that… One is just +1 of the other, eh?
The more-or-less accepted standard for date range picking (when we are “snapping” the pick to whole days) is this:
- The start date and end date of the range are snapped to the very beginning of the days in question.
- The distance between these two dates (expressed in days) is the number of “nights” of the booking/reservation/whatever-you-want-to-call it.
- The number of “days” as you’re thinking about it is just that previous number, plus one.
- That is, a zero night pick returns to us the exact same moment in time for both the start and end of the reservation. The distance between these two times is zero. We interpret this to mean that the user intends to use the property in question just for this selected day. And so, when we add 1 to 0, we get 1 day.
NOW, the next issue you run into is, “HTF do you get that duration right in Bubble?”
Because this simple thing of getting a number of any time interval within a date range in Bubble is simply not something that Bubble makes easy (for reasons that are impossible to fathom… Bubble is ostensibly for people who know scant little about mathematics, web application development, computer science, etc., and yet dangles hinky features in front such users and then doesn’t build them out in a user-friendly way… but I digress, eh?).
In this case, dates are dates (which are hard enough to understand – many JS developers do not understand JS dates at all) and the “interval”/duration feature in Bubble is basically worthless computationally – it’s only good for formatting output.
So, anyway, here’s how you can get the distance (in any desired time interval) between two date objects in Bubble. This is going to sound “hacky”, but it’s a perfectly valid way to do it in vanilla JavaScript (though in JavaScript world, most of us would probably turn to a library like moment to make this easy-peasy).
Some facts:
- We can turn a date object (like the :start or :end of a Bubble date range) into a number representing the number of milliseconds since the Unix epoch. We accomplish this using the
date:extract as Unix operator:
This returns to us a number and we can store this number somewhere if we want to.
-
Given the start and end dates converted to Unix milliseconds format, we can subtract those values to find the time difference between them, in milliseconds.
-
Then, we can convert that milliseconds value to whatever other time interval we want. For “days”, the conversion is 86,400,000 milliseconds/day (24 hours/day * 60 minutes/hour * 60 seconds/minute * 1000 milliseconds/second = 86400000 milliseconds/day).
-
Remember that in a zero-night pick,
I demonstrate this in the page here, which also shows how you can’t select a “0-night” range in Air Date/Time Picker (which you already knew, of course).
Here’s that in run mode (go here and pick a date range):
https://list-shifter-demo.bubbleapps.io/version-test/pick-date-range-adtp?debug_mode=true
(And here’s the editor for that.)
In contrast, I also show a page using Calendar Grid Pro (again, not exactly the same thing as Air Date/Time Picker as it has rather different goals) to pick the range and how, because it publishes a lot more useful outputs, it makes this computation much simpler.
Here’s the CG Pro version, run mode:
(And here’s the editor for that.)
You can learn more about Calendar Grid Pro (including, literally hours of tutorial content) in the support thread for CG Pro.
