javascript - jQuery DatePicker 中的错误

标签 javascript jquery datepicker

我的页面中需要一个 DatePicker 元素。我已经准备好以下代码:

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

@{
    ViewBag.Title = "Check Printing";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h3>Define Check Batch</h3>
<table>
    <tr>
        <td>Check Type:</td>
        <td>@Html.DropDownList("list", ViewData["list"] as SelectList)</td>
    </tr>
    <tr>
        <td>Pay Period:</td>
        <td>12/17/2014 - 01/08/2015</td>
    </tr>
    <tr>
        <td>Check Date:</td>
        <td><input type="text" id="datepicker" /></td>
    </tr>
    <tr>
        <td>Starting Check Number:</td>
        <td></td>
    </tr>
</table>

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#datepicker").each(function () {
                $(this).datepicker();
            });
        });
    </script>
}

但是，当我运行此代码时，它会出现以下错误:

http://localhost:53130/CheckPrinting/CheckPrinting 第 126 行、第 17 列出现未处理的异常

0x800a01b6 - JavaScript 运行时错误:对象不支持属性或方法“datepicker”

我不确定发生了什么，一切看起来都已设置正确吗？ 谢谢

编辑:这是“动态”代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <title>Check Printing - SAAS</title>
    <meta name="description" content="Student Accounting and Allotment System" />
    <link href="/Content/Site.less" rel="stylesheet"/>
<link href="/Content/custom/custom.less" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.8.3.js"></script>


</head>
<body>
    <!--Masthead-->
    <div class="masthead">
        <!--Utility Bar-->
        <div class="navbar">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <div class="navbar-header" style="margin-left:30px; margin-top:20px;">
                            <object data="/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object>
                            <div style="float:right; margin-top:-20px;">
                                <h2>SAAS</h2>
                                <h6>Student Accounting and Allotment System</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="float:none; margin-top:25px;">John Doe <b class="caret" style="margin-left:20px;"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Main Navigation-->
        <div class="navbar navbar-primary">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;">
                        <li><a href='/CheckRegister/CheckRegister'><i class="fa fa-book fa-fw fa-inverse"></i> Check Register</a></li>
                        <li><a href='/Home/About'><i class="fa fa-check-circle-o fa-fw fa-inverse"></i> Reconcile</a></li>
                        <li><a href='/StudentInfo/Info'><i class="fa fa-user fa-fw fa-inverse"></i> Student Info</a></li>
                        <li><a href='/Home/About'><i class="fa fa-print fa-fw fa-inverse"></i> Check Printing</a></li>
                        <li><a href='/Home/About'><i class="fa fa-retweet fa-fw fa-inverse"></i> Reissues</a></li>
                        <li><a href='/Home/About'><i class="fa fa-map-marker fa-fw fa-inverse"></i> Centers</a></li>
                        <li><a href='/Home/About'><i class="fa fa-area-chart fa-fw fa-inverse"></i> Reports</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>



    <div class="container-fluid body-content" style="margin-top:-39px;">

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



<h3>Define Check Batch</h3>
<table>
    <tr>
        <td>Check Type:</td>
        <td><select id="list" name="list"><option value="0">- Select -</option>
<option value="1">Payroll</option>
<option value="2">Termination</option>
<option value="3">Allotment</option>
<option value="4">Bonus</option>
</select></td>
    </tr>
    <tr>
        <td>Pay Period:</td>
        <td>12/17/2014 - 01/08/2015</td>
    </tr>
    <tr>
        <td>Check Date:</td>
        <td><input type="text" id="datepicker" /></td>
    </tr>
    <tr>
        <td>Starting Check Number:</td>
        <td></td>
    </tr>
</table>


        <hr />
    </div>

    <script src="/Scripts/jquery-2.1.1.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>






    <script type="text/javascript">
        $(document).ready(function () {
            $("#datepicker").each(function () {
                $(this).datepicker();
            });
        });
    </script>


</body>
</html>

enter image description here

