CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
cletus
cletus

Reputation: 625017

Problems with jQuery UI Datepicker

Ok, I've rolled my own theme, I've made a custom jQuery UI pack (progress bar, date picker, slider) and installed it all. Seems to (mostly) work except for two things:

  1. When my page first loads the datepicker div is visible; and
  2. The text "Next" and "Prev" are visible in large font underneath my icons. None of the examples seem to have this problem.

Now (1) I'm currently solving by:

#ui-datepicker-div { display: none; }

in another CSS file but again none of the demos seem to need this.

What am I missing?

Upvotes: 21

Views: 13593

Answers (8)

Ishnatal
Ishnatal

Reputation: 13

Since no one answered the second part of the question...

Add the following two lines to your .ui-icon CSS:

text-indent: -99999px;
overflow: hidden;

That should fix "Prev" and "Next" showing up.

Upvotes: 0

incomplete
incomplete

Reputation: 546

Please change from instActive.inline to (typeof(instActive) == 'undefined' || instActive.inline)

in your jqueryui.js

For discussion on this goto->http://code.google.com/p/jquery-datepicker/issues/detail?id=285

Upvotes: 1

testing
testing

Reputation: 20279

For me the css was not included (jquery.ui.datepicker.css). So I saw a div (ui-datepicker-div) at the bottom of the page and I got the following error with FireBug: instActive is undefined.

Upvotes: 1

Gareth
Gareth

Reputation: 5719

I had a similar problem because I was using the wrong version of the stylesheet for the version of jQuery UI I was using (I'd upgraded the jQuery UI without upgrading the stylesheet). If you're using jQuery UI 1.8.17, make sure that the stylesheet being used is also version 1.8.17.

Upvotes: 2

ndang
ndang

Reputation: 51

Ok many thanks, It's Work bro, here what I've did to resolve : write this style to file jquery-ui-1.7.1.custom.css (or anye css file that you loaded) :

#ui-datepicker-div { display: none; }

then refresh your page

Upvotes: 5

Taytus
Taytus

Reputation: 119

I fixed it using #ui-datepicker-div { display: none; }

Upvotes: 7

andyk
andyk

Reputation: 10008

  1. make sure your javascript files are properly loaded, check for missing files or incorrect path.
  2. make sure that your script run after the document is ready, try putting your script before and/or inside the $(document).ready(){}
  3. try stripping out your own css to see if there's any css conflict.
  4. post some code for us here. :)

Upvotes: 2

jacobangel
jacobangel

Reputation: 6996

Knowing nothing else about your problem, I believe it may be other css on your page conflicting with the picker.

Upvotes: 1

Related Questions