JQuery UI datepicker how to show next prev arrows for month navigation?

Question

Exactly as the title says.

When I load the datepicker there is nothing on the ends to click onto change month.

But you can stil change the month just no visual??

Answer 1

Sounds like the graphics aren't being loaded properly. By default jQuery UI expects the folder with images to be a subfolder of the folder where the css file is. Use a tool such as firebug ('Net' tab) to detect the requests for the image with the arrows, and see what URL it's trying to load it from.

Answer 2

Short answer. You didn't load images provided by jquery ui theme. open console in either chrome or firefox, where you will be told which images and where you should put your images.

Answer 3

Sounds like your theme is not complete, make sure you're loading the month change option correctly.

$( ".date" ).datepicker({ changeMonth: true });

or

$( ".date" ).datepicker( "option", "changeMonth", true );

and check the CSS is being found correctly, you can use firebug to inspect the files called and not found in the "NET" tab

Answer 4

I also stumbled upon this problem.

What I did was, I just re-downloaded the theme. It turned out the images in my theme folder were corrupted.

Answer 5

I'm having a similiar problem. I can change the months, but the arrows aren't visible. even if i give a style within the page to override. Strange, because they work on other pages.

<style type='text/css'>
ui-icon ui-icon-circle-triangle-e {z-index:9999 !important; position:absolute} 
</style>

Answer 6

If you go to Chrome or FF and use the inspector it will tell you which image needs to be there. The element looks like this

<span class="ui-icon ui-icon-circle-triangle-w">

    Prev

</span>

the CSS rule looks something like this

   background-image: url("images/ui-icons_d8e7f3_256x240.png");
}

As mentioned, the network tab is a great place to see which images are not being loaded.

The one gotcha here is that the url is relative to the js file. Click on one of the 404 images and you will not the requesting url at the top. Note that the url is relative to the JS file, so if you have an images folder off the root, putting the images there wont help you so much. copy the images folder from the zip you downloaded and place it in the js folder. this resolved the problem for me.

I read the doc for ChangeMonth as doing something different. I dont think that will solve the problem stated here. http://api.jqueryui.com/datepicker/#option-changeMonth