I am trying to populate a date type input by using 3 select menus, something like this:
Is there a away to populate the date field when a user selects a day, month and year, and also if they change this, it will also update?
I also need to hide the date input, but don’t think I can using the type="hidden" as it will no longer be a date format. I’m guessing I may be able to hide it with CSS.
Another thing is, I don’t know how this would work cross browser as the date type will be a text type in Safari.
I suggest you first take a look at the “onchange” JavaScript event handler. This event is triggered any time an input changes. In this case, it would be when someone selects from a drop down. You can have this listener attached to multiple drop downs where if any of them change, the event is triggered.
In the event handler itself, you will then read the three drop down box values. With them, you can construct a value you will then place in the date input field. In this event you can also determine if the field is a date input that is supported by the browser or if it is not supported and change the value you place in the text input (for browsers like Safari).
I suggest you try the link above which will link to W3Schools where you can then use the “try it” button to see how this event works. Once you see how that works, look at the JavaScript querySelector() method for getting access to the drop down boxes along with the date input. Then it is just a matter of setting the date input’s .value property to set the date.
I know it sounds like a lot, but it isn’t too bad. Just break the problem down. Get the event listener to work for your three drop downs first, then move on to pulling out their values and setting the date input value. Lastly then look at how you might detect if the date input is a date input vs a text input.
My question is, why do you need to have a hidden date-type input, if you’ve got them selecting items from three dropdowns?
Just send the dropdown data, and have the server decipher the date on the other end?
Also note that a date input eventually is just a string value as well, the primary advantage over a text (or hidden) input is the GUI that you don’t want. It also won’t let you enter invalid dates, but this again should be caught by your custom widget anyway… by using a hidden date input, you’d actually introduce a source for errors when one input would accept a value that the other doesn’t.
