jQuery DatePicker隐藏在页脚内

Question

我正在使用jQuery DatePicker。在页面上，我有一个页脚，当datepicker弹出时，它隐藏在页脚内。如何修复此错误？这是我的jsfiddle

Here I have tried with footer and datepicker. But the date is hidden.

Answer 1

尝试以下：

将页脚的z-index:0和tbody（日历）的background-color放到白色。

html：

<div data-role='footer' data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" 
style='padding:40px;background-color:red;z-index:0'> 
</div>

CSS：

.ui-datepicker-calendar tbody {background-color:#FFF;}

这是更新的小提琴

Answer 2

这发生了，因为页脚的z-index比日期弹出

更高

这就是为什么页脚在您的日期弹出窗口之上。

设置页脚的z-index to 0 or less that the date popup，它将起作用。

更新了小提琴 https://jsfiddle.net/8devrvv8/8/

Answer 3

来自文档（此处）： call .datepicker（）在div上，而不是默认情况下显示的输入。

更新了小提琴： https://jsfiddle.net/8devrvv8/13/

我删除了表格和输入，并用DIV代替：

<div id="beautiful-calendar"></div>

在JavaScript中的上述Div上调用.datepicker（）：

$('#beautiful-calendar').datepicker()