tags:

views:

231

answers:

3
+3  Q: 

jQuery UI datepicker will not display - full code included

I am having trouble displaying the jQuery datepicker as shown here: http://jqueryui.com/demos/datepicker/

I believe I downloaded all of the proper files, but to be certain, I started from scratch and ripped the demo site. Not all of it, but what I believed to be the important parts. The result is no datepicker to be shown and no javascript errors. Here is my full code sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
 <link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" media="all" />
 <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;

<script type="text/javascript" charset="utf-8">
 jQuery(function(){
  jQuery("#datepicker").datepicker();
 });
</script>
</head>
<body>
<input type="text" id="datepicker" class="hasDatepicker" />
</body>
</html>

Any help would be very much appreciated. Thanks!

+8  A: 

Please take out the class="hasDatepicker" and it should work. Don't know how but it works.

HTH

Raja  2010-05-12 16:47:11
Yes, that class name is used by jquery-ui to indicate that a datepicker has already been added.
interjay  2010-05-12 16:51:21
The hasDatepicker class is automatically added by jQuery UI when you call datepicker. Putting it in yourself messes things up.
Adam  2010-05-12 16:53:29
Guess I shouldn't have ripped the code. Thank you!
Bill Brasky  2010-05-12 19:42:14
+1  A: 

If you look carefully at the source code of jQuery UI lib you can see that it uses hasDatepicker class inside for datepicker. So, use any other class (even hasdatepicker works) but not hasDatepicker:

<input type="text" id="datepicker" class="anyOtherClassName"/>

or:

<input type="text" id="datepicker" class="hasdatepicker"/>
Bar  2010-05-12 16:52:37
A: 

Remove class="hasDatepicker"

kekekela  2010-05-12 16:54:04

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript