Question

I’m having some difficulty with the jQuery date picker control. In my application, I’m using the most basic method to invoke the calendar:

$('#elmt').datepicker();

The target element is an input text box on a pop-up div. Whenever I click into the textbox, the calendar shows up as see-through: http://s17.postimage.org/4knyxgvjz/see_thru_calendar.png

I’ve tried some suggestions already on Stackoverflow to adjust the z-index of the ui-datepicker class:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 9999 !important; }

But that hasn’t made a difference either. My test environment is running Internet Explorer 7 (the calendar does render OK on the sample index.html provided by jQuery-UI).

Has anyone seen an issue like this with the jQuery UI datepicker?

Answer 1

You are not loading the relevant CSS for the jQuery UI datepicker, and that is causing the Calendar to be as “see-through”.

To test it, edit the CSS file for the jQuery UI and change this class background:

.ui-widget-content {
    background: #000;
}

• If the datepicker gets a black background, the style sheet is being
  loaded, but the path for the images might be wrong.

• If no black background, the style sheet isn’t being loaded.

---

Another method to confirm if the problem lies on the style sheet is to include the CSS directly from the jQuery CDN:

http://code.jquery.com/ui/1.8.20/themes/redmond/jquery-ui.css