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?

jQuery UI datepicker translation

How can I translate the datepicker from jQuery UI into an other language (german for exaple)?

jquery ui datepicker onSelect method syntax [closed]

Hey everyone I am having problems with the syntax with a jquery ui datepicker onSelect event. Here is my code: $(document).ready(function () { $(‘.datePicker’).datepicker({ onSelect: function(dateText

jQuery UI Datepicker

I am using a modal dialog (provided by jQuery UI). Now on the dialog box there are input text boxes with class date. I want to bind Datepicker with these inputs. I’ve written `$(.date).datepicker({

Jquery UI DatePicker CSS Files

I started integrating jquery ui datepicker in my page. I included the js files: jquery-1.5.1.js jquery.ui.core.js jquery.ui.widget.js jquery.ui.datepicker.js and CSS Files: jquery.ui.datepicker.css

Jquery ui datepicker on iphone?

JQuery ui datepicker wont work on mobile safari. Any workaround or fallback?

JQuery UI datepicker (validation issue)

I am using jQuery UI datepicker, I added date validation in my datepicker input field, this is my javascript code for datepicker (‘start_date’ is the id of my datepicker input field): $(‘#my-form’).v

Customize Jquery UI Datepicker

I most likely suspect is not possible but I wanted to know If someone was has worked with customizing the calendar displayed on Jquery UI datepicker to the extend of changing the dates. Here is my sit

jQuery UI datepicker range

Check out this datepicker here: http://destinationtravel.com/sunriver/ Basically you can select the start date and end date right after each other. I want to mimic this using the jQuery UI date picker

jQuery ui datepicker with Angularjs

I want to use jquery ui datepicker with Angularjs I have founded sample , but my code is not work sample http://www.abequar.net/jquery-ui-datepicker-with-angularjs/ my code <input id=sDate name

jQuery UI datepicker input class

I’m quite fresh on jQuery, and I’ve just implemented jQuery + jQuery UI, but on the datepicker widget it seems like the classes added on the inputs from before are removed, and datepicker classes are

Answers

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

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

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

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

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.

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.

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

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.