css - Jquery UI 日期选择器显示不正确

Question

我尝试将 jquery 日期时间选择器插入页面。但它看起来像这样。有哪些可能的解决方案？

我的代码在这里。

                <div class="col-md-offset-8" style="width: 320px;height: 200px;border: 1px solid #ccc;padding: 10px; box-shadow:2px 2px 4px #f6f6f6; position: absolute;top: 100px;">


                    <form method="post" action="payment.php" onsubmit="return paymentConfirm()" >

                        <label>Package :  <?php echo $pkgs[$id]['name'] ?></label><br/>

                        <input type="hidden" name="pkgname" value="<?php echo $id ?>" />

                        <input type="text" name="date" id="date" />    

                        <label>No. of days :  <?php echo $pkgs[$id]['days'] ?></label><br/>

                        <label>No. of peoples :  <input type="number" style="width: 60px;" id="ppl" name="ppl" value="1" onclick="calc()" onblur="calc()" min="1"/> X $<?php echo $pkgs[$id]['price'] ?></label><br/>

                        <input type="hidden" id="ppl_hidden" name="ppl_hidden" value="1"/>

                        <label style="font-size: 25px;" name="price">Price :  $<span id="price"><?php echo $pkgs[$id]['price'] ?></span></label><br/>
                        <input type="submit" class="button1" value="Book now"/><input type="button" class="button1" value="Print"/>
                    </form>


                </div>

J查询代码

$(function () {
                        $("#date").datepicker();
                    });

Answer 1

在您的 .css 中，将 #date 的 z-index 更改为大于投影的 z-index。