Question

我正在尝试使用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;
}

Answer 1

您正在调用要从

执行操作的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放在这两个文件之后。

Answer 2

尝试这样做，你错过了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>

Answer 3

以下是您要求的信息，请注意订单，这是直接从JQuery API page获取的日期选择器，因此您应该遵循它：

<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插件往往不起作用。由于您已经引用了该文件的在线版本，因此我只为您提供了该参考。如果这对你不起作用，请确保通过直接浏览这些链接来访问这些文件没有问题。

如果仍然失败，请在加载页面时观察控制台并检查是否有任何错误。这始终是开始搞清楚事情的好地方。

jQuery Datepicker无法运行

3 个答案: