CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Lewy
Lewy

Reputation: 615

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

The differences are in how the CSS is retrieved.

File structure

WebRoot

Upvotes: 6

Views: 15637

Answers (6)

017Bluefield
017Bluefield

Reputation: 161

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

Upvotes: 0

Robert Smith
Robert Smith

Reputation: 1

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.

Upvotes: 0

Teod0r
Teod0r

Reputation: 13

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

media="all"

part from the section it works.

Upvotes: 0

eatCitrus
eatCitrus

Reputation: 110

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

Upvotes: 0

mark
mark

Reputation: 1

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.

Upvotes: 0

Tomasz Durka
Tomasz Durka

Reputation: 586

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.

Upvotes: 1

Related Questions