6

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.)

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
5
  • Show us some code. jsfiddle.net is extremely useful in this regard.
    – Matt Ball
    May 28, 2011 at 20:04
  • 1
    @Matt -- like this one: jsfiddle.net/drQsr -- which shows that the default, when CSS is present does have arrows to navigate months.
    – tvanfosson
    May 28, 2011 at 20:20
  • I'll look at jsfiddle.net, which seems really useful. In the meantime, I discovered how to add drop down lists for month and year, which is one way to solve the problem. I'm just too stubborn to quit there. I'll be back tomorrow, since I work at home. I can also put the page up where others can see it. It is now running on my laptop dev site. And thanks for responding.
    – Lewy
    May 29, 2011 at 6:24
  • Curiouser and curiouser. I have discovered that datepicker displays the desired arrows in some browsers and not others. It also depends on how I load the CSS.
    – Lewy
    May 29, 2011 at 23:47
  • What I found: if I paste jquery-ui.datepicker.css directly into the head of the html, ui datapicker works fine in Firefox and Safari. Chrome ignores some of the CSS. If I put the css in an external file and include it either with @include or with link rel=stylesheet, I don't get parts of the CSS. I'm working with a test file and jsfiddle to try to isolate the problem. More later.
    – Lewy
    May 30, 2011 at 6:13

6 Answers 6

1

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.

0

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.

0

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. :)

0

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

media="all"

part from the section it works.

0

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.

0

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();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.