datepicker not working exactly

datepicker not working exactly

I am trying to use the datepicker UI element in a form. 
I have followed the examples at  http://docs.jquery.com/UI/Datepicker but I get a form element
that does not use the css I want (I would like the smoothness skin), and the functions on the calendar do not all show up (like next and previous month).

Attached is a screenshot of what the resulting UI looks like after a focus event on the input field

Below is the code used for the page
  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>test for datepicker</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <link rel="stylesheet" href="style.css" type="text/css" />
  9. <style type="text/css">
  10. @import "css/smoothness/jquery-ui-1.7.2.custom.css"; 
  11. <!-- jquery.datepick.css -->
  12. </style>
  13. <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <!-- jquery.min.js -->
  14. <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>  <!-- jquery.datepick.js -->
  15. <script type="text/javascript" src="ui.core.js"></script>
  16. <script type="text/javascript" src="ui.datepicker.js"></script>
  17. <script type="text/javascript">
  18. $(document).ready(function(){
  19. $("#datepicker").datepicker();
  20. $('#datepicker').datepicker('option', 'showOn', true);
  21. });
  22. </script>
  23. </head>
  24. <body>

  26. <input type="text" id="datepicker" />

  28. </body>
  29. </html>
I am guessing that I am not specifying the correct css file or not initializing the correct options on datepicker. I would very much appreciate being pointed to a working example of datepicker.

Thanks