Complete Newbie - How to connect buttons to Datepicker?

[Joma]

Hello everyone.

I was given this tool to connect some data reporting from SQL DB to HubSpot.

everything was connected and setup before me, the connection to datasources, the JS that updates the queries, and some UI.

What i needed to do is to stick a bunch of reports into the Appsmith which i did.

The app has an input as From and To datepicker to understand what date span to use when pulling data from SQL.

Now i need to add buttons that when clicked will change dates in both of the datepickers. The buttons are last 7 days, last two week, last month.

Is there a guide to this? or can someone please point out step-by-step what needs to be done.

I am a complete zero in JavaScript. I am good in Python and Java.

Thank you

[Laguna]

Hey @Joma! Welcome to Appsmith.

To do this you’re going to need to set the To datepicker to the current date, and then do some date math to set the From datepicker to the appropriate value. You can use the moment library to accomplish this.

Please take a look at this sample app for examples on calculating dates.

[Joma]

Can’t I automatically assign dates: TO datepicker = today(), From datepicker = today() - 1month with a single click on the button?

and to automatically assign those to both datepickers that i have?

the layout is in the picture

[Amelia]

Hello Joma! You cannot assign values to widget properties like this, because Appsmith is reactive. You will need to use the storeValue() method to achieve this.
Here is a sample app that demonstrates how to set the date of a DatePicker widget at the click of a button. Please fork it to check the code and let us know if it helps.