Open Datepicker situated inside of Dialog

Question

At the moment I have the dialog defined as :

  $('#dialogCl').dialog({
     autoOpen: false,
     width:650,
     height:550
  });

And the datepicker defined inside #dialogCl as :

 $("#c").datepicker({showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true});

I need to open the datepicker but it seems it puts the datepicker under the dialog.

I found some posts here regarding that but i didnt knew where how to set the z-index of the .ui-datepicker to 1003 programaticly

Answer 1

I had the same problem - my solution was to add a z-index to jquery-ui*.css for .ui-datepicker.

You could try something like $('.ui-datepicker').css({'z-index': 1003}) if you don't have access (or don't want to modify) your css file.

Answer 2

Dialog has a zIndex option that you can use

  $('#dialogCl').dialog({
     autoOpen: false,
     width:650,
     height:550,
     zIndex: 800
  });

Answer 3

My best answer is to set the datepicker UI above all dialog layers :)

.ui-datepicker { z-index : 9999; }

Answer 4

It seems that the datepicker should either place itself on top of everything visible since it's a flyout, or it should accept a zIndex parameter like the dialog does.

Are either of these the case? So far the css hack shown here ($('.ui-datepicker').css({'z-index': 1003}) ) is the only one that's worked.

Thanks!