Error "Uncaught TypeError: $(...).datetimepicker is not a function"

javascript jquery datetimepicker

18,271

Solution 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();
});

Solution 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

18,271

Author by

Maria

student at Technical University in Cluj-Napoca, Romania :)

Updated on June 27, 2022

Comments

Maria almost 2 years

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.

Curtis over 8 years

FYI the current way the OP has wrapped their scripts is simply a shorthand of the one you have suggested.
AndrewL64 over 8 years

$ causes name-conflict between jQuery and plain js hence why you have to call it differently.
AndrewL64 over 8 years

For the OP's issue, the above approach is cleaner than $.noConflict();
Maria over 8 years

I did that , but i still have the same problem
Maria over 8 years

I did that , but i still have the same problem
Curtis over 8 years

Right I see, is this because one of the other libraries is also using $ variable?
AndrewL64 over 8 years

I'm not very sure. It could be another library or vanilla js.