Error “Uncaught TypeError: $(…).datetimepicker is not a function”

问题

I am trying to display two datetimepickers but i'm getting the error "Uncaught TypeError: $(...).datetimepicker is not a function" . I've installed :

Install-Package Bootstrap.v3.Datetimepicker

Install-Package Bootstrap.v3.Datetimepicker.CSS

Here is the code :

@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" />
}

I have all the necessary scripts in the Scripts folder.

回答1:

Just include this on top of the other js files:

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

And wrap your script like this:

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

回答2:

Make sure you included the right path of jquery script and must be the first in the head tag of the html you can get the latest jquery script here https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

回答3:

You need to include the jQuery library before you can use jQuery UI n your page.

How to use jQuery UI

Like this

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

回答4:

jQuery UI is dependant on the jQuery library.

jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications.

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

Make sure you include a reference to it before 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>

来源：https://stackoverflow.com/questions/31962361/error-uncaught-typeerror-datetimepicker-is-not-a-function

标签

javascript

jquery

datetimepicker