Add a date picker

Luke_Jamison · February 12, 2020, 7:40pm

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

Harri_Sarsa · February 12, 2020, 8:29pm

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!

Luke_Jamison · February 12, 2020, 11:24pm

@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.

Harri_Sarsa · February 13, 2020, 10:03am

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!

Luke_Jamison · February 14, 2020, 11:47pm

@Harri_Sarsa Okay thank you. Appreciate the help

Eduardo_Jaramillo · April 25, 2020, 12:50am

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

Harri_Sarsa · April 26, 2020, 9:45am

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

quangfr · May 14, 2020, 5:48pm

Hi Harri,

Do you have an update for the web date picker ?

Thank you !

Eduardo_Jaramillo · June 15, 2020, 3:31pm

Hi Harri,

Any news on the web date picker?

Thanks

Harri_Sarsa · July 7, 2020, 3:01pm

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

Eduardo_Jaramillo · July 7, 2020, 10:08pm

Thanks. I’ll give it a try.

Husam_Khalidi · October 14, 2020, 11:16am

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

Tomi_Laakso · October 16, 2020, 4:25am

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)

Yosser_Kammoun · March 11, 2021, 2:45pm

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

Yosser_Kammoun · March 11, 2021, 2:46pm

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

Mevi · March 16, 2021, 9:49am

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.

Yosser_Kammoun · March 18, 2021, 1:58pm

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.

Mevi · March 19, 2021, 10:54am

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

Yosser_Kammoun · March 19, 2021, 1:31pm

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

Tony_Daldoss · April 25, 2021, 11:46pm

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