JQuery UI日期选择器在jsbin中工作但不在本地工作

时间:2015-05-10 08:45:36

标签: javascript jquery html css jquery-ui

我正在使用sublime text 3并且我已经测试了其他jQuery UI元素,但今天决定尝试使用日期选择器和我正在组合的一个小项目。我注意到,当我想尝试一下时,我首先在jQuery的网站上保存了jQuery网站上的默认代码,然后我尝试加载它。

示例中的默认代码:

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>jQuery UI Datepicker - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
            $(function() {
                $("#datepicker").datepicker();
            });
        </script>
    </head>

    <body>
        <p>Date:
            <input type="text" id="datepicker">
        </p>
    </body>

</html>

不幸的是,这会打开一个输入字段,但是在点击该字段时,我无法选择日期。事实上,日期选择下拉列表根本没有显示,但我可以告诉输入字段已被选中。我想也许在将代码复制到我的测试文件时我遗漏了一些东西,所以我加载了JSBin并将代码粘贴在那里。神奇的是,它有效。 JSBin example我假设我不知道链接到适当的样式表或jQuery UI的CDN。这个假设是正确的还是为什么这不适用于本地?

1 个答案:

答案 0 :(得分:3)

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

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


</body>
</html>

P.S-我删除了css文件的链接,因为它可能是你的本地css文件。你可以添加它。