0

我正在尝试运行与此页面相同的代码以将日期选择器添加到我的输入中：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 已加载”消息在我的段落元素中显示，而不是“未加载”。

在此处输入图像描述

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

4

2 回答 2

1

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

也尝试包装您的代码：

$(文档).ready(函数()
{
    $( "#datepicker" ).datepicker();
});
于 2012-10-08T12:42:21.010 回答
1

您已经加载了 JS，但没有加载 CSS。

您还没有加载 jquery ui css 文件，这就是问题所在，加载它就可以了。

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

编辑：我也没有看到 jquery ui-core js 文件？你包括了吗？

http://jqueryui.com/download，请阅读此链接，日期选择器需要一些必要的文件才能工作。

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

于 2012-10-08T12:43:34.263 回答