I know date ranges are a Bubble construct, and not a native Javascript object, but does anyone know if it can be done to create one in Javascript nonetheless? I have two lists of dates (START and END dates), each one corresponding to the item# on the other list, meaning #1 from each list should combine to make one date range, and so forth.
I’ve successfully edited lists of dates with the LitstItem Expression plugin, but haven’t been able to figure out how to use to construct date ranges.
Hi @petter: Yes, the Bubble date range object is just a two element array of JavaScript date objects.
If you desire to pass a date range to Bubble (inside of a plugin’s code or from Run JavaScript, or from the eval(x) step in List Shifter’s “Process List” action, for example), the object you pass looks like this:
[date_x, date_y]
Internally, Bubble interprets this two-element array of dates as a date range. The earlier of the two dates becomes the dateRange’s start, the later of the two becomes the dateRange’s end. (That is, the order of them does not matter.)
However, if in your own code you want to keep things tidy and ensure that date_x is always earlier than date_y (e.g., dateRange[0] is the start and dateRange[1] is the end), you can do something like:
var date_x, date_y, date_range = [] // we have two scalar variables and one array
date_y = new Date() // date_y is just some date
date_x = new Date() // date_x is just some date, but is *later* than date_y
// let's assume we want to use date_x as our start and date_y as our end, but we want to
// be anally retentive about having them in the right order, we could do a cool little one liner like this:
if (date_y.getTime() < date_x.getTime()) date_x = date_y + (date_y = date_x, 0) // swap the values of date_x and date_y if y is earlier than x
date_range = [date_x, date_y] // create the date range array
return date_range // return the date range to Bubble, as the last line in a run JavaScript Action or Expression element
// or, in the case of a plugin:
instance.publishState('some_state_that_is_a_date_range', date_range) // publish a date range
Thanks a million for putting that together, really appreciate it. Your explanations make perfect sense.
I’m hoping to use the ListItemExpression for this, because the number of dates can be high (easily several hundred), running a separate workflow for each of them risks crashing the browser window.
This is the basic workflow:
I start out with a list of dates set to 00:00, delivered by Calendar Grid Pro™
I use two different ListItemExpressions to add a number of hours/minutes to each of those dates. The lists returned by each of them is the START and END date in the range I want to build.
So far so good; the last step though, I wasn’t able to solve with Javascript, so it’s a messy hack involving out-of-sight repeating groups with elements inside that combine the dates into date ranges. Yuck!
My ListItemExpressions look like this, with Bubble’s expressions in bold:
value().setTime(value().getTime()+(Dropdown: From HH’s value * 60 *60 * 1000)+(Dropdown: From MM’s value * 60 * 1000)); I added some spaces as the forum formatting goes nuts over all the star symbols)
So, what I’m trying to achieve is to combine it all into one list of ranges, but my coding skills are rusty at best. I tried using the second ListItemExpression to combine them with the code below: It did return a list of date ranges, but they ended up adding the hours/minutes from the start and end time together, leaving ranges with the same start and end time:
[value(), value().setTime(value().getTime()+(Dropdown: To HH’s value * 60 * 60 * 1000)+(Dropdown: To MM’s value * 60 * 1000))];
I see what you’re trying to do, @petter. There should be a utility function for that. I’m building you one (won’t be in CG Pro itself until the next release, but I can add a new little plugin element that does what you want – it’s very hard to do what you’re trying to do properly outside of a plugin).
Hang tight and I’ll push a non-breaking update to CG Pro that contains the additional utility plugin.
However, if you did want to do this in the page what you’re trying to return is like this:
var start, end, hours, minutes
start = value()
hours = Dropdown: To HH's value * 60 * 60 *1000
minutes = Dropdown: To MM's value * 60 * 1000
end = start.getTime() + hours + minutes // Note: end is not a date yet! It's the number of ms in start, plus our desired added time and is an integer
end = new Date(end) // Now end is a date
// now return our date range:
return [start, end]
Hey @petter: Update your CG Pro plugin to version 1.9.2. You’ll find it has a new plugin element called “Date Range Builder”. Drop it on your page and read the docs. It think it does exactly what you need to do.
Note that, as it is its own element plugin, it’s a bit different from the “Utility” functions currently built into CG Pro. No need to call it with an action… It’s output will will update whenever its inputs change. So you can do stuff like this:
Note: Date Range Builder is designed to work on the same page as a CG Pro element… However, you can use it by itself. If it detects that moment is not loaded (it only needs the simplest version of moment as it does not need locales or moment-timezone or moment-range), it adds moment to the page automagically.
Let me know what you think and if you have any questions. Kind of thinking that it would be cool to have mini companion plugins like this that replicate all of the other “utility” features found in CG Pro.
And, like I said before, this feature will also be available as an action in the next version of CG Pro (“Utility 5: Construct Date Range List”), which is coming soon-ish.
@keith, this is brilliant! I’m at a loss for words actually that you’d go through all this just to help me out, and continually impressed with what you’re putting together! Thank you so much, I guess is what I’m trying to say
I’ll be testing this as soon as I arrive at the office!
