Question

我正在尝试运行与此页面相同的代码，以便在我的输入中添加日期选择器：http://jqueryui.com/demos/datepicker/ 所以在此页面上如果单击输入框，将显示日期选择器表。这是我页面的代码：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/datepicker.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/widget.js"></script>   
        <link rel="icon" 
              type="image/png" 
              href="#{facesContext.externalContext.requestContextPath}/resources/images/askbirdfavicon.png"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/form.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/datepicker.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/adminnavbar.css" rel="stylesheet" type="text/css" />
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
        <title>AskBird</title>
    </h:head>
<h:body>
        <h:form id="form" >                                  
                <script>
                    $(function() {
                        $( "#datepicker" ).datepicker();
                    });
                </script>
                <div class="demo">

                    Date: <input type="text" id="datepicker" class="hasDatepicker"/>

                </div><!-- End demo -->               
            <script>

                $(document).ready(function () {
                    $("p").text("The DOM is now loaded and can be manipulated.");
                });                                
            </script>
            <p>Not loaded yet.</p>    
</h:form>
    </h:body>
</html>

我的jquery库肯定已加载，因为从下图中可以看出“在我的段落元素中显示了DOM现在已加载的消息，而不是”未加载“。

enter image description here

另外为了确保我的datepicker.js库已加载，我将一个id为“datepicker”的空div放到代码中，以查看显示在我页面上的日历。（再次你在图片中看到它）。问题是通过点击我的输入，没有弹出任何内容。因为这就是我在上面提供的页面中的工作方式。你觉得我做错了什么？

Answer 1

对jquery-ui JS和Css文件的引用在哪里？

尝试包装你的代码：


$(document).ready(function () 
{
    $( "#datepicker" ).datepicker();
});

Answer 2

您已加载 JS，但不加载CSS。

你还没有加载jquery ui css文件，就是这个问题，加载它会起作用。

添加：https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css 或者从jquery ui site下载css和图像。

编辑：另外，我没有看到jquery ui-core js文件？你收到了吗？

http://jqueryui.com/download，请仔细阅读此链接，有一些必要的文件可供datepicker工作。

工作示例：http://jsfiddle.net/tbYPf/30/

jQuery Datepicker，日历不是通过单击输入框显示，而是显示在div中

2 个答案: