@cjbuilt you actually have only one copy of the jQuery UI datepicker being loaded, the second datepicker script coming from gravity forms is the initialisation script and is required.
Your datepicker is actually working it just isn't visible because it has z-index of -4 which is placing it out of sight behind your page, you can see that by examining the inline styles on the datepicker container that is created
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 1064px; left: 636px; z-index: -4;">
Now compare that with the container for an example form I just created on my local host setup, the z-index is set to 1
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 205px; left: 20px; z-index: 1;">
Now why the z-index is being set to -4 I am not sure but you can add the following css to your stylesheet to counteract the issue, setting the z-index to anything equal to or greater than 1 should work
z-index: 1 !important;
Edit: The jQuery UI datepicker always sets the z-index to 1 greater than the associated field, on line 309 in your css.css file is the following rule which is setting a z-index of -5 so when the jQuery UI datepicker is created it automatically gets a z-index of -4.
background: none repeat scroll 0 0 #F1F1F1;
border: 2px solid #FFFFFF;
border-radius: 10px 10px 10px 10px;
margin: 30px 0;
padding: 15px 30px;
The CSS I suggested earlier will work but if you prefer you could also change the z-index in the rule above instead.
Just another member of the community helping out where I can
Posted 5 years ago on Friday May 10, 2013 | Permalink