# Air Date/Time Picker Plugin **URL:** \ **Category:** Plugins\ **Created:** [July 11, 2020, 10:06pm UTC](https://forum.bubble.io/t/air-date-time-picker-plugin/101376 "2020-07-11T22:06:34Z")\ **Posts on this page:** 1\ **Showing post:** 2
**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\ **Post date:** [July 12, 2020, 3:28am UTC](https://forum.bubble.io/t/air-date-time-picker-plugin/101376/2 "2020-07-12T03:28:34Z")
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](http://forum.bubble.io/t/live-bubbling-with-keith-lets-talk-about-dates-explaining-the-basics-of-dates-in-bubble/64195) 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: 1. 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: ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/e/3ec56d3739ed62932adffe271829ede24addbcf1.png) This returns to us a number and we can store this number somewhere if we want to. 1. 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. 2. 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). 3. 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](https://list-shifter-demo.bubbleapps.io/version-test/pick-date-range-adtp?debug_mode=true) (And here’s the [editor for that](https://bubble.io/page?type=page&name=pick-date-range-adtp&id=list-shifter-demo&tab=tabs-1).) 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: > **[Date Range Picking: "0" Night Pick with CG Pro](https://list-shifter-demo.bubbleapps.io/version-test/pick-date-range-cg-pro?debug_mode=true)** > > Bubble introduces a new way to build a web application. It’s a point-and-click programming tool. Bubble hosts all applications on its cloud platform. (And here’s the [editor for _that_](https://bubble.io/page?type=page&name=pick-date-range-cg-pro&id=list-shifter-demo&tab=tabs-1).) You can learn more about Calendar Grid Pro (including, literally _hours_ of tutorial content) in the [support thread for CG Pro](http://forum.bubble.io/t/calendar-grid-pro-calendar-generator-date-picker-date-range-picker-like-airbnb-grupz-com-now-at-version-1-6-1-fixes-a-safari-compatibility-issue-minor-bugfix/54254). --- _[View the full topic](https://forum.bubble.io/t/air-date-time-picker-plugin/101376)._