node.js - DatePicker jquery UI 不工作答案

【问题标题】：node.js - DatePicker jquery UI not workinngnode.js - DatePicker jquery UI 不工作
【发布时间】：2014-02-04 03:30:36
【问题描述】：

我正在尝试在我的 node.js 项目中使用 JQuery UI datepicker，但它不起作用。

我的 layout.ejs 和 index.ejs 文件的简化版本。

layout.ejs

<head>
<script type="text/javascript" src="../1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../jquery-ui.css" type="text/css" media="all" />
</head>
<body>
      <script>
         $(function() {
            $( "#datepick" ).datepicker();
        });
     </script>
</body>
</html>

index.ejs

<aside class="widget">
    <p>Date: <input type="text" id="datepick"></p>
</aside>

【问题讨论】：

“它不起作用。”但究竟是什么问题？当你运行它时会发生什么？另外，这些外部js文件导入成功了吗？
当我点击日期字段时，我没有看到日期选择器对话框。没有外部js文件。为了清楚起见，我格式化了 google cdn 链接。

标签： jquery jquery-ui node.js

【解决方案1】：

工作演示 http://jsfiddle.net/MfkAE/

再次检查您的脚本源，更好如下所示，将其更改为 google 链接；休息一下，你可以在正确的源代码的演示中看到一切正常。

希望对您有所帮助！ :)

脚本

 <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

代码

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

【讨论】：

这些是谷歌链接，我为清楚起见进行了编辑。我不确定为什么它不起作用。事实上，我在这里发布之前在 JSFiddle 中尝试了我的源代码，它可以工作。我不仅仅在我的设置中工作。
@Vinoth Aha;那一定是别的，你想检查控制台是否有任何错误等，让我知道如果没有帮助，我会删除这篇文章，

【解决方案2】：

下面的代码可以用nodejs/express在EJS模板引擎中运行布局.ejs

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
    $(function() {
        $('#datepick').datepicker();
    });
    </script>

</head>  
<body>
</body>
</html>

索引.ejs

<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>

【讨论】：