Jquery UI日期选择器未正确显示

时间:2014-09-27 06:22:04

标签: css twitter-bootstrap jquery-ui

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

enter image description here

我的代码在这里。

                <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>

Jquery代码

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

2 个答案:

答案 0 :(得分:1)

在.css中,将z-index的{​​{1}}更改为大于投影的#date

答案 1 :(得分:1)

到目前为止我可以看到2-3个问题

  1. 未设置日期的z-index。

  2. 你把它放在一个绝对的div col-md-offset-8中,所以你必须把它放好

  3. 请提供表单css,以便我可以为您提供更多帮助