Add a date picker

Hello, I need help adding a date picker so that a user can choose a date and then from that it changes a variable in a query parameter for an API request to load in data corresponding with the chosen date? would love any suggestions.

Thanks,
Luke

1 Like

Are you working on mobile or web? On mobile, you can just use the Pick date flow function (available via the Marketplace). To pass the picked date to your API, you’d want to have a REST data resource configured (via the Data tab on the global toolbar) with an appropriate query parameter, and an All type data variable on your page.

Then, you should have a page variable to store the picked date, something like pickedDate.

Next, you’d connect the Pick date node to a Set page variable node, setting pickedDate to the picked date (use the Output of another node binding type).

Finally, you could tweak the data resource fetching logic by going to the Variables tab, selecting the data variable, opening its logic canvas and adding a Receive event node configured for the pickedDate changed event – so that whenever a new date is picked, the code immediately starts to fetch a new record with the updated query parameter.

Let me know if something is still unclear!

1 Like

@Harri_Sarsa thanks for the reply. So that all makes sense. I’m just having a little difficulty setting it up. Is there any way to share the project with you and get some assistance with this. I just need to get the picked date passed into the parameter.

I create a sample page that shows how to pick the date – see “Pick date example” under the Page section in Marketplace.

I’ll work on getting a sample page with a dynamic query param too!

@Harri_Sarsa Okay thank you. Appreciate the help

1 Like

Is there any thing similar for a web page? I have tried this approach to no avail.

There’s a web date picker component that is pretty much ready for release, I’ll try to fast track it for next week!

Hi Harri,

Do you have an update for the web date picker ?

Thank you !

Hi Harri,

Any news on the web date picker?

Thanks

You should find it via share token iwOpKO-E_U0D6-PL1Tuklg, sorry for missing this thread!

Thanks. I’ll give it a try.

Hello, how can I use the picked date output to fill it in an input field that has its value bound to a field from data variable without creating a new record (screen is in edit mode).

Thanks,
Husam

If you use Set data variable to set the date based on output of Pick date Flow function, it won’t create a new record, but just change the value of the existing record. Only when you use Create record Flow function a new Data record is added to backend. (Same goes with Update record: Before using it the changes will be local only and backend won’t be affected)

Hello, I am trying to use pick date but it does not work for me and for the iwOpKO-E_U0D6-PL1Tuklg, when I launch the page I can find it but I am not able to choose the date. Please do you have any idea how can I add the pick date on an input field so the user can choose a past or a future date.
Thank you

Hello, I am trying to use pick date but it does not work for me and for the iwOpKO-E_U0D6-PL1Tuklg, when I launch the page I can find it but I am not able to choose the date. Please do you have any idea how can I add the pick date on an input field so the user can choose a past or a future date.
Thank you

Hi! I’m assuming you’re using iOS – there’s a problem that iOS 14.4 changed the native date picker, and our date picker component needs to be updated and fixed to match.

3 Likes

Hello, thank you for your response. No, I am using the full-screen mode. the calendar shows me only the date of today and the other dates are disabled and as I already mention I am not able to choose the date.

Hmm. Thanks for the info, we’ll check in web as well when we tackle this bug!

1 Like

Hello, this is what I get. As you can see I can choose only today date and even when I choose it the calendar disappears.
Thank you

2 Likes

Hello, Harri … I am attempting to set up a date pick routine so that I can move the selected/picked date to my db ‘lastdate’ field … but am having no luck. I read your post and would appreciate your feedback and advice on proper logic.

In the Button Logic section, how and what do I enter for ‘Minimum Date’ and ‘Maximum Date’ in the Dialog/Pick Date logic? I see that the fields are required (and I don’t really need to specify a min or max date) but I can’t see how to enter dates … and what would make sense to enter here.

In the Variables/Set Page Variable logic, I am confused as to what to enter for the following:

  • Variable Name
  • Assigned Value

And under the ‘Select Binding Type’ section/Logic Node, do I choose ‘Pick Date’ or ‘Receive Event’’?
Under “Select Node Output”, which do I choose … ‘Pick Date/Picked Date’, ‘Picked Date’ or ‘Event’?

You mention in your post, “To pass the picked date … you’d want a resource configured with an appropriate query parameter, and ALL type data variable on your page.” Could you explain this please and provide and example, if possible?

Thank you, Harri!

Tony