布局.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <title>@ViewBag.Title - SAAS</title>
    <meta name="description" content="Student Accounting and Allotment System" />
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <!--Masthead-->
    <div class="masthead">
        <!--Utility Bar-->
        <div class="navbar">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <div class="navbar-header" style="margin-left:30px; margin-top:20px;">
                            <object data="~/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object>
                            <div style="float:right; margin-top:-20px;">
                                <h2>SAAS</h2>
                                <h6>Student Accounting and Allotment System</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="float:none; margin-top:25px;">John Doe <b class="caret" style="margin-left:20px;"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Main Navigation-->
        <div class="navbar navbar-primary">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;">
                        <li class="@Url.MakeActive("", "CheckRegister")"><a href='@Url.Action("CheckRegister","CheckRegister")'><i class="fa fa-book fa-fw fa-inverse"></i> Check Register</a></li>
                        <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-check-circle-o fa-fw fa-inverse"></i> Reconcile</a></li>
                        <li class="@Url.MakeActive("Student")"><a href='@Url.Action("Info","StudentInfo")'><i class="fa fa-user fa-fw fa-inverse"></i> Student Info</a></li>
                        <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-print fa-fw fa-inverse"></i> Check Printing</a></li>
                        <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-retweet fa-fw fa-inverse"></i> Reissues</a></li>
                        <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-map-marker fa-fw fa-inverse"></i> Centers</a></li>
                        <li class="@Url.MakeActive("About", "Home")"><a href='@Url.Action("About","Home")'><i class="fa fa-area-chart fa-fw fa-inverse"></i> Reports</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>



    <div class="container-fluid body-content" style="margin-top:-39px;">
        @RenderBody()
        <hr />
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @*@Scripts.Render("~/bundles/dataTables")*@
    @*@Scripts.Render("~/bundles/custom")*@
    @*@Scripts.Render("~/bundles/StudentAllotments")*@

    @RenderSection("scripts", required: false)

</body>
</html>

最佳答案

这里工作正常。

我在这个例子中使用了你的代码，只是删除了很多菜单内容以保持简单。如果此示例不适合您，则可能是您的开发环境和/或浏览器特有的错误。

$(document).ready(function () {
  $("#datepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<h3>Define Check Batch</h3>
<table>
    <tr>
        <td>Check Type:</td>
        <td><select id="list" name="list"><option value="0">- Select -</option>
<option value="1">Payroll</option>
<option value="2">Termination</option>
<option value="3">Allotment</option>
<option value="4">Bonus</option>
</select></td>
    </tr>
    <tr>
        <td>Pay Period:</td>
        <td>12/17/2014 - 01/08/2015</td>
    </tr>
    <tr>
        <td>Check Date:</td>
        <td><input type="text" id="datepicker" /></td>
    </tr>
    <tr>
        <td>Starting Check Number:</td>
        <td></td>
    </tr>
</table>

我假设您正在使用 Visual Studio(基于您的代码) - 有很多选项可以调试您的代码并准确查看错误发生的位置。

检查简单的事情 - 确保 jQuery 在 jQuery UI 之前首先加载，jQuery 应该只在页面上加载一次。是否有脚本以某种方式干扰 jQuery？如果这些都没有问题，那么就开始插入断点并逐步执行，直到找到问题为止。

如果您可以创建一个 fiddle 或一个片段来重现您的确切问题，那么我很乐意为您进一步研究它，但如果不在您的计算机上 - 我无法重现您遇到的这个问题拥有。

关于javascript - jQuery DatePicker 中的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29418794/

上一篇：javascript - 如何覆盖 requestAnimationFrame 循环？

下一篇：javascript - 从 meteor mongo 返回数组

相关文章：

android - 如何将android中的日期选择器对话框设置为昨天的日期

javascript - 打印机是否可以打印所有 cmyk 色域颜色以及 icc 配置文件的具体用途是什么？

javascript - 过滤 Html 表的最有效方法？

javascript - Bootstrap 和 Jquery 与 Node js

jquery - 悬停效果jQuery

javascript - Eyecon datepicker 无法与 bootstrap 和缩小的页面大小结合使用

javascript - 使用此 JavaScript 将 cookie 加载到变量中

javascript - 使用 jQuery 从中间到顶部为多个元素设置动画

javascript - 为什么我的点击函数不断添加CSS表中的最后一个类？

javascript - Datepicker 更改日期值和格式化 Rails 4

©2024 IT工具网  联系我们