Question

我正在尝试显示两个日期时间选择器，但我收到错误＆＃34;未捕获的TypeError：$（...）。datetimepicker不是一个函数＆＃34; 。我安装了：

Install-Package Bootstrap.v3.Datetimepicker

Install-Package Bootstrap.v3.Datetimepicker.CSS

以下是代码：

@model MVCGreenhouseMonitoring.Models.Plotting.PlottingCalendarDropDownList
<head>
    <title></title>
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
    <script src="~/scripts/moment-with-locales.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/bootstrap-datetimepicker.js"></script>
    <link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.css" />

</head>
<script>
    $(function () {
        $("#txtdatepicker1").datetimepicker();
        $("#txtdatepicker2").datetimepicker();
    });
</script>

@using (Html.BeginForm("IntervalReports", "Greenhouse", FormMethod.Post))
{
    <table>
        <tr>
            <td>
                <p>
                    Start Date: @Html.TextBoxFor(m => m.StartDateCalendar, new { @id = "txtdatepicker1", @style = "width:200px;" })
                </p>
            </td>
            <td>
                <p>
                    End Date: @Html.TextBoxFor(m => m.EndDateCalendar, new { @id = "txtdatepicker2", @style = "width:200px;" })
                </p>
            </td>
        </tr>
    </table>
    <input type="submit" name="btnSubmit" value="Submit" />
}

我在Scripts文件夹中有所有必需的脚本。

Answer 1

只需将其包含在其他js文件之上：

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

并像这样包装你的脚本：

jQuery(document).ready(function($){
        jQuery("#txtdatepicker1").datetimepicker();
        jQuery("#txtdatepicker2").datetimepicker();
});

Answer 2

确保包含jquery脚本的正确路径，并且必须是html的head标记中的第一个，您可以在此处获取最新的jquery脚本https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

Answer 3

您需要先包含jQuery库，然后才能在页面中使用jQuery UI。

How to use jQuery UI

喜欢这个

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

Answer 4

jQuery UI依赖于jQuery库。

jQuery UI是一个构建于其上的小部件和交互库 jQuery JavaScript Library，可用于构建高度交互式的网络应用程序。

https://learn.jquery.com/jquery-ui/getting-started/

确保在jQuery UI之前包含对它的引用：

<head>
    <title></title>
    -- jQuery.js reference here --
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
    <script type="text/javascript" src="~/scripts/moment-with-locales.min.js"></script>

错误＆＃34;未捕获TypeError：$（...）。datetimepicker不是函数＆＃34;

4 个答案: