datepicker plugin and jQuery UI 1.8.2 theme not compatible?

datepicker plugin and jQuery UI 1.8.2 theme not compatible?

I'm using Keith Wood's datepicker jQuery plugin v.4.0.2 (not the jQuery UI datepicker) with jQuery 1.4.2, and I want to use the jQuery UI Cupertino theme v.1.8.2.

I reproduced the example on this page http://keith-wood.name/datepick.html under the Layout/Style tab. The inline example worked, but the popup example failed.

I tried many permutations and combinations of loading .js and .css files, none of which worked. Would someone please point out the error of my ways? Code snippet and screenshots below.

jQuery UI popup works


jQuery plugin popup fails

  1. <!-- style sheets -->
  2. <link type="text/css" href="/jquery/jquery-ui-1/css/cupertino/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
  3. <link type="text/css" href="/jquery/datepick-4.0.2/jquery.datepick.css" rel="stylesheet" />
  4. <link type="text/css" href="/jquery/jquery-ui-1/development-bundle/themes/cupertino/jquery.ui.theme.css" rel="stylesheet" />
  5. <link type="text/css" href="/jquery/datepick-4.0.2/ui-cupertino.datepick.css" rel="stylesheet" />
  6. <!-- javascripts -->
  7. <script type="text/javascript" src="/jquery/jquery-ui-1/js/jquery-1.4.2.min.js"></script>
  8. <script type="text/javascript" src="/jquery/jquery-ui-1/js/jquery-ui-1.8.2.custom.min.js"></script>
  9. <script type="text/javascript" src="/jquery/datepick-4.0.2/jquery.datepick.js"></script>
  10. <script type="text/javascript" src="/jquery/datepick-4.0.2/jquery.datepick.ext.js"></script>
  11. <script type="text/javascript">
  12. // jQuery UI inline
  13. $(function(){
  14.     $('#datepicker').datepicker({
  15.         inline: true
  16.     });
  17. });
  18. // jQuery UI popup
  19. $(function(){
  20.     $('#datepickerpopup').datepicker({
  21.     });
  22. });
  23. // jQuery plugin inline
  24. $(function(){
  25. $('#themeRollerInline').datepick({
  26.     renderer: $.datepick.themeRollerRenderer});
  27. });
  28. // jQuery plugin popup
  29. // does not work
  30. $(function(){
  31. $('#themeRollerPopup').datepick({
  32.     renderer: $.datepick.themeRollerRenderer, showTrigger: '#calImg'});
  33. });
  34. </script>
  35. <!-- HTML -->
  36. <div id="datepicker"></div>
  37. <p><input type="text" id="datepickerpopup"></p>
  38. <div id="themeRollerInline"></div>
  39. <!-- does not work -->
  40. <p><input type="text" id="themeRollerPopup" class="hasDatepick"></p>