Date Range - how to add buttons inside the left sidebar for predefined ranges

I have the date picker in a component. I am trying to add buttons to quick select things like “this year”, “last year” etc. Ideally I want them in the left sidebar. The issue I am facing is that the variables defined on the component level are not accessible for some reason when the button is inside the left sidebar, but they are if the button is outside.

Example structure

How do I add buttons here so they actually work?

Just adding a reply in hopes of anyone having an idea about this :slight_smile:

Hello @wealthsyndy

The Date picker - value is accessible from the left side bar as long as it’s in calendar mode only. You can add a button to the left sidebar to quick select the date… You can also easily access the variables from the Input Date Range component from the left sidebar by creating the variable and exposing it outside the component:

Then create a component workflow to change the variable and allow execution from outside:

Lastly add the execute component action to the left sidebar button workflow:

So I do not think calling global workflow will work when a date range picker is in a component. The global action would require you to specify a component, which unfortunately will be different on each page, and I do not think there is a way to pass a reference to a global workflow to specify which component it is used for. So this will only work to build on each page without the possibility of date range being in a component.

Is there a reason the left side has no access to even the calendar to set the date?

It’s not a global workflow, it’s a component workflow that you can use. You can expose the variables from Input Date Range, the variables are supposed to be scoped, but you can expose them by following the steps above. Left Sidebar is a complex part of the Date picker element, that’s why you need to expose the variables to access from it.

Oh, it worked! :star_struck: I totally missed the part where I was executing a “component” workflow, not just a workflow!

Thank you!

1 Like

OK maybe I spoke too soon. So the execute action I have this (this is inside the component, outside of the date range):

Because somehow I need to set the value of the date range. The issue is that somehow it references the date range input in the original component not the current one. So If I put 2 components that inside have the date range the second component changes the date of the first one. And the component does not work at all after I load it in my project…