Air Date/Timer picker: need to access the date range in a conditional

[miriam]

I’ve been using and enjoying Air Date/Timer picker for a few weeks, but I’ve just now run into this problem: I need to be able to access the value of the Air Date/Timer picker so I can run workflows based on the condition of what time it is displaying.

Here’s an example:
If my AirDate/Time picker’s selected range is [the last 90 days], then I want [given action to run]

Similarly:
If my AirDate/Time picker’s selected range is [the last 90 days], then I want [given conditional property to change when true]

I’ve been able to summon the date range in the field Initial range start date by writing “Current date/time + days: -90”. See below:

But when I go to write something similar in either a conditional field or in the “Only when” of an action, I’m unable to bring in the specification of the specific date range I’m looking for. See below:

How can I reword the “when” part of a conditional or an action to require the conditional/action to read the relative date range and behave accordingly? Example: if the AirDate Picker’s selected range:start is -90 days, and the AirDate Picker’s selected range:end is today, then [conditional triggered].

Let me know if I can provide any other context.

[Stephan]

Hello @miriam,

Thanks for reaching out.

There may be several workflow variations that could help you achieve your intended result. I’d like to show you to a simple approach that might suit your needs, involving the use of Custom State.

To begin, create a Custom State with a simple text value, as demonstrated in the screenshot below:

Next, within the workflow where you aim to set the range for the last 90 days, incorporate an action to modify the Custom State’s Value. In my example, I’ve updated it to “last90days”, as shown here:

Following this, I’ve introduced a blank text element with added conditional logic to alter the text based on the Custom State’s value, illustrated in this screenshot:

Let us know if you find this method useful. For a comprehensive understanding, I invite you to visit our test page. There, select “Range Selection” and click the “click me” button for a practical demonstration.

If you have any questions or need further clarification, please don’t hesitate to reach out.

Best regards,
Stephan

[miriam]

Hey, @Stephan , thanks for your quick answer. Here’s where that doesn’t fully meet my needs with additional context.

I’m working with two user experience options of picking dates: Absolute Dates and Relative Dates. (see image below)

For the Absolute Dates, I’m using the AirDate/Time Picker design element. For the Relative Dates, I’m using a repeating group of relative date options.

You know what happens when the AirDate/Time Picker design element is selected already — the calendar drops down and allows my user to select a date range.

Here’s the workflow when my user selects a relative date option. It sets the date range without needing to unfurl the calendar UI.

I can make a custom state that indicates what relative date range has been selected (and I have). But there’s no way differentiate when the AirDate/Time Picker’s value change comes from clicking directly on the Air Date/Time Picker calendar and when the value changes elsewhere, meaning there’s no way of clearing the custom state of the relative date range when the new date range is absolute.

As far as I can tell, I can fix this problem if:

1. I could customize the workflow of what happens when I click on and update AirDate/Time Picker’s design element
2. I could show the AirDate/Time Picker range calendar when a different design element is clicked (that I could then create a workflow for to define the custom state)

But as far as I can tell, neither option is accessible to me.

Do you see a solution for my conundrum?

[Stephan]

Hello @miriam,

Thank you for your patience and for providing additional context about your situation.

Regarding your inquiry, you can accomplish that with Bubble’s workflow. However, be sure to explore other ways to achieve and implement it in your application.

Start by creating a new custom state for your page, naming it “isRelative”. This state should be a boolean(yes/no) value that indicates whether the current selection is “Absolute” or “Relative”.

When you click on one of your three buttons, change the state to “yes” as well.

After that, you can use the Plugins event “Air date time picker Value Change” to set the value of ‘isRelative’ to “No”, only when the current ‘isRelative’ is Yes.

By using this custom state, you will always know whether the value in your Air Picker was chosen from Absolute or Relative. You can check the page and workflow on this test page: Seanhootsdemopro | Bubble Editor

I hope this information is helpful and has answered your inquiry. If you have any further questions regarding plugins, please don’t hesitate to reach out to us.

Looking forward to your reply.

Best regards,
Stephan