CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
Gath
Gath

Reputation: 1345

Why is jqueryUI datepicker throwing an error?

I am trying out jqueryUI, but firebug catches the following error on this script:

$(function(){$("#date").datepicker()});

The firebug error reads:

$("#date").datepicker is not a function

On my html, the "date" id looks like this:

<input type="text" name="date" id="date" >

NB: I have used the correct JqueryUI css/js scripts on the section

Nothing is executing...

Upvotes: 3

Views: 19597

Answers (6)

emstol
emstol

Reputation: 6216

It's an old post but I got here when looking for a solution so people still read it ;) I have or rather had the same problem. In my case it turned out that I was attaching js in html in wrong way (notice in what way I was ending script tag)

WRONG: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"/>

GOOD: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"></script>

When I was doing it in the wrong way I had the same error.

Upvotes: 1

Darren
Darren

Reputation: 21

for me it was just case of making sure the jquery ui was the last one in the list of all the js includes.

Upvotes: 2

RuudKok
RuudKok

Reputation: 5302

jQuery documentation says you can call the datepicker by this command:

$("#datepicker").datepicker();

If you click the 'view source' button on the documentation page you can see that they've wrapped it into the ready function:

$(document).ready(function(){
    $("#datepicker").datepicker();
  });

EDIT: It should work with INPUT (thanks for pointing this out Steerpike). This is the test I've written and it works, try it yourself:

<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body>
  <input type="text" id="datepicker" value="this is a test">   
</body>
</html>

Upvotes: 3

Steerpike
Steerpike

Reputation: 17554

You're almost certainly not loading the datepicker plugin properly. Please supply us the code you're using to include the javascript files.

If you keep having problems, load the jquery and the UI from the google api.

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.0");
</script>

Upvotes: 2

kgiannakakis
kgiannakakis

Reputation: 104198

You are probably loading prototype.js or another library that uses $ as an alias.

Try to replace $ with jQuery.

Upvotes: 0

Rick J
Rick J

Reputation: 2703

 $(document).ready(function(){
  // Your code here
 });

make sure your function is inside the .ready main function.

Upvotes: 1

Related Questions