using date picker

using date picker

I am trying to use jquery ui date picker.   I want to  open the date picker  only when user clicks on  the  image next to input field   , I followed the example it did not work , may be  I am doing something wrong please help 

here is the html
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  6.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  7.   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  8.   
  9. <script>
  10.  $(document).ready(function() {
  11.     $(".datepicker").datepicker({showButtonPanel: true,closeText: 'X',buttonImage: 'calendar.gif'  });
  12.   }); </script>
  14. </head>
  15. <body style="font-size:62.5%;">
  16.   
  17. <input  type="text" class="datepicker"/>

  19. <br>
  20. <input  type="text" class="datepicker"/>


  23. </body>
  24. </html>
I want the   calendar img to be displayed next to   input filed and  when user clicks on the calendar icon popup calendar should open .
here is the link for datepicker api


please help me.