Question

我正在尝试将一个表单添加到一个网页，其中包含一个输入，用于在用户单击输入时显示jQuery UI datepicker小部件，就像在jQuery UI Site上一样。

我已经按照演示中列出的步骤进行了操作，但是当我加载页面时，压缩程序在页面底部显示完整宽度，位于关闭页脚标记和关闭正文标记之间。

我可以让它在JS fiddle内部工作，但无法在我的网页上重新创建。

我在文档的头部引用了以下脚本

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

有人有什么想法吗？感谢

Answer 1

不确定是否没有看到完整的代码。 即使没有jQuery UI样式表，它也应该有效。

这里我给出了完整的工作代码

<html>    
    <head>
        <!--START CHOOSE DATE-->
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
            $(function() {
                $('.date_select').datepicker();
            });
        </script>
    </head>    
    <body>
        <p class="date_picker">
            <label for="date_input" class="select">Date:</label>
            <input type="text" name="date_input" id="date_input" class="date_select" />
        </p>
        <!--END CHOOSE DATE-->
    </body>
</html>

JSFiddle

Answer 2

这是我的一个结束标签不正确的简单情况。我把标记放在W3C验证器上，它帮助我发现了问题。

感谢您的帮助。

Answer 3

如果有人碰到这个 - 另一个解决方案。

确保空间没有太多文字。

在我的情况下，我将一周中的日期设置为较长的单词，并强制表格宽度溢出。

jQuery UI Datepicker显示不正确

3 个答案: