How do I add arrows to Datepicker?

Question

I've built a form and want to use UI Datepicker to help people select a date. Datepicker works just fine, but contains no [visible] clue for how to move from month to month. I know that clicking in the upper corners moves the calendar to next or previous month, and I want to put a visual clue in the corner boxes to help my users. How do I attach the images to the display?

I can't provide a display of the calendar because I'm a new user, but the places that the right and left pointers would go are in the upper corners of the datepicker calendar where clicking already changes the calendar as I want.

---

Amended

It looks to me like browsers are not finding the images (stored in /images/) EXCEPT when the CSS is included in the head within script tags. See file structure below. Chrome behavior is different. At the moment, I don't care about Chrome's problem.

What I've done since asking the question:

I attempted to use jsfiddle without much success. http://jsfiddle.net/akakie/Pmpd8/

I put three examples on the web. View source to see the code. (Sorry. I am limited to 2 links.)

• http://communityband.org/t-date-included.php (CSS included)
• http://communityband.org/t-date-link.php (CSS by <link>)
• http://communityband.org/t-date-import.php (CSS by @import())

The differences are in how the CSS is retrieved.

• The CSS for datepicker is included in document head within <style>code from jquery-ui.datepicker.css pasted here</style>.
• CSS retrived by <link rel="stylesheet" href="/css/jquery-ui.datepicker.css" type="text/css" />

• Results varied by browser:

  • With Firefox 4 or Safari 5 or IE 8: Version 1 works as it should, arrows and all. The CSS for datepicker is included in document head within <style>code from jquery-ui.datepicker.css pasted here</style>.

  • Versions 2 and 3 don't find the images. Other formatting is correct.

  • With Chrome, the layout is correct (the calendar appears full size and works) but neither color nor arrows appear.

File structure

WebRoot

• /css

  • /reset.css
  • /basefont.css
  • jquery.ui.datepicker.min.js

• /images

  • /ui-[xxx].png (multiple images)

• /js

  • /libs
    • /jquery-1.6.1.min.js
    • /jquery.ui.datepicker.min.js

Solution

This looks like you are missing CSS file or images.

Apart from jQuery(UI) JavaScript files you need to attach jQueryUI CSS files to your script. You can download whole package from http://jqueryui.com website including js, css, images.

Note that images (by default) need to be in images/ folder relative to the placement of CSS file. If you want to change this structure you will need to alter image paths for background-image: declarations in CSS file.