title: How do I add arrows to Datepicker?
body: <p>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?</p>
  
  <p>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.</p>
  
  <hr>
  
  <p><em>Amended</em></p>
  
  <p>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.</p>
  
  <p><strong>What I've done since asking the question:</strong></p>
  
  <p>I attempted to use jsfiddle without much success. <a href="http://jsfiddle.net/akakie/Pmpd8/" rel="nofollow">http://jsfiddle.net/akakie/Pmpd8/</a></p>
  
  <p>I put three examples on the web. View source to see the code. (Sorry. I am limited to 2 links.)</p>
  
  <ul>
  <li><a href="http://communityband.org/t-date-included.php" rel="nofollow">http://communityband.org/t-date-included.php</a> (CSS included)</li>
  <li><a href="http://communityband.org/t-date-link.php" rel="nofollow">http://communityband.org/t-date-link.php</a> (CSS by <code>&lt;link&gt;</code>)</li>
  <li><a href="http://communityband.org/t-date-import.php" rel="nofollow">http://communityband.org/t-date-import.php</a> (CSS by <code>@import()</code>)</li>
  </ul>
  
  <p>The differences are in how the CSS is retrieved.</p>
  
  <ul>
  <li>The CSS for datepicker is included in document head within <code>&lt;style&gt;code from jquery-ui.datepicker.css pasted here&lt;/style&gt;</code>.</li>
  <li>CSS retrived by <code>&lt;link rel="stylesheet" href="/css/jquery-ui.datepicker.css" type="text/css" /&gt;</code></li>
  <li><p>Results varied by browser:</p>
  
  <ul>
  <li><p>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 <code>&lt;style&gt;code from jquery-ui.datepicker.css pasted here&lt;/style&gt;</code>.</p></li>
  <li><p>Versions 2 and 3 don't find the images. Other formatting is correct.</p></li>
  <li><p>With Chrome, the layout is correct (the calendar appears full size and works) but neither color nor arrows appear.</p></li>
  </ul></li>
  </ul>
  
  <h2>File structure</h2>
  
  <p><strong>WebRoot</strong></p>
  
  <ul>
  <li><p>/css</p>
  
  <ul>
  <li>/reset.css</li>
  <li>/basefont.css</li>
  <li>jquery.ui.datepicker.min.js</li>
  </ul></li>
  <li><p>/images</p>
  
  <ul>
  <li>/ui-[xxx].png (multiple images)</li>
  </ul></li>
  <li><p>/js</p>
  
  <ul>
  <li>/libs
  <ul>
  <li>/jquery-1.6.1.min.js</li>
  <li>/jquery.ui.datepicker.min.js</li>
  </ul></li>
  </ul></li>
  </ul>