Set z-index on datepicker

Please provide a link to your site and we can help you with the exact CSS. However, the z-index can be set in your theme's style.css. Possibly something like this, untested though, for you your form:

[css]
.ui-datepicker { z-index: 999 !important; }

or

[css]
.ui-datepicker-div { z-index: 999 !important; }

Or, you can push your content back to allow the date picker to be on top.

I have no direct experience with this in a modal window (popup) but I did see a lot of discussion about that online too. Apparently, the datepicker is technically a popup, and you want to put it in a popup. I'm sure there is a conflict with the z-index there somewhere. Depending on the version of the datepicker UI, it looks like they have changed the z-index multiple times.

I've seen online that the modal has a z-index of 1001, the dialog 1002, which means you need to give the datepicker something 1003 or higher.

EDIT: In your installation, it's even higher. Check this:

.visiblebox Z-index=999999

You have your datepicker like this:

div #ui-datepicker-div Z-index=9999

It needs to be higher than 999999, or you need to dial that number down to something less than your datepicker.

I just went to check again to see what the z-indexes were, but the form does not come up now, just the site, with no form on that page when I checked.

Nevermind: It finally came up.

I believe this is the issue: the z-index of the date picker and the modal window you're using. Do you have anyone nearby who can help you with the JavaScript? Do you have any alternatives, like using the date drop down instead of the date picker, or not using the modal, or a different modal?

Another edit: I was able to add this CSS:

[css]
.visiblebox {
z-index: 100!important;
}

And the datepicker comes up on top of the modal as desired. See this screenshot: http://minus.com/mj4Sbf1j9/

If you can sort out the z-indexes, this will work fine.