Connect Dropdown Field to Pick Date Dialog

Hello. I am new to appgyver and just learning the ropes. Is there a way to connect my Dropdown Field to the Pick Date Dialog so my user can choose the day, month, and year when creating appointments?

If I cannot do this, is there a way to assign a variable to the picked date when they hit the “Confirm” buttton? I want to display the picked date in a paragraph field.

Hi!

The Pick Date dialog always uses the native date picker for the device. The dialog can be connected to a dropdown field in the way that when the field is tapped then the native date picker appears, just connect the pick date flow function to the component tap event.

You can assign the picked date to a variable. Just create a variable for the picked date, and add “set variable” to the first output of the date picker.

You can see what the dialog’s three outputs are in the “Outputs” tab in the right sidebar.

Hope this helps!

Ok. Thank you. When I use the dropdown field, I can choose the date and it will show the picked date in the dropdown field?

Yes if you bind the date variable to the value of the input field.

I cannot seem to get the Pick Date dialog to connect to my dropdown field. When I click it, see this.
IMG_4492
Here is what I did with my code.


I am not sure what I am doing wrong. I did see the option list, but I do not know how to get rid of it for the pick date to connect to it.

Here are my other variables I set up.
Pick Date Dialog:


Set Page Variable

Hmm you’re right and everything looks good, I was first thinking to disable the dropdown field to get the pick date dialog showing but there doesn’t seem to be an option to disable it :confused:

One option would be to consider switching the dropdown field to an input field and adding the same component tap - pick date - set variable sequence to that component. There would be no option list getting in the way. However, the possibility for text input might mess up the date picking.

I suggest you build your own component to avoid having to deal with the interaction possibilities of dropdown and input fields. Just add the paragraphs “Select Date” and “Select option” and style them as you want. To the “Select option” paragraph add the component tap - pick date - set variable sequence, and bind its value to the variable.

Hope this is a clear enough explanation!

I tried doing this, but it still will not output the date. When I hit the confirm button, it doesn’t do anything. Here is what I did.
Select Option paragraph:


Select Date Paragraph:

Hey!

Hmm it works for me so I think you’re missing some small detail. Did you assign the variable value as the output value of the pick date node?

Also, the event “page variable changed” that you currently have in the paragraph is not needed. The change in variable value will be detected automatically and updated to the content of the paragraph. Try removing that if it helps!

I tried it and it works! I wasn’t setting the assigned value to an output value! Thank you for your help!

Is there any reason why when I tab the button for ‘Pick Date’, no dialog pops up for me to choose the date?

Here’s another ss of my page variable:
Screenshot 2021-03-31 at 1.02.49 PM

Hi @Troy_Lee ,

Hmm the set up looks fine! And this is a mobile app? The pick date component will not work on a webapp or when testing through a browser.

My bad, will test it on mobile now

@Cecilia

Any idea why the UI looks like this. Slanted to the left. Is there anything I can do to make it look better?

Hi, that’s due to the recent iOS update, more info in this thread :slight_smile:

thanks for that Cecilia! you’re the best! :smiley:

Hi Cecilia, so all we can do is to wait for the wheel picker to be an option right? :grinning_face_with_smiling_eyes:

Does the iOS 14 update affect the capturing of the data. Because after picking date and hitting confirm on mobile app, the input doesn’t seem to register in backend? (The input could be registered in the RUN TEST @ Data configurator.)

Another question just to double check: Value of pick date is Date-Text right? and not just Text?

Unfortunately it’s just a waiting matter when it comes to the spinner

Hmm the data capture should not be affected. How are you currently trying to capture the data? The picked date should be accessible via outputs["Pick date"].pickedDate

And yes, the value is a date-text :slight_smile:

1 Like

Thanks @Cecilia !