jQuery datepicker 函数：datepicker 不是函数答案

【问题标题】：jQuery datepicker function: datepicker not a functionjQuery datepicker 函数：datepicker 不是函数
【发布时间】：2017-10-13 21:35:43
【问题描述】：

我正在尝试在此处添加 jQuery datepicker 函数。但是我收到一个错误，例如“日期选择器不是函数”。请让我知道出了什么问题。我解决了其他问题并尝试纠正但没有奏效。

<script>
    $(function () {
        var $j = jQuery.noConflict();
      $j("#From").datepicker();
    });
    //$(function () {
    //    $('#datetimepicker2').datetimepicker({
    //    });
    //});
</script>

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Reports</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.12.4.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
    <div class="container">
        <!-- Form Starts-->
        <form name="PTTReport" style="padding-top:20px">
            <div class="panel panel-primary">
                <div style="padding-bottom:25px" class="panel-heading fixed_panel">
                    <span>Report Filters</span>
                </div>
                <div class="panel-body">
                    <div class="row pb-20px">
                        <label id="From1" class="col-sm-1">From</label>
                        <input type="text" class="col-sm-2" id="From" />
                        <label id="To" class="col-sm-1">To</label>
                        <input type="text" class="col-sm-2" id="To" />
                    </div>
                    <div class="row">
                        <div class='col-sm-5'>
                            <div class="form-group">
                                <label id="From1" class="col-sm-2">From</label>
                                <div class='input-group date' id='datetimepicker2'>
                                    <input type='text' class="form-control" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
</form>
    </div>
</body>
</html>

整个cshtml页面，

    <!DOCTYPE html>
    <script>
        $(function () {
            var $j = jQuery.noConflict();
          $j("#From").datepicker();
        });
        //$(function () {
        //    $('#datetimepicker2').datetimepicker({
        //    });
        //});
    </script>
     <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Reports</title>
        <link href="~/Content/Site.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.12.4.js"></script>
        <script src="~/Scripts/jquery-ui-1.12.1.js"></script>    
    </head>
    <body>
        <div class="container">
            <!-- Form Starts-->
            <form name="PTTReport" style="padding-top:20px">
                <div class="panel panel-primary">
                    <div style="padding-bottom:25px" class="panel-heading 
    fixed_panel">
                    <span>Report Filters</span>
                </div>
                <div class="panel-body">
                    <div class="row pb-20px">
                        <label id="From1" class="col-sm-1">From</label>
                        <input type="text" class="col-sm-2" id="From" />
                        <label id="To" class="col-sm-1">To</label>
                        <input type="text" class="col-sm-2" id="To" />
                    </div>
                    <div class="row">
                        <div class='col-sm-5'>
                            <div class="form-group">
                                <label id="From1" class="col-sm-2">From</label>
                                <div class='input-group date' id='datetimepicker2'>
                                    <input type='text' class="form-control" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
</form>
    </div>
</body>
</html>

【问题讨论】：

你的 JS 代码在 HTML 中的什么位置？
就在标签关闭之后
应该是之前</head>，而不是之后
现在我收到“未捕获的 ReferenceError: $ is not defined”
这意味着在包含 JS 时没有定义 jQuery。请编辑您的问题以显示您正在使用的 HTML

标签： javascript jquery angularjs jquery-ui datepicker

【解决方案1】：

您是否在 DOM 中包含 datepicker JS 文件？你能更新最新的代码吗？

【讨论】：

我已经在关闭之后在 HTML 页面本身中添加了 JS

【解决方案2】：

检查下面的sn-p。它的工作

    $(function () {
        var $j = jQuery.noConflict();
      $j(".datepicker").datepicker();
    });
    //$(function () {
    //    $('#datetimepicker2').datetimepicker({
    //    });
    //});

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Reports</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>


</head>
<body>
    <div class="container">
        <!-- Form Starts-->
        <form name="PTTReport" style="padding-top:20px">
            <div class="panel panel-primary">
                <div style="padding-bottom:25px" class="panel-heading fixed_panel">
                    <span>Report Filters</span>
                </div>
                <div class="panel-body">
                    <div class="row pb-20px">
                        <label id="From1" class="col-sm-1">From</label>
                        <input type="text" class=" datepicker col-sm-2" id="From" />
                        <label id="To" class="col-sm-1">To</label>
                        <input type="text" class="datepicker col-sm-2" id="To" />
                    </div>
                    <div class="row">
                        <div class='col-sm-5'>
                            <div class="form-group">
                                <label id="From1" class="col-sm-2">From</label>
                                <div class='input-group date' id='datetimepicker2'>
                                    <input type='text' class="form-control datepicker" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
</form>
    </div>
</body>
</html>

【讨论】：

那么问题可能出在我的代码中。它根本不起作用。很奇怪
我认为你错过了外部“jqueryui css”、“jqueryui.js”的路径，可能是“javacriptlibrary”
它适用于普通的html页面，但不适用于MVC cshtml页面

【解决方案3】：

试试这个：

$(function() {
  var j = jQuery.noConflict();
  j("#From").datepicker();
});

【讨论】：