Problem using datepicker('dialog')

Problem using datepicker('dialog')


I'm trying to use the 'dialog' method of datepicker. I want to display a datepicker that is not linked to an <input> element. Instead, I want it to be displayed when a user clicks on a link.

Here is my code :

  1. <a href="#" id="myLink">foo</a>
  2. <script>
  3. $('#myLink').click(function() {
  4.     $(this).datepicker('dialog');
  5. }
  6. </script>
When the user clicks the link, the datepicker is displayed but it has a z-index of '-9' causing it to be displayed behind the other page elements.

I tryied to force a z-index of '1000' in the CSS:
  1. #ui-dialog-div { z-index: 1000 }
but jQuery force the '-9' value in the 'style' attribute of the ui-dialog-div so my CSS value is overridden and the datepicker is still behind the other elements.

A workaround is to add the following line avec the datepicker('dialog') call:
  1. $('#ui-dialog-div').css('z-index', '1000');

Is there a cleaner way to use the datepicker dialog method?

Thanks for your help

Best Regards