How do I add arrows to Datepicker?

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 diff开发者_如何学Goerences 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

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.

After adding the missing image from the jquery-ui base, as many suggested, i had to clear the cache in Chrome to see the arrow images. Seems to work fine now.

I had the same challenge. If you right click where you know the image of the arrow should be and select "view background image", you'll be able to figure out whether or not the datepicker is finding the image. When I clicked it, it said some message like "could not find the image ..." and then had the file path that it was looking through for the image. Then I just found the file of the same name from the jquery UI folder I had downloaded and moved it to the file path shown in the error message.

That worked for me. Not sure if you are having the same challenge. :)

I think I may have found the answer. Seems as if i remove the

media="all"

part from the section it works.

I found that the images of the arrows weren't displaying because of the permissions of the image folder. I had copied the entire image folder over from the zip file I downloaded from http://jqueryui.com.

Once I changed the permissions for all users to be able to read-only the images appeared.

You can use the jQuery UI files from an external source, rather than downloading them (unless you want a customized theme). I've made a JSFiddle that highlights the Datepicker's arrows. For this fiddle, I selected the following from the "Frameworks & Extentions" segment of the sidebar:

• jQuery 2.0.2 with jQuery UI 1.10.3

Note that the above selections are external frameworks, and should work the same way for all users.

HTML

<div id="datepicker">
    <!-- jQuery UI datepicker goes here -->
</div>

CSS

/* This CSS will put a solid red border around the arrow symbols. */
.ui-datepicker-header .ui-icon {
    border:2px solid #F00;
}

jQuery

// This jQuery will embed a datepicker widget into the page itself,
// not as an overlay element.

$(function() {
    $("#datepicker").datepicker();
});