Datetime picker transparent background out of the box?

Question

This is out of the box mvc3 stock grade plain vanilla jquery behavior? Is this default styling behavior? How do I make it NOT transparent? Thx!

Answer 1

I found that the files were there, but the BundleConfig.cs file had the file name wrong. The file name was "~/Content/themes/base/datepicker.css" but BundleConfig.cs had the file listed as "~/Content/themes/base/jquery.ui.datepicker.css".

Answer 2

Just Give the z-index style value for the input field a higher value and also make the position relative, i.e.,

position: relative; z-index: 10000;

It will work smoothly.

Answer 3

My guess is you are indeed missing either the stylesheet or the images.

try adding CSS link to

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css

Answer 4

I was using a custom theme, so the above suggestion wasnt ideal...

The fix was to add background color to this section

/* DatePicker Container */
.ui-datepicker {
    width: 216px;
    height: auto;
    margin: 5px auto 0;
    font: 9pt Arial, sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    background-color: #FFF;
}

Answer 5

This will just work

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

Answer 6

Add this code in style tab

.ui-datepicker {  background: white; }