0

我正在尝试使用 jQuery datepicker 工具，但它不起作用。我是 jQuery 新手，所以我不太了解它。有人能发现我哪里出错了吗？我在标题中的链接是否正确？

html:

<html>
    <head>  
        <title>CodeProject</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type='text/javascript' src='javascript.js'></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    </head>
<body><h2>Date Picker</h2>
        <p>I will be making a simple date picker tool using jQuery. You have have seen it in some</br> travel websites where when you move your cursor on a date field, you see a little pop-up which allows you to pick a date.</p></br>
        <p>Departure date:<input type="text" id="departure"></p>
        <p>Returning date:<input type="text" id="returning"></p>
        <button>Submit</button>
</body>

jQuery 文件：

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

CSS 文件：

    #header {
    background-color: white; /**#212121**/
    margin-bottom: 0px;
    margin-left: 0;
    margin-top: 0px;
    z-index: 1px;
    width: 99.2%;
    border-bottom: 2px solid #212121;

}

h1 {
    text-align: left;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    color: #444;
    padding: 0px 0px 6px 0px;
    font-size: 51px;
    line-height: 44px;
    letter-spacing: -2px;
    font-weight: bold;
    padding-left: 10px;
}

span {
    color: #7EAEDE;
    font-size: 20px;
    letter-spacing: 4px;

}

h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:30px;
    margin-top: 0px; margin-bottom: 10px;
    text-align: left;
    font-weight: normal;
    color: #222;
}

h4 {
    font-family: "Lucida Grande", Tahoma;
    font-size: 10px;
    font-weight: lighter;
    font-variant: normal;
    text-transform: uppercase;
    color: #666666;
    margin-top: 10px;
    text-align: left!important;
    letter-spacing: 0.3em;
    margin-left: 2px;
}

#p1 {
    font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.75em;
    letter-spacing: .2em;
    line-height: 1.1em;
    margin:0px;
    text-align: center;
    text-transform: uppercase;
    color: #1BA8E0;
}

body {
    background-color: grey;
    margin: 0; /**body has margin by default so we 0 to get rid of it **/
}

#wrapper {
    width:700px; /**Get everything in the wrapper to be within this width of 700px**/
    margin: 0 auto; /**centre everything**/
    background-color: white;
    margin-top: 0px;
    border: 2px solid #444;
    border-top: 0px;
}

.border { /**Separated by a dotted line**/
    border-bottom: 1px dotted black;    
    border-top: 1px dotted black;
}
4

3 回答 3

2

您正在调用要从中执行操作的 JS 文件

<script type='text/javascript' src='javascript.js'></script>

在您调用 jQuery 和 jQueryUI 组件之前。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

在此处更改您的操作顺序并放在javascript.js这两个文件之后。

于 2013-03-23T21:21:12.313 回答
0

尝试执行您在http:此处错过的操作：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

标记：

<html>
        <head>  
            <title>CodeProject</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
            <script type='text/javascript' src='javascript.js'></script>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        </head>
    <body><h2>Date Picker</h2>
            <p>I will be making a simple date picker tool using jQuery. You have have seen it in some</br> travel websites where when you move your cursor on a date field, you see a little pop-up which allows you to pick a date.</p></br>
            <p>Departure date:<input type="text" id="departure"></p>
            <p>Returning date:<input type="text" id="returning"></p>
            <button>Submit</button>
    </body>
于 2013-03-23T21:22:57.990 回答
0

这是您请求的信息，请注意顺序，这是直接从日期选择器的JQuery API 页面获取的，因此您应该遵循它：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script>

我发现如果您忘记包含它们的 .css 文件，JQuery 插件往往无法工作。由于您已经参考了该文件的在线版本，因此我只是为您提供了该参考。如果这仍然对您不起作用，请确保通过直接浏览这些链接来访问这些文件没有问题。

如果它继续失败，请在加载页面时观察您的控制台并检查是否有任何错误。这总是一个开始弄清楚事情的好地方。

于 2013-03-23T21:52:46.350 回答