Javascript-форум - datepicker jquerymobile z-index

использую datepicker jquerymobile
http://jquerymobile.com/demos/1.0a4....ui-datepicker/
хочу чтобы календарь появлялся поверх элементов страницы
z-index в css устанавливаю большой, но не помогает
пример кода

<head>

  <link rel="stylesheet" href="themes/pro.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" /> 

  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

  <script>
      //reset type=date inputs to text
      $( document ).bind( "mobileinit", function(){
      $.mobile.page.prototype.options.degradeInputs.date = true;
    });	
  </script>

 <link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" /> 
  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>

$( ".ui-page" ).live( "pagecreate", function(){     

    $( "input[type='date'], input:jqmData(type='date')" ).each(function(){
        $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
    }); 

    $('.hasDatepicker').hide();

    $( "input[type='date'], input:jqmData(type='date')" ).click(function(){
     //   $(this).next('.hasDatepicker').datepicker("date").css("z-index", 1000000);;
		$(this).next('.hasDatepicker').show();
        })
		
    $( '.ui-datepicker-calendar a' ).live('click', function() {
       $( '.hasDatepicker' ).hide('fast');
      });
});

<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value=""  />