использую 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="" />
