Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 352
Maria Avatar asked Jun 09 '26 07:06

Maria


2 Answers

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();
});
like image 97
AndrewL64 Avatar answered Jun 10 '26 21:06

AndrewL64


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

like image 33
Grald Avatar answered Jun 10 '26 21:06

Grald



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!