Why jqueryUI datepicker throwing an error?

Am trying out jqueryUI, but firebug catches the following error on this script;

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

firebug error reads;

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

on my html i have 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...

From stackoverflow

• 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>
  

  Gath : Still it doesnt work! please try it.

  Zaagmans : You need to attach the datepicker to a DIV or a SPAN. Try again please.

  Steerpike : Sorry, I hate to downvote, but it's simply incorrect that you can't attach the datepicker() to an input field. Just because the demo doesn't show that doesn't mean you can't do it. (It would kind of make the datepicker pretty useless if you couldn't attach it to input fields)

  Zaagmans : @Steerpike: you are correct. The documentation says to attach it to a DIV or a SPAN, but after testing it with a INPUT I got a calendar control after selecting the INPUT control.

  Steerpike : Voting you back up for corrections and also for using the external ui/jquery download for testing which is generally what solves 90% of the jquery questions found on SO :)

  Gath : Its now working, had not included the correct headers (ui.datepicker.js)

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

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

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

  Try to replace $ with jQuery.

• 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>
  

  Zaagmans : +1 your comment lead me right to providing the solution for this question ;-)