prev/next icons not showing in customized jquery datepicker theme

I implemented jQuery DatePicker in my VS2010 project and it works fine with one small issue. When I implemented a custom theme, I lost my prev and next icons (for moving through the months).

Here's the image:

Here are the jquery library references:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="~/lightbox/js/scriptaculous.js?load=effects,builder"&开发者_开发问答gt;</script>
<script type="text/javascript" src="~/lightbox/js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="~/lightbox/css/lightbox.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="~/Scripts/jquery-ui-1.8.9.custom.css" />

Here are my image references in jquery-ui-1.8.9-custom.css

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(~/images/jquery/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(~/images/jquery/ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(~/images/jquery/ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(~/images/jquery/ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(~/images/jquery/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(~/images/jquery/ui-icons_cd0a0a_256x240.png); }

I modified the path to be sure it pointed to the files. Not sure what I'm missing.

Any help would be greatly appreciated.

Thanks.

Are you sure your paths are pointing correctly (AKA, are you seeing the jQuery UI icons elsewhere in your site)? That is the first thing I would check...particularly because you modified the path. You may have inadvertently screwed something up.

Update

I think you need to fix your paths - I don't think they are pointing correctly. From what I see, they have to be relative to your .custom.css file. So, for example, my jquery-ui-1.8.9.custom.css file exists in my Content folder. My states and images are referenced like this:

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }

Therefore, I have to place an images folder at the same level as the jquery-ui-1.8.9.custom.css and place all the images inside that folder. Try that and see if it fixes the problem for you.

For me, the issue was that the Themeroller was adding double quotes around the image paths. I just removed those from my custom CSS file, and everything worked.

i.e. I changed:

url("images/ui-bg_highlight-hard_100_fafaf4_1x100.png")

to:

url(images/ui-bg_highlight-hard_100_fafaf4_1x100.png)

throughout the whole CSS file.

I also was having this problem. I was pulling my hair out. But yes, JasCav is correct, you must put an "images" folder at the same level as your query-ui-1.8.9.custom.css (or in my case jquery-ui-1.8.16.custom.css) file. And inside this folder copy your *.png files from your jquery ui download.

I had the exact same problem and finally solved it.

The problem was coming from the rights on the 'images' directory. I had to make the directory browsable for 'others' by using chmod:

chmod o+rx images

I hope this helps

I had the same problem. Created an images directory under my theme name, and dragged all the gif files and png files from the theme into the new images directory. worked like a charm, no messing with the paths.

I think the themeroller app at JQuery_ui doesn't package the images into an image directory, and it should.

Anyway, revert your pathing back to the way it was, and give it a try. Good luck.

By the way, it appears you put your custom.css into your scripts folder, that gets messy, I just pointed mine to the themes folder copy. i.e.

link href="../../Content/themes/humanity/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css"

I also fell foul of this. I have read the answers given above and they do not tally 100% with my experience as of July 2012. I do not know if the UI custom ThemeRoller has been changed at all since this question was first raised which may explain the previous comments/answers. However for me these answers over complicate what needs to be done and were therefore a confusion to me.

What worked for me :-

1. Use ThemeRoller to create you customised theme.
2. Download the theme - for example to directory my_Work_Area outside of your project.
3. Unzip the download to my_Work_Area
4. Review the index.html after unzipping - check that the datepicker style reflects the style tested in the ThemeRoller. If not go back to the ThemeRoller and repeat 1-3.
5. copy my_Work_Area/js/jquery-ui-1.8.21.custom.min.js to your jquery folder within your project for example _public/_jquery/jquery-ui-1.8.21.custom.min.js
6. if required similarly copy jquery-1.7.2.min.js
7. copy my_Work_Area/css/custom-theme/jquery-ui-1.8.21.custom.css to your css folder within your project for example _public/_css/jquery-ui-1.8.21.custom.css
8. copy the folder my_Work_Area/css/custom-theme/images to your css folder within your project for example _public/_css/images

9. as per the documentation ensure that the following is included in your html

   <link rel="stylesheet" type="text/css" href="../_public/_css/jquery-ui-1.8.21.custom.css" />
   <script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
   <script type="text/javascript" src="../_public/_jquery/jquery-ui-1.8.21.custom.min.js"></script>
   

That is all you need to do.

Whether it is appropriate to have a folder called images inside your css folder might need to be considered. Changing the location of this folder would involve considering of the paths employed.

But if you just want the ui to work 'out of the box' the above works with no need to make anything complicated.

I hope that this helps.

Place image folder with icons files, in that location, where the .css file exists.

who reading this question, If you use this dateime picker http://www.malot.fr/bootstrap-datetimepicker/

You add this option: bootcssVer : 3

 $( ".date" ).datepicker( "option", "changeMonth", true, **"bootcssVer" : 3** );

The icon will show!!!

Let me share the solution for my case. My ASP.NET MVC project has the following directory structure:

• Content
  • themes
    • base
      • images
        • icon1.png
        • icon2.png
      • jquery-ui.css
• Other directories

When I run application locally via Visual Studio, in the jquery-ui.css I can refer to the icons using the following url: url("images/icon1.png"). But when I run application on the Azure server, I must refer to this icon with: url("themes/base/images/icon1.png"). It turned out, that the real "working"/"current" directory for jquery-ui.css is Content directory. That is because in cshtml I load jquery-ui.css using the bundle, which I create in the following way:

bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));

It seems like VS is "super intelligent" and looks for referred images also inside subdirectories.

The solution can be to use inside jquery-ui.css file the absolute url to the images: url("/Content/themes/base/images/icon1.png") (or proper path relative to the Content directory in my case, i.e. url("themes/base/images/icon1.png"), as I mentioned above) or to create bundle with more nested path:

bundles.Add(new StyleBundle("~/Content/themes/base/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));

Another (worse in my opinoin) solution is to load css file into cshtml using <link> element: <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />