How to build date input with three dropdowns (DD, MM, YYYY) and one date variable


I have one date variable (no datetime) and would like to build the inputs for the user based on three dropdowns: DD, MM, YYYY
(as I build a web app and native date picker does not work)

What is the best way to implement this?
If I bind a formula to these inputs which extract the correct day/month/year, I struggle to implement the update function of the date variable in case the user has changed something with the dropdowns.

Thanks and best,

Hi! You could use the web date picker for web! You can find it in the marketplace.

If you insist on doing this functionality yourself, I would create three separate page variables for day, month and year, and tie those to the inputs.

1 Like

Thank you, unfortunately I have issues with the component from the marketplace.
It looks like it is not covering input fields so that they appear “in” the date picker (incl. the event handling):

Also it looks like at least partially, the “Outside event” is triggered when I try to select from the dropdowns. I tried to set the z-index higher but did not help.

Any idea how to fix this?

Hmm, Z-index should fix this. Please check that the z-index of all the containers within which the stuff you want beneath is is a lot lower than the date picker’s. Put a ridiculously high number as the z-index of the date picker.

Screenshot 2020-10-23 at 11.07.46

hm, tried this, did not work for me :frowning:

If you try on a new page, you get the calendar to float on top of the other elements, right? So you can start trying to deconstruct your page, copy its content to another page and move the calendar to different levels in your component hierarchy and at some point find where it’s working, and move from there. Or you can send me a picture of your component hierarchy (= component tree) opened up with clarifications of what exactly are the components there that are showing partly on top of the calendar component, and I can try to say what to check.

Hi Mevi, regarding this, how would you tie the 3 page variables to become the birthdate page variable?

Does it need to be JS in the logic flow of a button or is there a better way to do it? Looking for a codeless way in fact.


Or is it done like this? Without JS.
This formula is input on a Create Record logic component of a button that also brings the user to the next page.

I would like to concat the yyyy/mm/dd input from the 3 containers into a date text to be saved.

Hmmm I would probably do this by using SET_DATETIME_COMPONENT. Take some base date, e.g. NOW() and then set each component from the page variables.

Thanks Mevi, will give it a shot!

I am having trouble with this issue as well. I have 3 dropdown fields for mmmm, dd, yyyy along with their page variable. Under the fields, I then display their selection EX: January 10, 2022 where i had to set DATE to include all 3 in formula which will change if any selections change. How would I set the page variable DATE to be in datetext format (YYYY-MM-DD) I’m assuming in the logic of when button is clicked so it does not affect the displayed date on the form. Help would be appreciated. :slight_smile:


wrap my suggestion above in FORMAT_DATETIME_LOCAL with the format you want and that should do it :slight_smile: