CODEWITHSUNDEEP
javascriptjquerycssjquery-uidatepicker
Roclemir
Roclemir

Reputation: 130

jQuery datepicker is translucent

I am trying to incorporate the jQuery UI datepicker function into a website I'm creating, but for some reason it's showing up translucent. I've read around and aparently it's caused from not linking the css file.

I've linked all of these files in the head in this order:

jquery-ui.min.css
jquery-ui.structure.min.css
jquery-ui.theme.min.css
jquery-1.11.3.min.js
jquery-ui.min.js

They all came from when I DL'd jQuery UI (except the jQuery v1.11.3 of course)

Then, in the form area I have:

<form id="purchase">
    <fieldset class="purchase">
        <input type="text" id="datePicker">
    </fieldset>
</form>

and then in my javascript file I have:

$(function() {

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

});

The result is the date picker shows up but it is transparent. I've been staring at this for hours thinking there's something obvious I'm missing but I just can't see it. Any help would be greatly appreciated.

Upvotes: 1

Views: 827

Answers (1)

kurt
kurt

Reputation: 1156

Theres something up with your style sheet, not sure what it is but something is inserting an empty style tag into your head, replacing it with jquery-ui.css seems to fix it. Hope fully this works in the source as well. Change

<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">

To

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">

Upvotes: 2

Related Questions