jqueryjquery-ui-datepickersmart-wizard

Adding jquery-ui DatePicker to SmartWizard

I'm using IE8 and SmartWizard 2.0 plugin. One of the steps in the SmartWizard includes a datepicker. But the popup doesn't show on clicking the input tag.

var step4 = '<table id="Step4EffectiveDate" style="margin : auto; padding-top : 50px; height : 50%">';
step4 += '<tr>';
step4 += '<td style="margin : auto"><div class="stepDatePickerDiv">Effective Date: <input type"text" id="datepicker"/></div></td>';
step4 += '</tr>';
step4 += '</table>';

$("#step4").append(step4);

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd'
});
Solution

  • I figured it was because the z-index of the datepicker was lesser than that of the SmartWizard. I increased the z-index of the datepicker to 9999 and its working great now!

    $(".ui-datepicker").css("z-index", 9999);