asked on

jQuery UI Datepicker --everything but the "look"

Hi - I'm new to javascript and started to play with jQuery by accident. Mind you - I am not writing Javascript. Only re-using what is already available in the Jquery framework (that's a new word for me :-).

I'm trying to understand and use a UI Datepicker (see link below) . I tried the code provided and the basic Datepicker appeared. But I need to have every element, all the scripts and css files, on my own hard drive to use this in a demo I'm building. I won't be able to link to jquery.com for anything.

After downloading all of the scripts and css files which the demo used,including all the ones it linked by "@import" I would get the "data" of the DP but none of the appearance. How do I get the graphics to appear? What am I missing?

TIA your jQuery expertise.
d2

// this is where I started...
http://docs.jquery.com/UI/Datepicker
 
 
// I downloaded all of these and what they @imported ...
http://jqueryui.com/latest/themes/base/ui.all.css
http://jqueryui.com/latest/jquery-1.3.2.js
http://jqueryui.com/latest/ui/ui.core.js
http://jqueryui.com/latest/ui/ui.datepicker.js
 
@import "ui.base.css"
@import "ui.theme.css"
@import url("ui.core.css");
@import url("ui.datepicker.css");

Open in new window

ASKER CERTIFIED SOLUTION

alien109

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

irf44z

You are actually missing the images linked from the CSS files (these are relative URLs, which doesn't exist on your machine). Basically, you'll need to download the UI library (as per the above comment), make sure that you selected 'UI Core', extract the contents and import the following CSS in your HTML:

<link type="text/css" href="./css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />

The CSS file name might be different depending on how/what version of JQuery you downloaded.

dzash2000

ASKER

Thanks both. This is interesting.
I'm concerned about something - possibly without reason.
On this project I'm building I've made use of "animated collapsible DIVs" which use jQuery 1.2.

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

In the downloads you suggested in your posts I've downloaded jQuery 1.7.1 AND - I didn't see any mention of "animated collapsible DIVs" in the UI descriptions.

Will these jQuery libraries conflict?? Will I be sacrificing the collapsible DIV if I use the DatePicker??

Please set me straight.

d2

SOLUTION